React application setup for deploying on Heroku

A few years ago, if you had a web application, it was difficult to deploy it. Today, the situation is a bit different. There are many good and cheap options to use, and one of them is Heroku. It is straightforward to have your web application deployed and available for free with its easy GitHub integration. To do it, all you need to do is follow the steps described below.

Application

The goal is to have the application served on Heroku. But there are some application setup steps that you need to do first. I am assuming you created your React application using the create-react-app package. That means you already have npm tasks defined. These include starting an application and building it for production. If you execute the build task, you get a bundled application in the build folder. And that is what you need to serve from the server.

Step 1: ExpressJS setup

For serving files, I am using the ExpressJS server. While there are plenty of other solutions, I like Express for its simplicity. Also, it is straightforward to use it as an API. To install it, execute the following CLI command.

npm install express --save

Now, we need to add a script that starts the server. This server needs to serve static files from the build folder. For it, create the server.js file in the root of your project and add the following code.

const express = require("express");
const app = express();

app.use(express.static('build'))

app.listen(process.env.PORT || 3002, () => {
    console.log(`listening on port ${process.env.PORT || 3002}`)
});

There are two small things to be careful about here. If you are trying to run this locally, it serves it on port 3002. You can change this to any available port. It first tries to set port value from the process.env.PORT variable. That is the environment variable set by Heroku. The last part of the variable name should be in all caps. There are some StackOverflow posts about having issues because of using lowercase.

Step 2: Post-install task

When setting up Heroku for the Node application, the install task is triggered automatically. To execute the build task, you need to do a small setup, and it is best to place it in the post-install task. You need to update the package.json file to contain that task, like in the code below.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "postinstall": "npm run build"
},

The reason why this is in post-install is that this task can take time. And Heroku has some maximum allowed time for how long the start script is allowed to run, and if the build task takes a long time, it can cause a timeout.

Step 3: Procfile

The last step in the application setup is creating the Procfile. I am not going into details on what that file is. Think of it as a running script for Heroku. There are enough materials about it. This file needs to be in your project's root folder and needs to be named exactly Procfile. No dot at the start or extension at the end. It should contain the following code.

web: node server.js

Wrap-up:

At this moment, your application is ready for deployment. There are few more steps to set up in the Heroku web console, but you are ready to go when it comes to your application. You can find the full code with all steps applied in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.