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.
You can skip all this with the power of AI now - check out Deltoid.
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 <optional-name-of-your-app>
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.
Check out Dopebase Tutorials for more tech articles.
Top comments (0)