In this blog, I’ll guide you through setting up a Docker environment for a MERN application. This setup will include a React (Vite) frontend, an Express backend, and MongoDB, all configured in a Dockerized environment. Let’s walk through each step in simple terms.
Step 1: Folder Structure
Here's how our project folder, named mern-docker, is organized:
mern-docker/
├── frontend/
│ ├── Dockerfile
│ └── docker-compose.yml
├── backend/
│ ├── Dockerfile
│ └── docker-compose.yml
└── docker-compose.yml (Main configuration file for Docker)
This structure helps separate the frontend and backend applications, allowing each to have its Docker configuration.
Step 2: Dockerizing the Frontend (React Vite Application)
The frontend folder contains a React app created with Vite. Let’s add a Dockerfileto this folder to prepare it for Docker.
2.1 Dockerfile for Frontend
In the frontend folder, create a file named Dockerfile and add the following code:
# Use an official node image as the base image
FROM node:18-alpine
# Set the working directory
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code
COPY . .
# Expose the port the app runs on
EXPOSE 5173
# Command to run the application
CMD ["npm", "run", "dev"]
2.2 Docker-Compose Service for Frontend
Also In the frontend folder, create a file named docker-compose.yml and add the following code:, define the service for our React frontend:
version: '3.8'
services:
react-vite-app:
image: react-vite-app
build:
context: .
dockerfile: Dockerfile
ports:
- '5173:5173'
container_name: react-vite-container
stdin_open: true
environment:
- CHOKIDAR_USEPOLLING=true
volumes:
- .:/app
- /app/node_modules
Step 3: Dockerizing the Backend (Express and MongoDB)
The backend folder holds the server code using Express and MongoDB. Let’s set it up in Docker.
3.1 Dockerfile for Backend
In the backend folder, create a Dockerfile:
# Use the official Node.js image as the base image
FROM node:18-alpine
# Set the working directory
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code
COPY . .
# Expose the port the app runs on
EXPOSE 5000
# Command to run the application
CMD ["npm", "run", "dev"]
3.2 Docker-Compose Service for Backend and MongoDB
Also In the backendfolder, create a file named docker-compose.yml and add the following code. add the backend and MongoDB services:
version: '3.8'
services:
# MongoDB service
mongo:
image: mongo:latest
container_name: mongo-container
ports:
- '27017:27017'
volumes:
- mongotestData:/data/db
networks:
- app-network
environment:
- MONGO_INITDB_ROOT_USERNAME=root
- MONGO_INITDB_ROOT_PASSWORD=secret
# Backend service
backend:
build:
context: ./backend
dockerfile: Dockerfile
image: mern-backend-image
container_name: mern-backend-container
ports:
- '5000:5000'
depends_on:
- mongo
env_file:
- ./backend/config/config.env
stdin_open: true
volumes:
- ./backend:/app
- /app/node_modules
networks:
- app-network
# Define volumes for persistent data storage
volumes:
mongotestData:
# Define networks
networks:
app-network:
Step 4: Composing frontend and backend together.
In mern-docker folder, create a file named (main compose file) docker-compose.yml and add the following code.
version: '3.8'
services:
frontend:
extends:
file: ./frontend/docker-compose.yml
service: react-vite-app
backend:
extends:
file: ./backend/docker-compose.yml
service: backend
mongo:
extends:
file: ./backend/docker-compose.yml
service: mongo
volumes:
mongotestData:
networks:
app-network:
Step 5: Running the Dockerized Applications
Now that the Docker configuration is ready, let’s start the services.
- Open a terminal in the
mern-dockerdirectory. - Run the following command to start both the frontend and backend services:
docker-compose -f docker-compose.yml up --build
or run this command
docker-compose -f frontend/docker-compose.yml -f backend/docker-compose.yml up --build
This command will combine the configurations in frontend/docker-compose.yml and backend/docker-compose.yml and launch the services. This approach is quick and doesn’t require a new parent docker-compose.yml file.
After running the command Docker will start downloading necessary images, building services, and launching containers. Once completed:
- Visit
http://localhost:5173to see the React frontend. - Your backend API will be available on
http://localhost:5000. - MongoDB will be running and accessible within the network.
To Stop the containers run this command
docker-compose down
Note: If you find problem dockerizing react-vite application or backend express-mongo application you can check my these blog the come back to this blog.
Dockerize vite-react application:
Happy Coding !!!
SOCIAL SHARE CARD GENERATOR