Setting Up NGINX for a MERN App (Production Guide)
📌 What You'll Build
A production setup where:
Client Browser
↓
NGINX
┌─────────────┐
| React App | → Served as static files
└─────────────┘
↓ ↑
Reverse Proxy to Node.js API
↓
Express Server (running on port e.g., 5000)
↓
MongoDB (local or remote Atlas)
1. Prepare the MERN App for Production
Frontend: React
Build production files:
cd client
npm run build
This creates a build/ folder with optimized static files.
Backend: Node + Express
Start your Node server on a local port, e.g., 5000 with:
pm2
systemd
forever
Example PM2:
pm2 start server.js --name backend
pm2 save
Your backend is now accessible internally at:
http://localhost:5000
2. Install NGINX
On Ubuntu or Debian:
sudo apt update
sudo apt install nginx -y
Start & enable:
sudo systemctl enable nginx
sudo systemctl start nginx
3. Configure NGINX for MERN
We will create a server block that:
Serves React static files
Proxies API requests to Node backend
Handles routing for React (SPA behavior)
Can support HTTPS
Open or create a config file:
sudo nano /etc/nginx/sites-available/mern-app
Paste this configuration:
🛠️ Recommended NGINX Configuration for MERN
server {
listen 80;
server_name yourdomain.com;
# Serve React build folder
root /var/www/mern/client/build;
index index.html;
# Route /api/* → Node.js backend
location /api/ {
proxy_pass http://localhost:5000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
# Support React Router (fallback to index.html)
location / {
try_files $uri /index.html;
}
}
Replace:
/var/www/mern/client/build
yourdomain.com
With your actual values.
4. Enable the Configuration
Link to sites-enabled:
sudo ln -s /etc/nginx/sites-available/mern-app /etc/nginx/sites-enabled/
Remove the default config:
sudo rm /etc/nginx/sites-enabled/default
Check syntax:
sudo nginx -t
Reload NGINX:
sudo systemctl reload nginx
5. Serve the React Build Files
Copy your React build to /var/www:
sudo mkdir -p /var/www/mern/client
sudo cp -r client/build /var/www/mern/client/
6. Install SSL (HTTPS) with Certbot
If you have a domain:
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com
Certbot will:
Obtain free Let’s Encrypt certificate
Automatically update your NGINX config
7. Keep Node Running with PM2
Install PM2:
sudo npm install -g pm2
Start your backend:
pm2 start server.js --name mern-backend
pm2 startup
pm2 save
8. Directory Structure Example
/var/www/mern/
client/
build/
index.html
static/
backend/
server.js
node_modules/
package.json
9. Example MERN API Request in React
To avoid CORS issues, use relative paths:
fetch("/api/users")
.then(res => res.json())
.then(data => console.log(data));
NGINX will proxy /api/ → http://localhost:5000/api/.
10. Common Troubleshooting
❌ React app shows blank page
Fix: Ensure SPA routing fallback:
location / {
try_files $uri /index.html;
}
❌ API not working
Check backend reachable locally:
curl http://localhost:5000/api/test
❌ 502 Bad Gateway
Make sure your backend is running:
pm2 status
❌ Wrong build path
Ensure build is in:
root /var/www/mern/client/build;
🎉 Summary
NGINX handles:
Serving static React files
Reverse proxy to Node backend
SPA routing
SSL termination
Node/Express handles:
API logic
Connecting to MongoDB
Business logic
This is the standard production setup for MERN apps.
Learn MERN Stack Training in Hyderabad
Read More
Continuous Deployment with Vercel & Heroku
Using GitHub Actions to Deploy MERN Apps
Visit Our Quality Thought Training Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments