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.
  • Make a folder call react. In the terminal type mkdir react and go into the folder cd react
  • Create React App. In the terminal type npx create-react-app app-name (npx comes with npm 5.2+ and higher) and go into the app cd app-name
  • Type npm run-script build to build the app in a directory named build. The build directory will appear in the root of the app.
  • Create React App comes with a live reload server. Type npm start to serve the app with live reload. Heroku uses the Node.js server when this app is deployed, typing npm run-script build is the way heroku can connect the server with our app.
  • Create an app.js file in the root of the app touch app.js.
  • Type npm install express --save. This command will install express in the node_modules folder and add it to the package.json file. (I am noticing that installing express removed some files.
    I fixed this by typing npm install to install all the necessary files for this app)
  • For Heroku this app points to the app.js server which uses Node.js and Express. (Node.js is required to serve this app locally)
//app.js

const 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.
  • Create a file called Procfile in the root of the app. Type touch Procfile. This specifies the server for heroku to use.

//Procfile

web: 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.
  • Type git init then type git add -A then typegit commit -am "initial commit" then remote add origin https://github.com/user-name/repo-name.git
    . (pushing app to new github repo. Create React App will automatically create a .gitignore file to avoid pushing node_modules and the build directory)
  • Login to heroku heroku login enter heroku password. (heroku toolbelt required)
  • Create heroku app heroku create app-name. (this will add the heroku remote)
  • Deploy to heroku git push heroku master.

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, commit and push to github repo and then git push heroku master again 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

Check the codebase on my GitHub account!