Tutorial: how to deploy a React production build to Heroku

Below are the steps to deploy a production build of the react app directly onto Heroku.

Step 1: Create an Express JS server to serve your production build

In your repository, create a file called server.js:

touch server.js

In server.js, copy/paste the following code:

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
    return res.send('ping');
});
app.get('/*.html', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html')); //serving build folder
});
app.get('/*.js', function (req, res) {
    res.set('Content-Encoding', 'gzip');
    res.set('Content-Type', 'application/json');
    res.sendFile(path.join(__dirname, 'build', `${req.path}.gz`)); //serving build folder
});
app.listen(port, () => {
    console.log('app started on server 8080');
});

Step 2: Add the following script to React package.json file

In the following file, we can change the script build description so that on Heroku npm start starts the server to serve the build files. While on our local we can use npm start:dev to start the development server.

"scripts": {
    "server": "json-server db.json",
    "build:watch": "webpack-dev-server --mode development --colors --progress --content-base --open --hot --inline --config webpack.config.dev.js",
    "build": "rimraf ./build/* && webpack --mode production --config webpack.config.prod.js",
    "lint": "esw webpack.config.* src --color",
    "lint:watch": "npm run lint -- --watch",
    "start": "node server.js",
    "start:dev": "npm-run-all --parallel server build:watch lint:watch",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

Step 3: Create a React production build

Heroku now runs the build command automatically when you deploy, but it’s a good idea to test the production build locally before deploying (especially your first time).

You can create a production build locally by running this command in your terminal:

npm run build

Then run npm start to start the production server locally.

Step 4: Prevent source code from being deployed

In your repository, create a file called .env :

touch .env

Then add the following to the .env file to prevent source maps from being generated.

#.envGENERATE_SOURCEMAP=false

Source maps allow you to access your source code in the production environment, which makes debugging easier. However, source maps also allow anyone from the public to view your source code.

Note: if you are having trouble debugging an issue in production but you want to keep your source code private, you can create a separate branch, remove that line from the .env file, and deploy that branch to a secret Heroku URL.

Step 5: Deploy to Heroku

If you don’t already have a Heroku account, create one here: https://signup.heroku.com/

In your command line, run the following:

heroku login

You will need to type in your Heroku credentials to the terminal. Once you have successfully entered your Heroku credentials, run the following in your terminal to create a newly deployed app:

heroku create sample-react-production-app

Replace sample-react-production-app with your own app name.

Then push your app build to Heroku with the following git in your terminal:

npm install
git add . 
git commit -m "initial commit"
heroku git:remote -a sample-react-production-app
git push heroku master

These commands install your dependencies, initialize git, and connect your repo to the remote repository hosted by Heroku.

Note: if you already initialized your git before running heroku create [app-name] , then you don’t need to run heroku git:remote -a [app-name] .

Congrats! Now you’ve completed all the necessary steps to deploy a React build. To view your app, run the following in the terminal:

heroku open