DEV Community

Cover image for Deploy Your React App To Heroku

Deploy Your React App To Heroku

Shakhor Smith on March 23, 2018

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 + A...
Collapse
 
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 github.com/mars/create-react-app-b...

Or, in command line you can do

heroku buildpacks:set github.com/mars/create-react-app-b...

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.

Collapse
 
keerthilingu profile image
Keerthilingu

Yes, github.com/mars/create-react-app-b... build pack is required for create-react-app template (static sites).

In Heroku dashboard, under settings> buildpack - I changed from node build pack to github.com/mars/create-react-app-b... 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 github.com/mars/heroku-cra-node

Collapse
 
nobu0605 profile image
Nobu • Edited

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

Before deploying, I spent almost 5 hours.

Collapse
 
sameerkatija profile image
Sameer Katija

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

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

Guess you never heard of Billie Eilish well then, check this out youtube.com/watch?v=ebb5AinKxWI

Collapse
 
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 github.com/mars/create-react-app-b...

for the 5th step which you use Heroku CLI.

Just wanted to give some info :)

Collapse
 
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.

Collapse
 
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 ]

Collapse
 
stephaniie2 profile image
stephaniie2

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

Collapse
 
aravindakksan profile image
Aravindakksan

This worked out man!!

Collapse
 
vipincreator profile image
VIPIN-creator

I am getting 404 not found nginx .
Please Help

Collapse
 
siyabongagoqoza profile image
siyabongagoqoza • Edited

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

Collapse
 
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.

Collapse
 
lachlan24 profile image
Lachlan24

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 ?

Collapse
 
dangsteve1 profile image
dangsteve1

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.

Collapse
 
abdulloooh profile image
Abdullah Oladipo

Thanks. This with Nitin comment dev.to/niinpatel/comment/5b6p saved me after several hours

Collapse
 
rinah profile image
rinahs

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

Collapse
 
jay3000 profile image
jay

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

Collapse
 
chandr123 profile image
Chandrasekar

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

Any Idea.

Collapse
 
dillionmegida profile image
Dillion Megida

dev.to/niinpatel/comment/5b6p

Kindly check the link

Collapse
 
bbaysinger profile image
Bradley Baysinger

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

stackoverflow.com/questions/584958...

Collapse
 
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?