Dockerizing a MERN Stack App
Dockerizing your MERN application allows you to:
Package MongoDB, Express, React, Node.js into containers
Ensure consistent environments
Deploy easily to servers, cloud platforms, and Kubernetes
Scale efficiently
This guide covers:
✔ Folder structure
✔ Dockerfiles (frontend + backend)
✔ Docker Compose setup
✔ Production build
✔ Environment variables
✔ Running services locally and in production
📁 1. Folder Structure for a Dockerized MERN App
A typical MERN layout:
root/
│── client/ # React app
│ └── package.json
│── server/ # Node.js + Express API
│ └── package.json
│── docker-compose.yml
└── README.md
We will create two Dockerfiles:
One for the backend
One for the frontend
🔧 2. Dockerfile for the Backend (server/Dockerfile)
# ---- Base Node Image ----
FROM node:18-alpine
# ---- Working Directory ----
WORKDIR /app
# ---- Copy and Install Dependencies ----
COPY package*.json ./
RUN npm install
# ---- Copy Source Code ----
COPY . .
# ---- Expose Port ----
EXPOSE 5000
# ---- Run App ----
CMD ["npm", "start"]
Make sure your backend package.json has:
"scripts": {
"start": "node index.js"
}
🎨 3. Dockerfile for the Frontend (client/Dockerfile)
Production-grade build:
# ---- Step 1: Build React App ----
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# ---- Step 2: Run NGINX to Serve Static Files ----
FROM nginx:1.23-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]
React build output is served using NGINX, which provides excellent performance.
🧱 4. Adding Docker Compose
Now we define multiple services:
client (React served by NGINX)
server (Express/Node.js API)
mongo (MongoDB container)
Create docker-compose.yml in the project root:
version: "3.9"
services:
client:
build:
context: ./client
ports:
- "3000:3000"
depends_on:
- server
networks:
- mern
server:
build:
context: ./server
ports:
- "5000:5000"
environment:
- MONGO_URI=mongodb://mongo:27017/mern
depends_on:
- mongo
networks:
- mern
mongo:
image: mongo:6.0
restart: always
ports:
- "27017:27017"
volumes:
- mongo-data:/data/db
networks:
- mern
networks:
mern:
volumes:
mongo-data:
🌐 5. Connecting Backend to MongoDB (inside Docker)
Use the service name as the host:
mongoose.connect("mongodb://mongo:27017/mern");
NOT localhost.
Docker Compose handles internal DNS.
🔒 6. Environment Variables
Put secrets into .env files:
backend .env:
MONGO_URI=mongodb://mongo:27017/mern
JWT_SECRET=supersecret
Update Docker Compose:
server:
env_file:
- ./server/.env
Never put secrets inside Dockerfiles.
🚀 7. Running the MERN App with Docker
Start everything:
docker-compose up --build
Services are now available at:
React frontend → http://localhost:3000
Node backend → http://localhost:5000
MongoDB → localhost:27017
Run detached mode:
docker-compose up -d
Stop:
docker-compose down
📦 8. Production Deployment Options
Once Dockerized, you can deploy the full MERN stack to:
✔ A. VPS (DigitalOcean, AWS EC2, Linode, GCP VM)
Just copy your repo and use:
docker-compose up -d --build
✔ B. Cloud Run (Google Cloud)
Build images and deploy separately:
client → Cloud Run or Cloud Storage
server → Cloud Run
Use MongoDB Atlas (best for production)
✔ C. AWS ECS (Fargate)
Push images to ECR and create tasks/services.
✔ D. Kubernetes (GKE, AKS, EKS)
Use:
Deployment
Service
Ingress
PersistentVolumes for MongoDB
✔ E. Render / Railway / Fly.io
Deploy backend and frontend as separate images.
🛠️ 9. Optional: Combine React + Express in Same Docker Container
If you serve the React build from Express:
Only one Dockerfile
Server serves /client/build
Let me know if you want this version.
🏁 10. Summary
Dockerizing a MERN app requires:
Frontend
Multi-stage build (Node → NGINX)
Backend
Node container with Express
Database
MongoDB container with a volume
Orchestration
Docker Compose for local development
Cloud registry + container runtime for production
You now have a fully containerized MERN application that is:
✔ Portable
✔ Reproducible
✔ Scalable
✔ Cloud-ready
Learn MERN Stack Training in Hyderabad
Read More
Using GitHub Actions to Deploy MERN Apps
Avoiding Injection Attacks in MongoDB
Visit Our Quality Thought Training Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments