Deploy an Existing React Application to Heroku in 2022
3 min read
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.
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.
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
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
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.