Deploying React App To Heroku

Hello Everyone,

Today I will be talking about pushing your React app to Heroku. Heroku is a cloud platform that allows us to host our web applications on a URL that they provide us for free. Although if your website has a lot of traffic you can upgrade to their paid version. The free plan is good for the portfolio projects as well as you can show employers that you have experience with deploying applications.

In order to use Heroku, you have to sign up and it’s a very simple and easy process. Here is the link for signing up. Please take a moment and sign up.

**Please make sure that the project that you are trying to deploy is pushed to the master branch on Github.**

Since I already have a Heroku account and also I have two projects hosted that’s why I see two projects. If you are new to Heroku, your view will be slightly different but very similar.

Heroku not only provides this dashboard, but it also provides us a command-line interface that lets us access the Heroku account through CMD(Command-Line-Interface) so that we can push our projects up on the Heroku platform.

Let’s download and install Heroku Command-Line-Interface

Prerequisite: The Heroku CLI requires Git, the popular version control system

Mac download link and also documentation: here

VERIFY YOUR INSTALLATION

To make sure if was installed successfully 
run heroku --version

If you see something similar to this then you have successfully installed Heroku CLI.

Now let us link Heroku CLI to Heroku account
instructions here: https://devcenter.heroku.com/changelog-items/1530
run 'heroku login' in terminal 
This command will open your web browser to complete the login flow.
Enter you Heroku email and password 
and press enter.
It should say "Loggin in and you can close this window and return terminal" 
Your terminal should say Loggied in as yourmail@example.com
At this point you are done with Heroku installation and setup

Now that we are logged in we can access the Heroku commands on CLI which will help us to push the project. Heroku projects are similar to GitHub repositories. You simply push commits to Heroku using git commands, however, they are specially for Heroku.

In order to deploy our app first, create a Heroku project which you can do from Heroku CLI.

Go to your terminal and navigate to the React project directory and run
heroku create yourprojectname-live --buildpack https://github.com/mars/create-react-app-buildpack.git

For example, my application

The link we pro provided will optimize the build for Heroku to deploy our create-react-app

This will push our master branch command to Heroku, It will start building the source. You will see a lot of logs from Heroku, it means that Heroku is trying to run your project on its server. Please be patient and let the process finish.

In the end, if everything went well you should see this, and our project was successfully hosted at https://hosting-blog-live.herokuapp.com/

Please copy that and paste on your internet browser to test

Success

GitHub repo for this project: https://github.com/singhamritpal49/hosting-blog

There you have it. I hope you found this blog helpful. If you’re having any difficulty or need more explanation, I’m more than happy to help you. Please connect with me on LinkedIn or my email is singhamritpal49@gmail.com. Also, check out my last blog on HTTP Protocols.

Happy Coding :)