Deploy a React app to Heroku

Deploying to Heroku really couldn't be easier. It's a matter of creating a free Heroku account then pushing your git repo to it. After creating an account on Heroku and starting a new project, the app pretty much spells out all the steps you need to start deploying your app or site.

But here’s a quick review of my experience with a small React App, which will also serve as an intro to a couple other topics about deploying React apps to Heroku, like how to deploy a production build of create-react-app.

What is Heroku?

It’s a hosting service utilizing AWS that wants to remove as many hurdles as possible to make your developer life easier. In my mind it lives somewhere between a fully managed service like Pantheon and self-serve like Linode. With Heroku, if you have code in a git repo right now, you could have it deployed and live for your audience in a matter of minutes with zero server configuration (in many cases). 

Create a new Heroku project

Go to Heroku.com and create an account. I didn’t have to supply a credit card, just an email address, name and basic information.

Because Heroku wants to get people familiar with using their services, they offer a free account level. Sites will be served live, but from a randomly generated heroku domain, eg. https://misty-harbor-93864.herokuapp.com/

Here are the terms for when a credit card will need to be entered: https://devcenter.heroku.com/articles/account-verification

Creating an origin in git for your new heroku project

After logging in to Heroku, a new project can be created from the dashboard. Click create project, give it a name, then confirm by clicking Create App.

Heroku then displays instructions for deploying your app using multiple methods. I downloaded and used the Heroku CLI, but there was also the option to deploy from a Github account or Dropbox. I’m not going to retype those instructions here. I recommend getting the Heroku CLI as it also allows you to manage your application and some server settings from the command line.

The gist of deployment: you set a git origin locally to push to heroku's servers. When you git push heroku master from a repo that's been configured for Heroku, the deployment process is initiated with the new code.

Pushing code and deploying

Pushing code to Heroku is when the fun starts. Simply push a git repo to the Heroku origin given in the previous step, then the magic behind the scenes takes care of the rest. My React app is automatically recognized as a project to run on a NodeJS server by the existence of a package.json file. Heroku then runs a deploy script (the default NodeJS buildpack) to setup the project on its services and deploy to the temporary domain. That’s literally all there is to it. Some projects will take additional configuration or custom buildpacks. But for a pretty simple React App, nothing more required.

Final Thoughts

Deploying with Heroku is extremely easy. It takes almost no effort to get a simple app or site deployed. And it’s free, which allows me to test apps in the wild without handing out my credit card information or configuring a server or building a deploy process. 

Note: I’ve since upgraded to the lowest paid level to unlock other features, like a custom domain and servers that don’t go to sleep. And now, when my apps take off and start crushing the internet with their popularity, Heroku will automatically scale. (At that point it’ll probably prove to be too expensive compared to other options, but I’m not actually worried about running into the problem for now :)