DEV Community

Cover image for Deploy Your React App To Heroku
Shakhor Smith
Shakhor Smith

Posted on

Deploy Your React App To Heroku

Before you jump into this tutorial you do need to have a few things installed first before you can start.

🚨If your goal is to combine React UI + API (Node, Ruby, Python…) into a single app, then this tutorial is not the answer.


  1. Node / NPM — Click the link and download the installer
  2. Git — Click the link and download the installer
  3. Heroku CLI — Click the link and download the installer


  1. Sign up for Heroku
  2. Setup our React App for deployment
  3. Create Heroku git repository

Step 1 — Sign up For Heroku

Visit Heroku for free hosting

This step explains itself, we need to sign up for Heroku before we can do any deployment. So head over to Heroku and sign up. Once you signed up make sure you head over to your email and confirm your account.

Step 2 — Setup React App

package.json • Before

Open up your React app (I’m using create-react-app) and open up your package.json file. If your using create-react-app we’re going to add a new object called engines. Inside of our engines object, we need to specify the versions for npm and node. To do this open up your terminal and type in:

  • npm -v

Press enter

  • node -v

Press enter

Your versions may be different than mine, but that's fine. Once you specified your engine versions save your file.

Step 3 — Create Heroku Git Repository

With your terminal still open navigate to your React app folder and change directory into it. Now we need to connect our project to Heroku. If you haven’t already installed the Heroku CLI. To make sure it’s installed correctly run this command:

  • heroku --version

You should see your Heroku CLI version. Once that is installed we need to setup up Heroku git repository by running these commands:

  1. heroku login (Enter your Heroku credentials)
  2. git init
  3. git add .
  4. git commit -m “initial commit”
  5. heroku create (You should see two links after running this command. Copy the second one)
  6. git remote add heroku PASTE THE LINK YOU JUST COPIED
  7. git push heroku master

Once you run the last command Heroku will start to run some tests on your app. If everything goes right you should see a successful deploy message. Now you’re able to navigate to your app by running:

  • heroku open

Anytime you make changes to your app and want to re-deploy the only commands you need to run are:

  1. git add .
  2. git commit -m “any message goes here”
  3. git push heroku master

Easier Method 😁

Now that I made you go through all of that process, there is an easier method if you use Github. All you have to do is log into your Heroku account; click “new” then “create new app” and give your app a name. After clicking create you should be greeted with a dashboard for the app you just created. Navigate to the deploy tab and sync your Github account with Heroku. After syncing your Github account and can search for the repository you want to sync with Heroku by scrolling down to “App connected to Github” section and searching for the repository you want to sync. You can also set up automatic deployment, so every time you push to the master branch Heroku will rebuild your app for you.

Enjoy your free hosting!

Follow me on social media:

Instagram | Personal
Instagram | Developer

Top comments (21)

niinpatel profile image
Nitin Patel

You forgot one important step I beleive.

Before deploying the app go to:
Heroku dashboard > settings > buildpacks > add buildpacks and then add

Or, in command line you can do

heroku buildpacks:set

If you don't do this step, heroku will deploy the development build (which is slow) of your react app instead of the optimized production build.

keerthilingu profile image

Yes, build pack is required for create-react-app template (static sites).

In Heroku dashboard, under settings> buildpack - I changed from node build pack to and then react static web page started working (or buildpack can be set via Heroku CLI also).

If your app is involving, node backend , then checkout

nobu0605 profile image
Nobu • Edited

I really appreciate you!
 Finally, I deployed my app to Heroku correctly.

Before deploying, I spent almost 5 hours.

sameerkatija profile image
Sameer Katija

Well, ThankYou Nitin. I wasn't able to upload, but your comment worked Thanks buddy, <3

kingeclipse profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct

Guess you never heard of Billie Eilish well then, check this out

thidasapankaja profile image
Thidasa Pankaja Paranavitharana

Hey, I've deployed few projects on Heroku. But I find the app loads slow with the default buildpack (maybe it's just me).
So I'm using this builpack. It's pretty straight forward .

you just have to use

heroku create $APP_NAME --buildpack

for the 5th step which you use Heroku CLI.

Just wanted to give some info :)

smithmanny profile image
Shakhor Smith

This looks like it's for static sites. I'll definitely check this out the next time I convert one of my apps to static.

vinaymcscet profile image
vinay kumar • Edited

Everytime I have getting this error -
heroku : The term 'heroku' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name,

or if a path was included, verify that the path is correct and try again.
At line:1 char:1

  • heroku create expense-tracker + ~~~~~~
    • CategoryInfo : ObjectNotFound: (heroku:String) [], CommandNotFoundException
    • FullyQualifiedErrorId : CommandNotFoundException

I have also shared a log with you -
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'heroku',
1 verbose cli 'create',
1 verbose cli 'expense-tracker'
1 verbose cli ]
2 info using npm@6.14.12
3 info using node@v14.16.1
4 verbose stack Error: missing script: heroku
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:116:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:436:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:391:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:434:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:161:5)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:382:12
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:123:16
4 verbose stack at FSReqCallback.readFileAfterClose as oncomplete
5 verbose cwd C:\learning\React\react-complete-guide
6 verbose Windows_NT 10.0.18363
7 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "heroku" "create" "expense-tracker"
8 verbose node v14.16.1
9 verbose npm v6.14.12
10 error missing script: heroku
11 verbose exit [ 1, true ]

stephaniie2 profile image

Makes the world most genious easy-to-read tutorial for deploying an App.
Tells in end there is an easier method.

I'm done! So Great :D

aravindakksan profile image

This worked out man!!

vipincreator profile image

I am getting 404 not found nginx .
Please Help

siyabongagoqoza profile image
siyabongagoqoza • Edited

I was getting the same thing too....until i tried the easier method he provided us

seekernik profile image
Nikhil Saini

You didn't mention anything about the Procfile which is the most important thing when you deploying a react project.

lachlan24 profile image

Hey, i followed all the steps but some reason heroku is displaying the default template app that is created when you first create a react app, As opposed to my app. What am i doing wrong ?

dangsteve1 profile image

Thanks for the write up - it was super helpful!

I admit... you got me putting the easy way in the bottom of the article. Sometimes, its better to learn the hard way.

abdulloooh profile image
Abdullah Oladipo

Thanks. This with Nitin comment saved me after several hours

rinah profile image

hello guy! i'm now deplyed my app in heroku ! what a doing after?

jay3000 profile image

This guide is human-friendly. So much trash out there. Thanks man 👌

chandr123 profile image

Hey..I followed your step. Its working..but in react chrome extension indicates "This page is using the development build of React. 🚧

Any Idea.

dillionmegida profile image
Dillion Megida

Kindly check the link

bbaysinger profile image
Bradley Baysinger

I am having an issue. Getting “failed to push some refs” when trying to push.

gscrawley profile image
Gideon S Crawley

Hi I'm having a hard time deploying my react app to heroku. I noticed you don't have a build folder, or a server folder.
Should i delete those before trying this method?

Some comments may only be visible to logged-in visitors. Sign in to view all comments.