Building a MERN stack application is only the beginning. Once your React frontend, Node.js/Express backend, and MongoDB database are ready, the next important step is putting the application online so real users can access it.
Deploying a MERN application may seem complicated at first, especially when you are working with environment variables, databases, production builds, servers, and domains. However, once you understand how each part connects, the process becomes much easier.
What Is MERN Stack Deployment?
MERN stands for MongoDB, Express.js, React, and Node.js. A typical MERN application has three main parts:
React – Frontend or user interface
Node.js + Express.js – Backend and APIs
MongoDB – Database
During deployment, these parts can be hosted together or separately depending on the project requirements.
For example:
User
↓
Domain
↓
Frontend (React)
↓
Backend API (Node.js + Express)
↓
MongoDB
Step 1: Prepare Your Application
Before deploying, make sure your application works correctly on your local machine.
For the React frontend, create a production build:
npm run build
For the Node.js backend, make sure your production start command is configured correctly, for example:
npm start
Also check that your API URLs, database connection, CORS configuration, and environment variables are ready for production.
Step 2: Set Up MongoDB
Your production backend needs access to a production database.
MongoDB Atlas is a common choice because it provides a cloud-hosted MongoDB database. After creating your database, you will receive a MongoDB connection string.
For example:
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/mydb
Do not write your database username and password directly inside your source code.
Instead, keep them in environment variables.
Step 3: Configure Environment Variables
Environment variables are very important during deployment.
For example, your backend may have:
PORT=5000
MONGO_URI=your_mongodb_connection
JWT_SECRET=your_secret_key
Your React application may also require an API URL:
VITE_API_URL=https://api.example.com
The exact environment-variable format depends on your React setup. Never commit passwords, secret keys, or database credentials to GitHub.
Step 4: Deploy the Backend
Your Node.js and Express application needs to run on a server or cloud platform.
After deploying the backend, you will have an API URL similar to:
Your React application should use this production URL instead of:
For example:
fetch(`${import.meta.env.VITE_API_URL}/api/users`);
Step 5: Deploy the React Frontend
After creating the production build, deploy the generated frontend files to your hosting platform.
The important point is that the frontend must communicate with the deployed backend rather than your local Node.js server.
For example:
React Frontend
↓
Node.js API
↓
MongoDB
Cloud Database
Step 6: Configure CORS
When your frontend and backend are hosted on different domains, CORS configuration becomes important.
For example:
const corsOptions = {
origin: "https://example.com"
};
app.use(cors(corsOptions));
During development, you may use:
But in production, replace it with your actual frontend domain.
Step 7: Connect a Custom Domain
Once your application is working, you can connect a custom domain.
For example:
You can also use a separate subdomain for your API:
api.example.com
This gives your application a clean structure:
www.example.com → React
api.example.com → Node.js / Express
MongoDB Atlas → Database
Step 8: Use HTTPS
Your production application should use HTTPS rather than plain HTTP.
HTTPS encrypts communication between the user's browser and your application and is especially important when your application handles login information, cookies, authentication tokens, or other sensitive data.
Step 9: Test the Production Application
After deployment, don't assume everything works just because the deployment was successful.
Test important features such as:
* User registration
* Login and logout
* API requests
* Database operations
* Image/file uploads
* Authentication
* Protected routes
* Error handling
* CORS
* Frontend navigation
You can also test your APIs using tools such as Postman or automated API testing tools.
Common Deployment Problems
1. API works locally but not in production
Check whether your frontend is still calling:
Instead, it should call your production API URL.
2. MongoDB connection fails
Check:
* MongoDB connection string
* Database username and password
* Network access rules
* Environment variables
3. CORS error
Make sure the backend allows requests from your actual frontend domain.
4. Environment variables are undefined
Check whether the variables are configured in the production hosting environment and whether your frontend framework requires a specific variable prefix.
5. Application crashes after deployment
Check the server logs first. Common causes include missing dependencies, incorrect environment variables, incorrect start commands, or database connection problems.
Final MERN Deployment Structure
A production MERN application can look like this:
Users
↓
Custom Domain
↓
┌───────────────┐
│ React Frontend │
└───────┬───────┘
↓
┌───────────────┐
│ Node + Express │
│ REST APIs │
└───────┬───────┘
↓
┌───────────────┐
│ MongoDB │
└───────────────┘
Author:
Sagar Kshirsagar
Related Links:
Resume Tips For Software Developers
Do visit our channel to know more: SevenMentor
Sagar Kshirsagar
Expert trainer and consultant at SevenMentor with years of industry experience. Passionate about sharing knowledge and empowering the next generation of tech leaders.