How to deploy React app to Heroku?

React is a very popular and widely used library for building User Interfaces. So, in this article, we will see how to deploy React app to Heroku.

How to deploy React app to Heroku?

There are various choices if you want to deploy your React app to the cloud platform. Few notable examples are AWS EC2 or Heroku. But for testing your React app, Heroku will be the best option as it is free and very easy to get started with. However, you would need the following prerequisites:

• Installed Node.js and npm.
• Knowledge about GitHub.
• Basic knowledge about Heroku.
• Already created a React app.

Step 1:

Install Heroku CLI in your system by running the following command. It will install the updated version of Heroku CLI into your system.

curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

To check the version you can run the command.

heroku -v

Step 2:

Now, go to https://www.heroku.com/ and register. After completing your registration go to the dashboard and create a new app with the name of your choice. In our case we will be using the name “BOSC Tech Labs”.

Step 3:

Run the following command, it will prompt you to enter any key to continue. It will open a new tab in your browser asking you to log in to your Heroku account. After you enter the required credentials and login on to the site, it is going to show in your terminal “Logged in”.

heroku login

Step 4:

Initialize a Git repository by running the following command. Make sure you be at the top level of your project directory.

git init

Step 5: 

Now, add the Heroku remote by simply running the command which you will find in your Heroku Dashboard -> Your App Name -> Deploy Section. You can also simply run the following command. The deployment method should’ve been chosen as GitHub.

heroku git:remote -a myherokuapp

Step 6:

Now the most important part and i.e Heroku provides the buildpack for Python, Node.js-based app, but it doesn’t provide a buildpack for React apps. So we have to add an extra buildpack in the settings section of your Heroku app.

https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz

Step 7:

Now run the following commands to push your project to the repository.

git add.
git commit -m "First Commit"
git push heroku master

You have successfully pushed your React app to the Heroku repository. Now you can finally see your deployed app, run the following command. Finally, your web app will be deployed on Heroku. It will open your deployed app to your browser. If there is any problem like if your React app is not showing up then you can run the following command to check logs of what has gone wrong. Consider one thing that before deployment tries to remove all warnings from your app as Heroku considers all warnings as errors.

heroku logs --tail

Conclusion:

So, in this article, we have been through how to deploy React app to Heroku. Also, feel free to comment with your suggestions and feedback. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced React JS developers.