Tutorial: Host React App on Heroku in 4 Steps

I know there are a lot of material availble on how to deploy a react app on Heroku and Heroku natively support node Node.js, hence it’s like a cake-walk. However my main intention behind writing this article is, using this one and my previous article , you can easily build a Web application, with Dotnet core as backend (API only) with MySQL Database and frontend as React Js.
And with deploying this in Heroku, you can easliy spin up your small proof of concepts for demo purposes.

Step 0 — Pre-Requisites

1. Install Node Js (Java scrip runtime env)and npm (node package manager)
2. Create React App, React Js framework.
3. Heroku Account

Step 1: Create a React App

First, you’ll need to create a React app using the create-react-app generator. Make sure you have installed Node and npm first.

node -v
v10.15.3
npm -v
6.4.1

In the terminal, enter the following to generate a new react app :

npx create-react-app myFirstApp
cd myFirstApp

Step 2 — Update Package.json

Update package.json file present in the root folder of the application to include the node and npm version.
The package.json should look like this. I have highlighted the portion that you have to add, to let environment know about the runtime engine to be used.

{
  "name": "myFirstApp",
  "version": "0.1.0",
  "private": true,
  "engines":{
    "node":"10.15.3",
    "npm":"6.4.1"
  },
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

Step 3 — Login to Heroku and Deploy

Last and Final step is to login to Heroku create the app in Heroku and push your repository to Heroku.

heroku login
git init
git add .
git commit -m "Initial Commit"

Now your app is ready for the deployment. Add your Heroku remote and push your code to Heroku. And thats it, close your eyes, rest all will be taken care Heroku :-)

heroku git:remote -a <YourHerokuAppName>
git push heroku master

Now your application is ready to play with. To view your app, run the following in the terminal:

heroku open

Voila..!! This is it.