Deploying with Heroku is generally one of the easiest ways to get your project on the internet quickly and for free. This is especially great for developers that want a live link to showcase their projects and sample work to prospective employers and companies. The first step is to create an account on Heroku. Don’t worry, unless you wish to have more than 5 projects on Heroku, you won’t need to input any credit card information.
After signing up, the easiest way to directly launch your project is to install the Heroku terminal into your environment. This can be done by following the steps laid out here:
https://devcenter.heroku.com/articles/heroku-cli
This includes setup for Mac, Windows, and Linux. Signing into your account from the terminal is especially easy since it opens a tab to the Heroku site so that you can log in through there.
At this point you either have a project already created or are about to create the actual project folder to begin development. Assuming that you haven’t created the project yet, these are the steps you need to complete.
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku openThe first set of instructions should be very familiar. It’s simply the standard to creating your project on React.
Next, you “init” your project and get it ready to be pushed to Heroku, but before you even commit the project you need include the react buildpack. The react buildpack is an important part of this process because it sets up the Heroku connection preparing it to receive a React app specifically rather than a vanilla HTML/CSS/JS combo or other frameworks such as Rails, Vue, etc.
Then you continue on to pushing your newly created project as if you were pushing to Github. The key difference is in “git push heroku master” because you aren’t actually pushing to Github, you’re pushing to Heroku. Any new update in code will be similar to committing your changes to a Github repo, except, you push to Heroku using “git push heroku master”
Heroku open simply opens up your new project in tab using that new live link!
Now, let’s assume you already have a React project that you want to set up in Heroku. The process is similar, but can also have some complications.
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku openAs you can see, the process simply excludes the create-react-app process. However, the key here is in avoiding the bugs!
When you create a React app, often you have have dependencies that you add to make that React app run and include tools you need. After installing them through “npm install” you’ll often see a couple extra files automatically appear, these being “package-lock.json” or “yarn.lock”.
If you attempt to launch your React project to Heroku with these files already generated, you will receive an error that causes the push to fail. A quick dirty fix is simply removing these files BEFORE creating the Heroku app and then creating the Heroku buildpack and pushing the project to Heroku.
You can also attempt to push to Heroku before removing these files and see the error for yourself but just be wary of possible merge conflicts you could have if you’re also working with Github, especially if you are on another branch. Then the bugs can get a bit trickier and involve resolving merge conflicts.
All of which are very solvable, but I like to be prepared and avoid unnecessary conflict because it’s important to learn from your mistakes.
Alejandro's blog 