Rakib Hasan

Posted on Nov 12

Dockerize MERN Application

#docker #react #express #mongodb

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-docker directory.
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:5173 to 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: click here
Dockerizing an Express App with MongoDB Database: click here

Happy Coding !!!

DEV Community

Dockerize MERN Application

Step 1: Folder Structure

Step 2: Dockerizing the Frontend (React Vite Application)

Step 3: Dockerizing the Backend (Express and MongoDB)

Step 4: Composing frontend and backend together.

Step 5: Running the Dockerized Applications

Top comments (0)

Read next

Construyendo un Portfolio Moderno con Astro y Tailwind CSS

Static text reinvented: a developer’s solution to updates without a CMS

Building a Custom Scheduler Using React and Supabase

Why Svelte?