Create and Deploy, React & Heroku: Magical Guide

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 :

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

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

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

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

1. Go to Heroku, click on the name you've set for this app
2. Click on "Deploy"
3. Go to "Deployment Method" and connect your GitHub
4. 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

1. Go to setting tabs on Heroku
2. 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

Comments

[Hammed Oyedele]

Now.sh is still the most magical of them all...Just 3 characters to deploy almost anything 🎉🎉🎉🎉

  now

[ninateng]

No way!!! ... looking in to this, thank you!!!

[Hammed Oyedele]

Zero configuration and they offers alot of features for free...custom domain, staging and production server, serverless functions etc. And support for most programming languages like JavaScript, Go, PHP, Python etc.

[Rohan Sawant]

This is exactly how Heroku made me feel when I first 'met' it!

🦄