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

Comments

[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.

[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.

[samrullo]

Are you familiar with .gitignore?