In this article, I will demonstrate how we can deploy our react js application to 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
- The Heroku Platform
- Heroku Postgres
- Heroku Teams
- Heroku Enterprise
- Heroku Connect
- 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”
- First Name
- Last Name
- Email Address
- Company Name (Optional)
- 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.
- Using Browser,
- 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.
- It only provides two regions i.e. US and Europe. You can choose any of them.
- 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:
To open your deployed app, run the following command:
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.
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.