Deploy to Heroku Express.js TypeScript project

Upload a React and Express TypeScript project to Heroku.

Denisse Avatar

By:

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'll assume that you have previous experience dealing with Heroku and using Git commands. Let's start!

1. Setup React.

  • 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. Setup for production and 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. Setup Heroku.

Open a Heroku account; if you don't have one, it's free, and they have all the tools you need for your development projects. 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