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 :


Using it in React components:


Step 3: Add gitignore

Make sure to add to .gitignore:


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
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


I can't install Heroku CLI on M1 Mac.

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

© 2024 Sukh

Made with Engyne