Upload a React and Express TypeScript project to Heroku.

By:

Denisse Abreu
July 14, 2022 3pm ET

Eng/Spa 4-min

# Create the React Build Folder # Set up React for Production and Initialize Git # Set up React for Heroku

Hello 👋🏼 this is the second part of our project, Create a React and Express js project with TypeScript. In this tutorial, we'll put it all together and upload the project to Heroku. We assume that you have previous experience dealing with Heroku and using Git commands. Let's start!

1. Create the React Build Folder.

Using the command line, go to the client folder and run: npm run build this command will compile and minify the React code.

Terminal

  cd client
  npm run build

Go to index.ts and change the get request. We're pointing to the Express server where the React build is.

index.ts

Using the command line, go back to the server, open a new terminal and run: npm run dev. You should see in http://localhost:8000/ the login form from the Express server 👍.

Terminal

  cd..
  npm run dev

2. Set up React for Production and Initialize Git.

Before uploading the project to Heroku, we need to make some changes to the project. First, add to index.tx a conditional statement to only serve the client folder in production.

index.ts

Second, go to client package.json and set a proxy.

client/package.json

Third, go to App.tsx, located in the client folder, and change the getData() function.

client/src/App.tsx

Fourth, go to the root of the project and create a .gitignore file.

.gitignore

  /node_modules
  .env

Fifth, go to the client .gitignore and delete the build folder; we need this folder for production; you can add all the development files to avoid cluttering Heroku.

client/.gitignore

  // delete
  /build

  // add
  tsconfig.json
  /public
  /src

Last, run a build in the server to apply all the new changes, then initialize a git repository at the root of the project. Check the Git installation Guide if you don't have it on your computer.

Git Bash

  npm run build
  git init
  git add .
  git commit -m "first commit"

3. Set up React for Heroku.

Open a Heroku account; if you don't have one, they have all the tools you need for your production projects. Please consider that as of November 28, 2022, Heroku doesn't have a free tier anymore, but they have low-cost plans for those starting in web development. Follow the Heroku CLI installation guide and follow the instructions on how to deploy node js apps to Heroku. Create a Procfile in the root of the project and insert this command web: npm start.

Git Bash

  git add .
  git commit -m "Added a Procfile."
  heroku login
  heroku create
  git push heroku main

When Heroku finishes the build, it will return the new Heroku URL; visit it and check that the login form is there. The request will not work until we add the new URL to the React app.

Heroku CLI

One last thing; create a .env.production file in the root of the client folder, copy the URL path that Heroku assigns to your project, and paste it there; insert this new file in the .gitignore, run a production build, commit to git your changes, and push everything to Heroku. Now, the login system should work.

client/.env.production

Git Bash

  cd client
  npm run build

  cd..
  git add .
  git commit -m "Added url to .env.production."
  git push heroku main