Deploying React-App in Heroku 🤟!

Original Image https://upmostly.com/wp-content/uploads/deploy-react-app-heroku-1024x530.jpg

Before deploying an application in Heroku lets see What Heroku means!

Heroku ?

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

In a simple manner, its allows us to deploy our application in cloud.

If you have a Git application skip the below step or else Create an application using below step

Create an application in GitHub

You can create a react application using below command

npx create-react-app my-app

This will create a react application in the my-app folder

My application can be found at

https://github.com/parshuramreddysudda/Heroku-Application

Creating repo in Heroku

Create an account if you don’t have one 🙃.

Then create an app in Heroku with a name as ‘ heroku-application-1’ (Must be a Unique name and Small letters)

Navigate to the Settings page and add Build pack URL

https://github.com/mars/create-react-app-buildpack.git

In the next step copy the Heroku git URL which would be on the Settings page.

Heroku URL Image

Now fire up the terminal and navigate to your project folder.

Copy the above URL and paste the following command in terminal

git remote add heroku “Your heroku url ”

My custom URL is below

git remote add heroku https://git.heroku.com/heroku-application-1.git

Next copy the below command in terminal

git push heroku master:master

Here the first “master” means “Git Repository master branch” and the second “master” means “Heroku Repository Master branch”.

In a simple way, we can say we are pushing our git master branch to Heroku Branch master. We can change our branch if you need 😶!

Hooray🥳! Done you have successfully deployed your application.

If everything is correct you can expect the Below Screen.

But where is our application 🧐?

Just navigate to your “application-name.herokuapp.com”

Below is my Deployed application URL

https://heroku-application-1.herokuapp.com/

Note: Heroku deploys applications by using the production build of the Repository. Don’t console any logs.

Clap if you like 🤩.