How to Deploy React Application to Heroku

In this tutorial, you will learn how to create a new React App and deploy it to Heroku cloud.

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Video

This tutorial explained in-detail in below YouTube video:

As usual, in this tutorial, we will learn how to create and deploy React App step by step.

Steps

Here are the steps:

1. Create React HelloWorld App

2. Host source code of React App on GitHub

3. Login to Heroku and create a new app in Heroku

4. Adding a buildpack

5. Connecting GitHub repository to Heroku app

1. Create React HelloWorld App

Before creating a React app, make sure that you have installed Node and NPM on your machine.

We are going to use VS Code IDE so make sure that you have installed VS Code IDE on your machine.

Create a "deployment" folder and open VS code IDE in it. We gonna use the Create React App CLI tool to create React Application.

Create React App CLI tool is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

Use below command to create a new React app:

npx create-react-app react-app-heroku

Once that finishes installing, move to the newly created directory:

cd react-app-heroku

Let's change the App.js file with the following content:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello World!</h1>
      </div>
    );
  }
}

export default App;

Use below command to start the project:

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

2. Host Source Code of React App on GitHub

Here, we’ll be creating a fresh GitHub repository and pushing our app to it.

Login to your GitHub account and create a repository as "react-app-heroku".

You can use Git to push source code of newly created React App to this GitHub repository using the following commands:

git remote add origin <new_github_repository_url>
git add .
git commit -m "initial commit"
git push -u origin master

Now our app is on GitHub.

3. Login to Heroku and Create a New App in Heroku

Now it's time to login to Heroku to deploy our React app to Heroku cloud.

Go ahead and login to Heroku and create a new app like:

4. Adding a buildpack

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

5. Connecting GitHub repository to Heroku app

Next, navigate back to the Deploy tab. Scroll down to the deployment method section and choose GitHub. 

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

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

Once the deployment is finished, you will get an update that tells you that your app was successfully deployed on https://react-application-heroku-demo.herokuapp.com:

Related Deployment Tutorials

• How to Deploy Angular Application to Heroku