Deploy to Heroku Express.js TypeScript project

Upload a React and Express TypeScript project to Heroku.

Denisse Avatar


Denisse Abreu
July 14, 2022 3pm ET

Eng/Spa 4-min

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.
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.
  • 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 👍.
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.
  • Second, go to client package.json and set a proxy.
  • Third, go to App.tsx, located in the client folder, and change the getData() function.
  • Fourth, go to the root of the project and create a .gitignore file.
/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.
// 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.
Git Bash
cd client npm run build cd.. git add . git commit -m "Added url to .env.production." git push heroku main