Deploy a React app on heroku the right way

“MacBOok Pro beside brown mug” by Artem Sapegin on Unsplash

Deploying a react app on heroku is the easiest task when we talk about deployment. However, if you miss some important steps, you might break the react-router’s functionality or deploy a development build to production.

So let’s look into the process of deploying a react app on heroku the right way, so that we get a production optimised build and react-router’s functionality intact.

I use create-react-app for generating the boilerplate code for a react app and assume that you’re using the same.

1. The very first step is to create a project using create-react-app and update the code as required.

$ create-react-app MyAwesomeApp
$ cd MyAwesomeApp

2. Next, we have to initialise a git repository inside the project folder.

$ git init

3. Sign up on heroku if you haven’t already.

4. Install heroku CLI

https://devcenter.heroku.com/articles/heroku-cli

5. Login in heroku CLI using your email and password.

$ heroku login

6. Create a new heroku app while using the create-react-app buildpack. This buildpack deploys a React UI as a static web site. It also uses the production build of React app for deployment.

$ heroku create MY-AWESOME-APP --buildpack https://github.com/mars/create-react-app-buildpack.git

7. Add a new file in the root of your project directory and name it static.json. Put the following code into it.

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

8. Now commit all the changes and push the code to heroku master.

$ git add .
$ git commit -m "initial commit"
$ git push heroku master

9. You can check the deployment using$ heroku open

Checkout create-react-app-buildpack and Heroku for more details.

“man sitting on chair front of white MacBook” by Ali Yahya on Unsplash