DEV Community

Cover image for Deploy a React app on heroku the right way
Rajesh Sharma
Rajesh Sharma

Posted on

Deploy a React app on heroku the right way

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.

Original Post : https://medium.com/@WebDevRaj/deploy-a-react-app-on-heroku-the-right-way-e17333d29169

Top comments (3)

Collapse
 
lysofdev profile image
Esteban Hernández

If we are just building once and serving static files, we could also build locally or on a dedicated build server, and deploy the static files on a CDN like S3. This will provide a faster, initial loading time. However, we can rely on Heroku as a fallback for server-side rendering.

Collapse
 
dcsan profile image
dc

how does this work for each time you build the react app, you then commit all those files to git? seems that repo would balloon out really quickly. isn't there a better way to handle temporary build files than git with heroku? seems a very frequent use case.

Collapse
 
samrullo profile image
samrullo

Are you familiar with .gitignore?