Deploying React on Heroku in 5 min for free (+ GitHub / Heroku CI)

Free hosting and automatic code deployments

Important

As of April 2022, there was a security incident. The CI integration presented in the article isn’t valid anymore.
I’ll provide an updated version making use of GitHub actions beginning of May.

Our goal

• to have our React app accessible at https://your-app-name.herokuapp.com (for me it will be https://your-app-name.herokuapp.com)
• to have our code on GitHub repository
• to have automatic code deployments (the moment we update the code on our branch, we automatically deploy our work to Heroku hosting)

We will take the following steps to achieve our goal:

1. generate a Create React App project (if you don’t have one already)
2. host our code on GitHub repository (if you aren’t doing it already)
3. create Heroku Pipeline, to watch the changes in the repository and autodeploy our code to Heroku.
4. create and configure Heroku App

All of it for free.

Note: I am not affiliated in any way with GitHub nor Heroku nor take any commision — just sharing knowledge and what works for me.

If you aren’t using GitHub, you can still set up automatic deployments on Heroku but you will need Heroku CLI. I will describe this approach in another article.

I like to focus on solutions and the essence without the need to use extra words, so let me get straight to the task at hand.

Generate Create React App

First of all, we need a React application.

We can build it like so [https://reactjs.org/docs/create-a-new-react-app.html]:

npx create-react-app my-app 

I have named my app react-medium-demo so for me the command was:

npx create-react-app react-medium-demo

Setting up GitHub repository

The next step is to create a GitHub repository.

If we don’t have a GitHub repo, we can sign up for a free account here [https://github.com/join].

For this article I have created a repository react-medium-demo to keep the naming convention consistent.

Once we create the repository, we will have to connect it to our application. There are multiple valid ways to do it, I do it like this (in the terminal inside our CRA application folder):

# Please replace the link with your repository link
git remote add origin https://github.com/nekogd/react-medium-demo.git
git branch -M main
git push -u origin main

Then, we might want to switch to working branch and commit our work. Let us create branch qa so that we won’t be working directly on main branch. We will be making merge requests later on and not direct push. This step is optional but will help you learn a bit about GIT.

# to create branch locally
git checkout -b qa
# to add the files
git add .
# to commit
git commit -a -m "init"
# to push (we created the branch locally hence we need to set upstream initially)
git push --set-upstream origin qa

At this point, our React application should be on GitHub repository.

We are ready to take the final step and set up Heroku Pipeline and App.

Setting up Heroku App

Now we need to create Heroku application.

If you don’t have an account, you can sign up for free here: https://signup.heroku.com/. You will get 550h/mth of free hosting [as of May 2021].

To set up Heroku Pipeline

First of all, let us create a pipeline

• Enter the descriptive name of your Pipeline
• Connect to your GitHub account
• Select the repository you would like to connect
• click Create Pipeline

The UI is intuitive and for sure you will be fine.

Now that we have the pipeline, we are now ready to create Heroku App.

To set up Heroku App

Navigate to New -> Create new app

Follow through the steps to create your Heroku App.

We need to:

• enter the app name
• select region (for me it’s Europe)
• Add our app to the pipeline we have created previously
• staging is fine in the last dropdown
• Click Create App

To set up Heroku buildpack

We are building React application. Let us tell Heroku to build our application that way.

• go into Heroku Panel
• open your app (in Heroku Panel)
• navigate to “settings”
• scroll down do “buildpacks”
• click add buildpack
• paste https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz into the window
• save changes

This will tell Heroku to use the buildpack tailored to Create React App.

If you are building Vue, Nuxt or Next application, your buildpack will most likely be different — please pay attention to that. It is very important to select the correct buildpack :)

You can check the buildpacks available here: https://elements.heroku.com/buildpacks.

To set up automatic code deployment

Finally, we need to enable automatic deploys:

• go to our new created app panel
• select “Deploy” in the menu
• scroll down to “automatic deploys”
• select the branch you’d like to connect to Heroku — for me it’s qa
• click Enable Automatic Deploys
• that’s it

To test our solution

Our app will be available at:

• https://your-app-name.herokuapp.com (for me it’s https://react-medium-demo.herokuapp.com/)

To test the deployment process, we can do one of at least three methods:

• merge some code to our branch (for me it’s qa).
• direct push to our brach (for me it’s qa)
• trigger the deployment from Heroku

Next steps

The next steps are entirely up to you. A few ideas to get you started:

• You can start with connecting your custom domain.
• You can manage your app .env inside the Heroku Settings panel
• You can show off your work and start building your portfolio
• You can present your POC with no costs
• You can learn a bit about deployment strategies, for instance you can create two apps: qa-your-app and connect to your qa branch, and the production one your-app and connect to your prod branch
• You can also learn the concept of blue and green deployment strategies (or many others)
• You can learn more about Heroku and use it commercial offer for production
• You can pick up a bit about Jamstack and host your code on Heroku
• Actually The Sky is the limit

How I use Heroku?

Personally, as a long time vet in the industry, I use Heroku for fast prototyping, like presales POCs.

This setup is much faster for me and much more cost effective then the classic one:

• to spin up machine,
• to set it up,
• to add record to subdomain
• to set up the CI, the yml files
• some other tasks

This overhead tasks are solved for me by Heroku.

I’ve also worked in company which used Heroku for big scale application — and the setup was not very different from what I have described in this article.

Summary

In short time we have set up free hosting and automatic code deployments with help from:

• Heroku App
• Heroku Pipeline
• GitHub repository

We are able to present our POCs and portfolio easily. We have also learnt a bit about Heroku but there is so much more to it.