How to Deploy React JS Application to Heroku

In this article, I will demonstrate how we can deploy our react js application to Heroku.

Heroku

Heroku is a cloud platform as a service (PaaS) that supports a variety of programming languages. Heroku, one of the earliest cloud platforms has been in development since June 2007, when it only supported the Ruby programming language, but it currently supports Java, Node.js, Scala, Clojure, Python, PHP, and Go. As a result, Heroku is referred to as a polyglot platform since it allows developers to design, execute, and expand apps in a comparable manner across most languages. Salesforce.com purchased Heroku in 2010 for $212 million.

It has the following products

1. The Heroku Platform
2. Heroku Postgres
3. Heroku Teams
4. Heroku Enterprise
5. Heroku Connect
6. Heroku Elements

To read about Heroku Node JS development, visit here.

Install Heroku CLI

There are various methods to install Heroku on your system. I will be using Node Package Manager to install. You can find other methods here.

npm install -g heroku

Create Heroku Account

Visit https://signup.heroku.com/ to create a free account. Fill in all the required details and click “Create Account”

1. First Name
2. Last Name
3. Email Address
4. Company Name (Optional)
5. Role
6. Country
7. Primary Developement Langauge

Check your email id for an “email confirmation” mail. Confirm your email id.

After you click the link provided in the email, you will be asked to create a password.

Log In to Heroku

Open the project in any of the code editors. I am using Visual Studio code.

Open Terminal and execute the following command to log in it to Heroku.

1. Using Browser, heroku login
2. Using CLI, heroku login -i

Create Heroku Application

Step 1: Go to the Heroku Dashboard. Click “Create a new app”.

Step 2: Add the name of your application and the region.

1. It only provides two regions i.e. US and Europe. You can choose any of them.
2. Choose your name wisely, as the name you may choose may not be available, which will be indicated with a red color.

Step 3: After filling in all the details, click “Create app”.

You will get something like the above. It contains many tabs, you can dig dive about them on your own.

Pushing Git Repo to Heroku

If you have not initialized a GitHub repo, execute the following command

$ cd react-form/
$ git init

After you are done setting up your github repo, execute the following comamnds:

$ heroku git:remote -a react-restauraant

After which you have to execute the following command, to push your app to “heroku” remote on “main” branch.

$ git add .
$ git commit -am "make it better"
$ git push heroku main

After this, it will some time to deploy your application.

Note: Make sure to add buildpack, since Heroku does not provide buildpack for react.

Go to the “Settings” tab and add the following:

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

To open your deployed app, run the following command:

heroku open

I recommend you to explore Heroku more.

Deploying App directly from GitHub

Go to your application’s dashboard, and select “deploy”.

Select GitHub as the Deployment Method.

Click “Connect to GitHub”. A pop-up will open. Follow the steps to connect your Github to Heroku.

Then search and select the GitHub repository which you want to deploy using Heroku.

Optional: You can choose automatic deployment, so that as and when

Under Manual Deployment, choose the branch which you want to deploy. And that wait for the deployment process to finish.

Once the deployment process finishes, you will be provided with a button, which will link to your application. Click the button, to see whether the app got deployed successfully.

Deploy using Docker

You can deploy using docker as well. I will not be exploring that here. You can research it.

Conclusion

Thanks for reading, hope you got answers to some of your questions and learned how to deploy a React JS application to Heroku.

Visit Let’s React to learn more about React.