2 min read

Create a Frontend project with React and Typescript

Create a Frontend project with React and Typescript

Featured Image

Step 1: Create a new React project

npx create-react-app react-frontend --template typescript
cd react-frontend

Run the app with:

npm run start

Step 2: Add env variables

Create a .env :

REACT_APP_SECRET_CODE=1234

Using it in React components:

console.log(process.env.REACT_APP_SECRET_CODE);

Step 3: Add gitignore

Make sure to add to .gitignore:

.env
node_modules
build

Step 4: Deploy to Heroku

Choose Deployment method: Heroku CLI

Download Heroku CLI from here.

git init

git add .
git commit -am "first commit"

heroku apps:create saasbase-fe
heroku git:remote -a saasbase-fe
git push heroku master

heroku open

If you're deploying to Production, continue on.

Step 5: Add Dockerfile

FROM node:16 AS builder
WORKDIR /app
COPY package.json ./
RUN npm install

COPY . ./
RUN npm run build

FROM nginx:1.19.0
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /app/build .
ENTRYPOINT ["nginx", "-g", "daemon off;"]

docker build -t saasbase-fe . --platform linux/amd64 # make sure the build is for correct platform

docker run -p 8000:8000 -d sssaini/saasbase-fe

Step 6: Upload image to Docker Hub

To create a repository:

  1. Sign in to Docker Hub.
  2. Click Create a Repository.
  3. Name it sssaini/saasbase-fe
docker login

docker tag saasbase-fe sssaini/saasbase-fe:0.1
docker push sssaini/saasbase-fe:0.1

FAQ

I can't install Heroku CLI on M1 Mac.

Follow instructions to set up Homebrew for M1 Macs here and try again.

Sign up for our newsletter

Be the first one to know when we publish next

Don't worry, we'll never share your email with anyone else


© 2024 Sukh

Made with Engyne