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
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:
- Sign in to Docker Hub.
- 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.