Skip to main content

Deploying to Heroku

Introduction

Heroku is a cloud platform that lets companies build, deliver, monitor, and scale apps. In this tutorial, we're going to learn how to deploy a React app to Heroku. Don't worry if you're a beginner, this guide is designed to be easy to follow. Let's get started!

Prerequisites

Before we begin, you'll need to have:

  1. A Heroku account. If you don't have one, you can sign up for a free account here
  2. Node.js and npm installed on your local development machine.
  3. Heroku CLI installed on your local development machine.
  4. A ready-to-deploy React app. If you don't have one, you can create a simple React app using create-react-app.

Creating a React App

Let's begin by creating a new React app using create-react-app. Open your terminal and run:

npx create-react-app react-heroku

After the command finishes, navigate into your new app's directory:

cd react-heroku

Preparing the App for Heroku

Before we can deploy our React app to Heroku, we need to add a static.json file at the root of our project. This file will tell Heroku to serve our app as a static site. Here's a basic example of what this file should look like:

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

Creating a Heroku App

Next, we'll create a new Heroku app. Log in to your Heroku account using the Heroku CLI:

heroku login

Then, create a new Heroku app:

heroku create

This will create a new app, and Heroku will give it a random name.

Deploying the App to Heroku

Now we're ready to deploy our React app to Heroku. First, initialize a new Git repository in your project directory and make an initial commit:

git init
git add .
git commit -m "Initial commit"

Next, set the Heroku buildpack for your app. The buildpack tells Heroku how to handle your app. Since our app was created with create-react-app, we'll use the mars/create-react-app buildpack:

heroku buildpacks:set mars/create-react-app

Finally, push your app to Heroku:

git push heroku master

Conclusion

That's it! Your React app should now be live on Heroku. You can view it by opening your Heroku dashboard, navigating to your app, and clicking "Open app."

Happy coding!