Deploy Production React App to Heroku

Deploying React App to Heroku can be a bit tricky, at least for me first time doing it ;). So I've decided to write a blog post to have a reference in future…

Deploying React App to Heroku can be a bit tricky, at least for me first time doing it ;). So I've decided to write a blog post to have a reference in future, hope it will help someone as it helped me.

What you need:

1) React app ready to deploy.

2) Make sure node is installed. In my case I specified Node version in package.json(It was required by Heroku CLI):

"name": "bungie-api",
"version": "0.1.0",
"engines": {
  "node": "10.13.0"
},

3) Add server.js file in root folder of your project:

const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});app.listen(port);

4) Install express-favicon

yarn add express express-favicon

5) Modify scripts in package.json

"scripts": {
  "start": "node server.js",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

6) Create .env file in root directory. It will prevent react to build development code

GENERATE_SOURCEMAP=false

7) Now deploy to Heroku. In my case I just linked my dyno with github and pointed to master branch, so each time I push my code to master it will start automatically deploying to Heroku.

And to be more safe: