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.
- 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
- Next, we have to initialise a git repository inside the project folder.
$ git init
Sign up on heroku if you haven’t already.
Install heroku CLI
Login in heroku CLI using your email and password.
$ heroku login
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
Add a new file in the root of your project directory and name it static.json. Put the following code into it.
Now commit all the changes and push the code to heroku master.
$ git add .
$ git commit -m "initial commit"
$ git push heroku master
You can check the deployment using
$ heroku open