Upload a React and Express TypeScript project to Heroku.
July 14, 2022 3pm ET
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 buildthis 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
- 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.
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.
Heroku CLI installation guide and
follow the instructions on
how to deploy node js apps to Heroku.
Procfile in the root of the project and insert this command
web: npm start.
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.
One last thing; create a
.env.productionfile 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.
cd client npm run build cd.. git add . git commit -m "Added url to .env.production." git push heroku main