Create a Frontend project with React and Typescript

Looking for the backend Node.js project? Click here.

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:

Click _**__Create a Repository*__***_.

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.

I'm building a new SaaS to automate content marketing for your SaaS

Check it out →

Tools for SaaS Devs

Regex Generator