How to Deploy React Application to Heroku

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF