Deploying a React app to Heroku is a straightforward process. Below is a step-by-step guide:
Prerequisites:
- Ensure you have Git installed.
- Ensure you have a Heroku account. If not, sign up here.
- Install the Heroku CLI.
Steps to Deploy:
Initialize a Git Repository (If it’s not already a Git repository)
git init
Commit Your Code:
If you haven’t committed your React app to git yet, you can do so with the following commands:
git add .
git commit -m "Initial commit"
Create a Heroku App:
heroku login
heroku create
Use a Static Server:
Since a React app consists of static files when built, you will need a server to serve these files. One popular option is the serve package.
Install serve:
npm install serve --save
Modify your scripts section in package.json:
"scripts": {
"start": "serve -s build",
"build": "react-scripts build",
"dev": "react-scripts start",
...
}
The above configuration will serve your build directory when you run npm start.
Set Up Node.js Server:
For Heroku to recognize the app as a Node.js app, you should have both package.json and a Procfile at the root of your project.
Create a Procfile (no file extension) in the root directory and add the following line:
web: npm start
Update .gitignore:
Ensure you’re not excluding the build directory in your .gitignore. Heroku needs this to serve your app.
Build Your App:
npm run build
Commit the Build:
git add .
git commit -m "Prepare for Heroku deployment"
Push to Heroku:
git push heroku master
Open Your App in the Browser:
Once the deployment process completes, you can view your app in the browser:
heroku open
That’s it! Your React app should now be live on Heroku. Remember that whenever you make changes to your React app, you’ll need to rebuild and push to Heroku again.
