Deploy Production React App to Heroku
Hash tags:
Heroku
React
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):
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:
