Create and Deploy, React & Heroku: Magical Guide

ninateng — Tue, 19 Nov 2019 00:29:45 +0000

Hello my dearest noobs,

I would like to share with you the EASIEST and FASTEST steps to create and deploy your react app with Heroku...

~cough*cough~ even if you've already completed your project ~cough~

...this is p-u-r-e magic...

Please follow these wonderful steps :

Make a repository on GitHub
Open up your terminal
[ cd ] into folder
[ npx/npm/yarn create-react-app nameofapp ]
- refer back to https://create-react-app.dev/docs/getting-started/
[ cd ] into that new file
[ git init ] -> [ git add . ] --> [ git commit -m "comment here" ]
[ heroku create nameofurlyouwant ]
[ git remote add heroku --place-second-url-given-here-- ]
[ git push heroku master ]

...if it fails...
...perhaps you've saved yarn, you'll need to follow these additional steps...

[ yarn install ]
[ git add yarn.lock ]
[ git commit -m "updated yarn lockfile" ]
[ git push heroku master ]

...these next steps connect your GitHub repository...

Go to Heroku, click on the name you've set for this app
Click on "Deploy"
Go to "Deployment Method" and connect your GitHub
Scroll down & follow steps for "Automatic Deploys"

...last steps are optional, adding a buildpack...

For additional information refer to https://www.heroku.com/elements/buildpacks

Go to setting tabs on Heroku
Scroll down to "Buildpacks"
- refer back to https://www.heroku.com/elements/buildpacks
- do some additional research to see which you'd like best!

I really appreciate you stopping by to give this post a read! Often, I have struggled with the deployment process. I would always run into small issues and it would fail. This has been the most efficient way I have found to create a react app and deploy it on Heroku!

Again here are the websites to refer back to:

https://create-react-app.dev/docs/getting-started/
https://www.heroku.com/elements/buildpacks

Sincerely,
yOuR NoObNiNja

DEV Community: ninateng

Create and Deploy, React & Heroku: Magical Guide