Deploy an Existing React Application to Heroku in 2022

Johnson awah Alfred's photo
Johnson awah Alfred
ยทApr 26, 2022ยท

3 min read

Deploy an Existing React Application to Heroku in 2022

Subscribe to my newsletter and never miss my upcoming articles

Lee to the Mao (Lmao) , yes in 2022! Because all those articles out there are really old and do not work anymore. So if you are like me who almost lost your job because this react app just refused to deploy properly to Heroku, well You might just tip me, my favorite address is at the end of the article and also somewhere in between.

Shoutout

Basically, I personally do not think react apps should be deployed to Heroku, just find the likes of netlifyor vercel, they do better with deploying react applications.

Tools you would need

  • heroku cli
  • node and npm
  • git bash
  • existing react app scafolded from create-react-app package

Let's Deploy that App

I'll have to say this, the best way to get your react app to heroku is via the cli tool. Deploying from a GitHub repository would show you pepper you might not have enough milk to help you. Below are the steps to follow, we are assuming you have your terminal open inside the projects folder. Follow the steps below to reach your promised land.

Step 1: Login to your heroku Account

After running the command below, you would be required to hit any key and you'll be redirected to a web interface to login to the account you'll want to use for this deployment.

heroku login

Step 2: Create an App on Heroku

You can skip this if you already have an app created on your Heroku account to where your react app should be deployed to.

heroku create react-heroku-codemon-way

A successful creation would output the URL of your newly created app, something like https://react-heroku-codemon-way.herokuapp.com | https://git.heroku.com/react-heroku-codemon-way.git

0x687d0848507F90dCE542d13D5A824575Df5aBBe0

You know what to do

Step 3: Add project to github remote

If you did not skip step 2, copy the git remote URL with a .git extension and keep. For an existing application, your URL should look similar to what we have in step 2, something like this https://git.heroku.com/your-app-name.git, copy that and keep. You can always get your Remote git url from your app dashboard, under the settings tab.

Now run the command below

git remote add heroku URL-You-copied

Step 4: Stage, Commit and Push to Github

git add .
git commit -m "Deploy in jesus Name"
git push heroku [branchName]

Branch Name could be main, master or rubbish , it's basically the branch you want to push to heroku. At this point, heroku does the remaining work , building a production build and then preparing your application to go live, it might take a while but it must work.

NB: If your react app uses environment variables, do not forget to add them from your heroku app dashboard, under settings.

Bye!!!

0x687d0848507F90dCE542d13D5A824575Df5aBBe0

ย 
Share this