How to Deploy a React JS App to Heroku

Feature thumb snip20180112 12

You would really think that deploying a few JavaScript files to Heroku would be a straightforward process, however, that is not currently the case. Below is a set of steps for what I had to do in order to deploy a React JS application to Heroku.

 

Step 1

Create an account on Heroku. This is a free process, however they may ask you for a credit card in order to ensure that you won't try to create spam accounts.

 

Step 2

Install the Heroku CLI. The following link will walk you through how to install the CLI (command line interface) on your operating system: https://devcenter.heroku.com/articles/heroku-cli - this will give you the ability to use Heroku command on your system.

 

Step 3

Create a git account. You can perform this task at Github.com or Bitbucket.com. I personally prefer Github and that is what i use on my personal and professional development projects.

 

Step 4

Install git on your system. This link will help you walk through how to install git on your operating system of choice: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

 

Step 5

With git and the Heroku CLI installed on your system, you will need to 'wrap' your project as a git repository. So change into the root of your React project and type:

git init
git add .
git commit -m 'Initial commit'

 

Step 6

Create a remote repository on Github (or Bitbucket) and create a connection to the remote repository between your local repo and the remote repo.

 

Step 7

Create a Heroku application with the terminal command:

heroku create <your app name (not with the <> brackets)>

 

Step 8

Push up your code to the application with the command:

git push heroku master

 

This assumes that you're using the starter code from the JS Builder starter applications here: https://github.com/bottega-code-school/js-builder