How To Deploy MERN App on Netlify
Deploying a MERN (MongoDB, Express.js, React, Node.js) application
can be a challenging task for many developers, especially when it comes
to choosing the right hosting environment. Netlify has emerged as
one of the most popular platforms for hosting front-end applications
because of its ease of use, automated deployments, and integration with
Git providers like GitHub, GitLab, and Bitbucket.
However, deploying a MERN Stack Development (which involves both backend and
frontend) to Netlify requires a few adjustments. This in-depth guide
will walk you step-by-step through the process of deploying your MERN
stack app on Netlify successfully.
๐ง Understanding the MERN Stack
Before diving into deployment, it's important to understand what makes
up the MERN stack:
- MongoDB -- A NoSQL database used to store data in a flexible
JSON-like format. - Express.js -- A lightweight Node.js framework for handling
backend routes and middleware. - React -- A powerful front-end JavaScript library for building
user interfaces. - Node.js -- A JavaScript runtime environment for running the
backend server.
In a typical MERN setup: - The frontend (React) runs on one server
(usually port 3000 during development). - The backend
(Express/Node.js) runs on another server (usually port 5000 or similar).
For production, these must be combined efficiently so that the frontend
communicates properly with the backend.
๐ Why Deploy on Netlify?
Netlify provides a fast, modern, and automated approach to deploying web
applications. Some key advantages include:
- Continuous deployment via GitHub or GitLab.
- Built-in CI/CD (Continuous Integration/Deployment).
- Free SSL certificates and CDN support.
- Serverless functions for handling backend logic.
- Instant rollbacks and deployment previews.
However, since Netlify is optimized for front-end hosting (like React,
Vue, or Next.js), hosting a full backend (Node/Express server) on
Netlify directly is not possible. Instead, we use Netlify
Functions or external backend hosting (like Render, Railway, or
MongoDB Atlas).
โ๏ธ Prerequisites
Before deployment, make sure you have the following ready:
- A working MERN project (frontend and backend separated).
- GitHub account -- to host your repositories.
- Netlify account -- for deployment.
- MongoDB Atlas account -- for your database.
- Environment variables -- securely stored for production.
๐งฉ Step 1: Prepare Your MERN App for Deployment
Start by organizing your folders properly.
Your folder structure might look like this:
mern-app/
โ
โโโ backend/
โ โโโ server.js
โ โโโ package.json
โ โโโ routes/
โ โโโ models/
โ
โโโ frontend/
โโโ src/
โโโ public/
โโโ package.json
โโโ build/
The backend handles API requests and connects to MongoDB Atlas,
while the frontend is your React app that consumes the API.
Combine the Projects
For deployment, both frontend and backend should exist in one
repository.
- Keep both folders (
frontendandbackend) in the same directory. - In the backend's
server.js, make sure your Express app serves the
frontend's build folder when in production:
import path from "path";
import express from "express";
const app = express();
if (process.env.NODE_ENV === "production") {
const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, "/frontend/build")));
app.get("*", (req, res) =>
res.sendFile(path.resolve(__dirname, "frontend", "build", "index.html"))
);
}
๐งฎ Step 2: Deploy Backend Separately
Since Netlify doesn't natively host Node.js servers, we'll deploy the
backend using a service like Render, Railway, or Vercel.
Option 1: Deploy Backend on Render
Render makes it easy to host Node.js apps with automatic deployment from
GitHub.
- Push your
backendfolder to GitHub as a separate repository. - Go to Render.
- Click New > Web Service.
- Connect your GitHub repo.
- Set:
- Start Command:
node server.js - Environment Variables: Add MongoDB URI, PORT, etc.
- Start Command:
- Click Deploy.
Once deployed, Render gives you a public API URL (e.g.,https://mern-backend.onrender.com). You'll use this in your frontend.
๐งฑ Step 3: Update Frontend API Endpoints
In your frontend (React) code, replace all local API endpoints like:
axios.get("http://localhost:5000/api/users");
with your new deployed backend URL:
axios.get("https://mern-backend.onrender.com/api/users");
You can use environment variables in React for flexibility:
REACT_APP_API_URL=https://mern-backend.onrender.com
and reference it as:
axios.get(`${process.env.REACT_APP_API_URL}/api/users`);
๐ Step 4: Build the Frontend for Production
Navigate to your frontend directory and run:
npm run build
This generates a build/ folder optimized for production. You'll deploy
this folder on Netlify.
๐๏ธ Step 5: Deploy the Frontend on Netlify
Option 1: Connect GitHub Repository
- Push your full project (both frontend and backend folders) to
GitHub. - Go to Netlify.
- Click Add new site โ Import from Git.
- Connect your GitHub account and select your repository.
- In the build settings:
- Base directory:
frontend - Build command:
npm run build - Publish directory:
frontend/build
- Base directory:
- Add environment variables under Site Settings โ Build & deploy โ
Environment.
Netlify will automatically build and deploy your React frontend.
Option 2: Manual Deployment (Drop Folder)
If you prefer manual upload:
- Go to your frontend folder and run
npm run build. - Go to Netlify dashboard โ Sites โ Add new site โ Deploy
manually. - Drag and drop your
build/folder. - Netlify will host your frontend instantly.
โ๏ธ Step 6: Connect Frontend and Backend
Ensure your frontend's API calls are pointing to your deployed backend
URL.
You can test this by opening your deployed Netlify site and checking if
data loads correctly from your backend.
If you encounter CORS errors, make sure to enable CORS in your Express
backend:
import cors from "cors";
app.use(cors());
You can also restrict origins in production:
app.use(cors({
origin: "https://yourfrontend.netlify.app",
}));
๐งพ Step 7: Manage Environment Variables Securely
Never hardcode sensitive data like API keys or MongoDB URIs.
Instead, store them as environment variables:
In Netlify:
- Go to your site's Settings โ Build & deploy โ Environment.
- Add variables like:
REACT_APP_API_URLNODE_ENV
In Render (Backend):
- Go to your Render project.
- Add variables under Environment โ Add Environment Variable.
๐งฐ Step 8: Test Everything
After deployment:
- Test the frontend site (Netlify link).
- Test backend endpoints using Postman or browser.
- Verify database connections (MongoDB Atlas).
- Confirm no CORS or mixed content errors occur.
If issues arise, check Netlify or Render logs.
๐งโ๐ป Common Deployment Issues
1. CORS Errors
Ensure you're using the correct backend URL and CORS is properly
configured.
2. Wrong Build Path
Make sure your publish directory is set to frontend/build in
Netlify.
3. Environment Variables Missing
Confirm that all environment variables exist both in Netlify and backend
host.
4. API Not Responding
Double-check backend deployment or restart the server on Render.
๐ก Pro Tip: Use Netlify Functions for Backend Logic
If your backend is lightweight (e.g., authentication, simple APIs), you
can use Netlify Functions instead of deploying Node.js separately.
You can place serverless functions in a netlify/functions folder and
call them directly from your frontend.
Example:
exports.handler = async function(event, context) {
return {
statusCode: 200,
body: JSON.stringify({ message: "Hello from Netlify Function!" }),
};
};
This works great for small applications or prototypes.
๐ข Hire Professionals to Deploy Your MERN Stack
If you want professional help setting up, developing, or deploying your
MERN stack applications efficiently, hire AAMAX
--- a full-service digital marketing and web development company. AAMAX
offers expert MERN Stack Development, Web Development, SEO,
and Digital Marketing services to help your business thrive online.
Their experienced developers can handle every stage --- from building
scalable MERN apps to deploying them seamlessly on modern platforms like
Netlify, Render, or AWS.
โ Conclusion
Deploying a MERN application on Netlify might seem complicated at first,
but by separating your backend and frontend properly, using tools like
Render for APIs, and Netlify for hosting the React frontend, you
can achieve a robust, production-ready deployment.
Whether you're a solo developer or managing a team, following these
structured steps ensures a smooth and professional deployment process
for your MERN stack applications.
Want to publish a guest post on aamax.co?
Place an order for a guest post or link insertion today.
Place an Order