If you’re looking to get your MERN app up and running on Heroku, here’s the human way to do it. First, ensure your project structure is on point with separated client and server folders. Build your React app for the real world, configure Express to serve those static files, and connect to MongoDB Atlas. Next, you’ll want to get the Heroku CLI, dive into Git, and commit your work. Add a Procfile to tell Heroku how to run your app, set those environment variables for your database, and create your Heroku app. Then, it’s just a matter of pushing your code to Heroku. Once it’s live, use Heroku’s tools to watch logs, add SSL, or scale your app when needed. This way, deployment becomes less of a chore, letting you focus on what really matters – your application.
In this blog post, we will walk you through how to deploy your MERN application to Heroku using the latest tools and techniques, so you can get your project up and running quickly.
The MERN stack — consisting of MongoDB, Express.js, React.js, and Node.js — has become one of the most popular combinations for building modern web applications. If you have already developed a MERN application locally and are looking to deploy it to production, Heroku offers a straightforward platform for deployment. It handles the server setup, scaling, and monitoring, letting developers focus on building great applications.
But before we begin, you must have the following:
- A Heroku account (if you don’t have one, create it at Heroku).
- Heroku CLI is installed on your local machine. Download and install it from here.
- Git installed. You can download it from here.
Node.js and npm installed. Check your versions with node -v, and npm -v.
Are you looking for the Best MERN Stack Certification course in Noida? Then, join Ducat and learn 100% practical skills through a live project-based training course.
1. Prepare Your MERN Application for Deployment
Before deploying, ensure that your MERN stack application is structured correctly. A typical MERN project has two main parts:
- Client-side (React)
- Server-side (Node.js + Express)
Your folder structure might look something like this:
bash
CopyEdit
/my-mern-app
/client # React front-end
/server # Node + Express back-end
package.json
Procfile
.gitignore
Setting up the React app for production
You need to build your React app to serve it in production. When deploying to Heroku, you’ll want to use create-react-app (or your own React app) and build it into a static bundle that the Node.js/Express server can serve.
In the client/package.json, ensure that the build command is available:
json
CopyEdit
{
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“eject”: “react-scripts eject”
}
}
When in production, you’ll need to modify the server.js (or app.js) in the backend /server folder to serve the React static files.
Here’s how you can modify the backend:
javascript
CopyEdit
const path = require(‘path’);
// Serve static files from React app
if (process.env.NODE_ENV === ‘production’) {
app.use(express.static(path.join(__dirname, ‘client/build’)));
app.get(‘*’, (req, res) => {
res.sendFile(path.resolve(__dirname, ‘client’, ‘build’, ‘index.html’));
});
}
This ensures that React’s static assets are served correctly in production.
If you are looking for the Best MERN Stack Training Course, join Ducat with the best Industrial experts and understand the scope and MAERN Stack course fees in 2025.
Set MongoDB URI
You’ll need to use MongoDB Atlas (or any cloud MongoDB provider) instead of a local MongoDB instance because Heroku doesn’t support local databases. Get your MongoDB URI from Atlas, and make sure your server.js (Node.js) file references this URI like so:
javascript
CopyEdit
const mongoose = require(‘mongoose’);
mongoose.connect(process.env.MONGODB_URI || ‘your-mongo-uri’, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
You’ll set the MONGODB_URI environment variable on Heroku during deployment.
2. Set Up Heroku for Deployment
Now that your app is production-ready follow these steps to deploy it to Heroku.
Install Heroku CLI
If you haven’t already, install the Heroku CLI so you can interact with Heroku from the terminal.
After installation, log in to your Heroku account:
bash
CopyEdit
heroku login
Initialize Git and Commit Code
Make sure Git tracks your project and that you have committed all your changes.
bash
CopyEdit
git init
git add .
git commit -m “Initial commit”
Create a Procfile
Heroku uses a Procfile to know how to run your application. Create a Procfile in the root of your project with the following content:
bash
CopyEdit
web: node server/server.js
This tells Heroku to run the server.js file to start your Node.js server.
Configure Environment Variables
You must set the MongoDB connection string on Heroku using an environment variable.
bash
CopyEdit
heroku config:set MONGODB_URI= “your-mongo-uri”
You can also configure other environment variables as needed.
Create a Heroku App
Now, create a new Heroku application. This will automatically link your Git repository to Heroku:
bash
CopyEdit
heroku create my-mern-app
This command also creates a random subdomain for your app, which you can customize later.
3. Deploy the Application to Heroku
Add Git Remote for Heroku
Heroku automatically adds a remote named Heroku to your Git configuration. If it doesn’t, add it manually:
bash
CopyEdit
git remote add Heroku https://git.heroku.com/my-mern-app.git
Push to Heroku
Push your code to Heroku using Git:
bash
CopyEdit
git push heroku master
Heroku will detect the Node.js environment, install your dependencies (from client/package.json and server/package.json), and deploy your app.
Build and Serve React App
Heroku will automatically build your React app when deploying. If it’s not working as expected, try rebuilding manually:
bash
CopyEdit
heroku run npm run build –app my-mern-app
Open Your Application
Once the deployment is complete, you can open your app in the browser with:
bash
CopyEdit
heroku open
4. Troubleshooting
If something goes wrong or you want to monitor your app, check the Heroku logs:
bash
CopyEdit
heroku logs –tail
This will show real-time logs and help you identify any issues.
Common Errors:
- Failed to connect to MongoDB: Ensure your MongoDB URI is correct and that the MongoDB Atlas IP allowlist allows connections from Heroku.
- React app not loading: Double-check your React build setup and ensure your Express server is configured to serve static files correctly.
- Additional Considerations
Adding SSL with Heroku SSL
For production environments, you should use HTTPS. Heroku provides free SSL certificates for all custom domains. For detailed setup, you can refer to Heroku SSL.
Continuous Deployment with GitHub
You can set up continuous deployment directly from GitHub to Heroku, which will automatically redeploy your app every time you push to a specific branch. Set this up on the Heroku dashboard under the Deploy tab.
Scaling Your Application
If you need to scale your app (e.g., add more web dynos or workers), you can do so via:
bash
CopyEdit
heroku ps:scale web=1
This adjusts the number of web dynos your app is running.
Join Ducat for MERN stack training for beginners and professionals. Grab the opportunity to learn under the guidance of a professional expert and MERN Stack course with placement.
We have multiple branches in Delhi NCR.
- Ducat Noida
- Ducat Delhi Pitampura
- Ducat Vikaspuri
- Ducat Gurgaon
- Ducat Ghaziabad
- Ducat South Extension
- Ducat Faridabad
Conclusion
Deploying your MERN stack application to Heroku is a quick and easy way to make your app live. Following the steps above, your app can be up and running in a few minutes. With Heroku’s managed services, you can focus on building the app while leaving the heavy lifting of server management to them.
FAQs
Q1. Why Choose Ducat for MERN Stack Training?
Ducat offers the Best MERN Stack training, with experienced MERN Stack professional trainers who can help learners learn MERN Stack by making it lightweight to the corporate requirements that will help students prepare for the objective. Ducats, the top institute for MERN Stack Training, provides students with MERN Stack through live-based project training. It is one of the most recognized MERN Stack Training Institute, providing 100% practical knowledge and full-time job assistance with basic and advanced training courses in the topmost MNCs.
Q2. What career opportunities are available after completing the course?
After learning MERN Stack, you can apply for roles like MERN Stack Developer, Full-Stack Developer, Frontend Developer (React.js), Backend Developer (Node.js & Express.js) and Software Engineer.
Q3. Is the MERN Stack better than the MEAN Stack?
Both are great, but:
- MERN uses React.js, which is highly flexible and has a strong community.
- MEAN uses Angular, which is better for enterprise-level applications.
Q4. What are the job prospects and salary expectations?
MERN Stack Developers can earn:
- Entry-level (0-1 year): 3-6 LPA
- Mid-level (2-4 years): 6-12 LPA
- Senior-level (5+ years): 12-25 LPA (or more, depending on expertise)