Deploying create-react-app on Heroku from GitHub

Photo by Joshua Earle on Unsplash

What is Heroku?

Heroku is a cloud Platform as a Service for managing applications. Using Heroku, you can deploy, run, and manage applications written in a number of programming languages: Ruby, Node.js, Java, Python, Clojure, Scala, Go, and PHP.

Heroku lets you build, run, and scale applications in a similar manner across all the languages.

When the Heroku platform receives the application source, it initiates a build of the source application. Buildpacks are key to the slug compilation process. Buildpacks take your application, its dependencies, and the language runtime, and produce slugs.

Connection with Git

Git is a powerful version control system. The Heroku platform uses Git as the primary means for deploying applications. There are many ways to connect your Git with Heroku App.

This article will focus on deploying the GitHub repository on Heroku. Heroku will provide a dashboard with options where you can choose Buildpack, link to your Git repository, and manage deployments.

Deploying on Heroku

To get started, log in to your Heroku account and create a new app using the “New” button in the top right corner.

Create a new app

You will be redirected to the Create New App page. There, you can enter the name for your app. Choose the region along with it.

Name your app

I have named my app create-react-app-heroku-demo. Once you click on Create App button, Heroku will create your app and redirect you to the app’s dashboard.

App’s Dashboard

There are three methods to deploy on Heroku. On the Deploy tab of the dashboard (see screenshot above), you can view all three options:

1. Heroku Git: Use Heroku CLI
2. GitHub: Connect to GitHub
3. Container Registry: Use Heroku CLI

This article will focus on the second method, Connect to GitHub.

Photo by Brina Blum on Unsplash

Before proceeding with deployment via Github, you’ll need to add the Buildpack to your app. Otherwise, Heroku will use Node JS Buildpack to prepare to build while deploying—and eventually, you will receive an Application Error, as your framework will be Node JS instead of React.js (create-react-app). So using the correct Buildpack is essential.

To add a Buildpack to your app, go to the Settings tab. Scroll down to the Buildpack section (see screenshot below) and click on the Add Buildpack button. This will open a pop-up. Copy and paste the following URL, then save changes:

https://github.com/mars/create-react-app-buildpack.git

Add build pack

Next, navigate back to the Deploy tab. Scroll down to the deployment method section (see screenshot below) and choose GitHub. To have your repository available here, you’ll need to connect to GitHub.

Connect to GitHub

Once you have connected your account to GitHub, you will see your GitHub username selected and an input field to search your repository (see screenshot below). Search your repository then click the Connect button.

Choose Repository

Now you can choose any branch you want to deploy. For this example, I have selected the master branch.

Choose branch

Now you can click on the Deploy Branch button to initiate deployment. Heroku will start fetching and installing packages.

NOTE: Heroku also provides the option of Automatic Deploys. When this is enabled, Heroku will initiate deployment whenever a branch is chosen.

Deploying ‘master’ branch

Once the deployment is finished, you will get an update that tells you that your app was successfully deployed (see screenshot below).

App successfully deployed

If your deployment was not successful and the build failed, check the logs for more details.

Here’s one suggestion: do not keep both package-lock.jsonand yarn.lock in your repository. Keep either one or none.

In case you want to have specific node and npm versions, you can mention them in your package.json as follows:

"engines": {
    "node": "10.17.0",
    "npm": "6.11.3"
},

You will get versions of node and npm by running the following commands in your terminal:

node --version and npm -v .

Now, back to your successfully deployed app. Once you get the success message, you can click on the View button as shown in the Heroku screenshot above. That will redirect you to your deployed app. In our case, the app is deployed on:
https://create-react-app-heroku-demo.herokuapp.com

Photo by Andreas Klassen on Unsplash

And that’s it!

If you want to explore this topic further, here are some resources for your reference.

Resources

1. Heroku: https://devcenter.heroku.com/
2. create-react-app build pack: https://github.com/mars/create-react-app-buildpack.git