Step-by-Step Guide: How to Deploy a React App on Heroku

Deploying a React application on Heroku is a straightforward process. In this guide, we will walk you through the steps required to get your React app up and running on Heroku. By the end of this tutorial, you will have a live React application hosted on Heroku.

Prerequisites

Before we begin, make sure you have the following installed on your local machine:

• Node.js and npm
• Git
• Heroku CLI

Step 1: Create a React App

If you don't already have a React app, you can create one using the following command:

npx create-react-app my-react-app
cd my-react-app

This will create a new React application in a directory called my-react-app.

Step 2: Initialize a Git Repository

Navigate to your React app directory and initialize a Git repository:

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

Step 3: Create a Heroku App

Log in to your Heroku account using the Heroku CLI:

heroku login

Once logged in, create a new Heroku app:

heroku create my-react-app

Replace my-react-app with a unique name for your Heroku app.

Step 4: Configure the Buildpack

Heroku uses buildpacks to determine how to build and run your application. For a React app, we need to use the Node.js buildpack. Heroku automatically detects the buildpack based on the presence of a package.json file.

Step 5: Add a Procfile

Create a Procfile in the root of your project directory. This file tells Heroku how to run your application. Add the following line to the Procfile:

web: npm run start

This tells Heroku to run the start script defined in your package.json file.

Step 6: Set Environment Variables

If your React app requires environment variables, you can set them using the Heroku CLI. For example:

heroku config:set REACT_APP_API_URL=https://api.example.com

Replace REACT_APP_API_URL with the environment variable your app needs.

Step 7: Deploy to Heroku

Now that everything is set up, you can deploy your React app to Heroku. First, add the Heroku remote to your Git repository:

git remote add heroku https://git.heroku.com/my-react-app.git

Replace my-react-app with the name of your Heroku app.

Next, push your code to the Heroku remote:

git push heroku main

Heroku will build and deploy your application. Once the deployment is complete, you will see a message indicating that your app is live.

Step 8: Open Your App

You can open your deployed React app in your browser using the following command:

heroku open

This will open your app's URL in your default web browser.

Conclusion

Congratulations! You have successfully deployed your React app on Heroku. In this guide, we covered the steps to create a React app, initialize a Git repository, create a Heroku app, configure the buildpack, add a Procfile, set environment variables, and deploy your app to Heroku. Now you can share your live React application with the world.

If you encounter any issues or have any questions, feel free to refer to the Heroku documentation or the React documentation. Happy coding!