Deploy React App on Heroku: Step-by-Step Guide

Heroku is a popular cloud platform that allows you to deploy web applications with ease. If you’ve developed a React app and want to share it with the world, Heroku is a great choice for hosting. In this tutorial, we will guide you through the steps to deploy your React app on Heroku.

Prerequisites

Before you get started, make sure you have the following prerequisites:

Node.js: You’ll need Node.js installed on your computer to build and run your React app.
Heroku Account: Sign up for a free Heroku account if you don’t have one already.
Heroku CLI: Install the Heroku Command Line Interface (CLI) to manage your Heroku applications from the terminal. You can download it here.
Git: Make sure you have Git installed, as Heroku uses Git for deployment.

Step 1: Create a React App

If you haven’t already, create a React app using Create React App or any other method you prefer. You can use the following command:

npx create-react-app my-react-app

Replace my-react-app with your app’s name.

Step 2: Initialize Git

Navigate to your project folder and initialize a Git repository if you haven’t already:

cd my-react-app
git init
git add .
git commit -m "Initial commit"

Step 3: Set Up Heroku

heroku login

This command will open a browser window, prompting you to log in.

Step 4: Create a Heroku App

Create a new Heroku app by running:

heroku create your-app-name

Replace your-app-name with a unique name for your app. If the name is available, Heroku will assign it to your app.

Step 5: Configure Buildpacks

Heroku needs to know how to build your React app. To do this, you need to set the buildpacks for your app. In the root of your project directory, create a file named Procfile (without any file extension) and add the following line:

web: npm start

This tells Heroku to run your app using npm start.

Next, add the following buildpacks to your Heroku app:

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git

These buildpacks are essential for running Node.js and serving static files.

Step 6: Configure Environment Variables

If your app relies on environment variables (e.g., API keys, database URLs), you’ll need to configure them on Heroku. Use the following command to set environment variables:

heroku config:set REACT_APP_API_KEY=your-api-key

Replace REACT_APP_API_KEY with the name of your environment variable and your-api-key with the actual value.

Step 7: Deploy to Heroku

Now, it’s time to deploy your React app to Heroku. Push your code to the Heroku remote:

git push heroku master

Heroku will build and deploy your app. Once the process is complete, you can open your app in the browser using:

heroku open

Congratulations! Your React app is now live on Heroku.

Step 8: View Logs (Optional)

You can view your app’s logs to troubleshoot any issues or monitor its performance. Use the following command to check the logs:

heroku logs --tail

This command will display the real-time logs of your app.

That’s it! You’ve successfully deployed your React app on Heroku. Now you can share it with others and enjoy the benefits of hosting your app in the cloud.

Don’t hesitate to reach out if you have any questions or require additional assistance. We’re happy to help!

Your React Journey Starts Here: The React Company’s Expertise

How to Deploy a React App on Heroku