Create React App Deploy to Heroku

Deploy create react app to Heroku. Demo

NPM (Node Package Manager), Node.js, Git, GitHub, Heroku and knowledge of how to write commands in a terminal will be required for this project. There are many ways to install NPM, Git and Node.js on your machine. I recommend researching the best way to install this software. Visiting the NPM, Git and the Node.js website is a good place to start.

I used a mac to create this app and I use iterm2 for my terminal. This is not required, every machine will come with its own terminal.

Software used for this application

I like to start projects by creating a directory on my desktop by typing commands in the terminal.

  • Open the terminal and type cd desktop. This command takes you to your desktop.
//app.jsconst express = require('express');
const http = require('http');
const path = require('path');
let app = express();app.use(express.static(path.join(__dirname, 'build')));const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost:${port}`));
  • Type node app.js to serve the app at http://localhost:8080.
//Procfileweb: node app.js
  • A few adjustments to package.json are necessary for the heroku deploy process. postinstall and engines are important parts of package.json for a successful deploy.
//package.json{
"name": "app-name",
"version": "0.1.0",
"private": true,
"main": "app.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "react-scripts build"
},
"engines": {
"node": "~6.10.3",
"npm": "~5.6.0"
},
"dependencies": {
"express": "^4.16.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
}
}
  • Assuming the heroku account is created, the heroku toolbelt is installed, and a github account is setup with a new repository make an initial commit and push to the github repo, then login to heroku from the terminal, create a heroku app and push to heroku. Steps as follow.

There may be an error during deploy pertaining to package.lock.json and yarn.lock. Heroku will allow only one lock file. Keep package.lock.json Delete yarn.lock from the app, then type git commit -am "delete yarn.lock then type git push and then git push heroku master and the error will go away.

Each time there is a major change to the app commit and push to github then git push heroku master to keep the two master branches in sync.

Creact React App live on Heroku: https://create-react-test.herokuapp.com/

The working code on github: https://github.com/iposton/create-react-heroku

Front-end Developer. “Lighten up Francis”

Front-end Developer. “Lighten up Francis”