loading...
Cover image for Deploy a React app on heroku the right way

Deploy a React app on heroku the right way

webdevraj profile image Rajesh Sharma ・1 min read

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

Posted on by:

webdevraj profile

Rajesh Sharma

@webdevraj

Web developer. Currently working as a Front-End Developer in India. Follow me on instagram @WebDevRaj

Discussion

pic
Editor guide
 

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.

 

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.

 

Are you familiar with .gitignore?