Deploying a React App in Heroku

       Heroku is a cloud service that allows you to deploy your app to the internet. Currently, Heroku support several languages like Ruby, Java, Node.js, Scala, Clojure, Python, PHP, and Go. But at the beginning, when Heroku initially started in 2007 it only supported Ruby. In Heroku, developers can host a web application for free. But if more storage space or custom URL for the site is needed you need to pay extra for each service. You can choose a monthly payment plan or else you can pay for the whole year which is a cheap option if your planning to run the site for several years. For the study purposes, the free service is more than enough.

Here I’m only going to explain how to host a react app. If you want to host a React App +API, then this tutorial is not the answer.

1. Node / NPM    – If you have already developed the app this should be already in your pc
2. Git   – Need to work with Heroku. Download and install.
3. Heroku CLI  – Download and install.

First, go to the Heroku and make an account for free. Then make sure you confirm your account form the email.

Next, we need to set up our app for hosting. For that, you need to know the node version and npm version you used. So open terminal and type

npm -v 

to get the npm version and

node -v 

to get the node version.

Then open the package.json file in your project and add the property engines as shown below.

{
  "name": "deploy",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "npm": "5.7.1",
    "node": "9.5.0"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Now you can start hosting. Open the terminal and change the working directory to your app folder. Then type

heroku –version

If Heroku CLI is properly installed then you will be able to see the Heroku version. Then type

heroku login 

to log into Heroku. Your default browser will open. Enter the login details. If logged correctly you can close the browser.

Then type the following commands to create the Heroku app .

git init

git add .

git commit -m “initial commit”

heroku create

Now you should be able to see 2 URLs in the terminal. Copy the second URL from that.

git remote add heroku PASTE THE LINK YOU JUST COPIED

git push heroku master

Now your app starts deploying. If the app deployed correctly you will be able to see successfully deploy message.

To open the app type

Heroku open 

in the terminal.

Deploying Changes 

Any time you did a change to your app type the following commands to deploy again with the changes.

git add .

git commit -m “any message goes here”

git push heroku master