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
Log in to your Heroku account using the Heroku CLI:
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