FrontendSaas

Create a Frontend project with React and Typescript

Featured Image

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:

  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.