Deploying a MERN Stack Project Using Docker and Docker Compose

Deploying a full-stack web application can be complex, but with Docker, you can streamline the process and ensure consistency across different environments. In this blog, we'll walk through the steps to containerize and deploy a MERN stack application using Docker and Docker Compose. The MERN stack comprises MongoDB, Express, React, and Node.js.

Introduction

In this guide, we will:

1. Containerize the frontend (React) and backend (Node.js)

2. Set up MongoDB as a containerized service

3. Use Docker Compose to orchestrate these containers

By the end of this tutorial, you'll have a solid understanding of deploying a MERN stack application using Docker.

Prerequisites

• Basic understanding of Docker and Docker Compose

• Docker and Docker Compose installed on your machine

• A MERN stack project ready to be containerized

Step 1: Setting Up the Project Structure

Ensure your project directory is structured as follows:

scssCopy codemern-app/
├── backend/
│   ├── Dockerfile
│   └── (Node.js backend files)
├── frontend/
│   ├── Dockerfile
│   └── (React frontend files)
├── docker-compose.yml
└── README.md

Step 2: Writing Dockerfiles

Backend (Node.js)

Create a Dockerfile in the backend directory:

# ------------------- Stage 1 ------------------------------
FROM node:22 AS backend-builder

# setup the working dir
WORKDIR /app

# code
COPY . .


# package install
RUN npm i

# Test
RUN npm run test

# ------------------- Stage2 ------------------------------
FROM node:22-slim

#setup the working dir
WORKDIR /app

# copy the above stage as compressed
COPY --from=backend-builder /app .

COPY .env.sample .env

#port
EXPOSE 5000

CMD ["npm", "start"]

Frontend (React)

Create a Dockerfile in the frontend directory:

# ------------------- Stage 1: Build Stage ------------------------------
FROM node:22 AS frontend-builder

# Set the working directory to /app
WORKDIR /app

# Copy the package.json and package-lock.json for dependency installation
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# ------------------- Stage 2: Final Stage ------------------------------
FROM node:22-slim

# Set the working directory to /app
WORKDIR /app

# Copy built assets and dependencies from frontend-builder stage
COPY --from=frontend-builder /app .

# Copy the .env.sample file to .env.local
COPY .env.docker .env.local

# Expose port 5173 for the Node.js application
EXPOSE 5173

# Define the default command to run the application in development mode
CMD ["npm", "run", "dev", "--", "--host"]

Step 3: Creating Docker Compose File

Create a docker-compose.yml file in the root directory:

version: "3.8"
services:
  mongodb:
    container_name: mongo
    image: mongo:latest
    volumes:
      - ./backend/data:/data
    ports:
      - "27017:27017"

  backend:
    container_name: backend
    build: ./backend
    env_file:
      - ./backend/.env.docker
    ports:
      - "5000:5000"
    depends_on:
      - mongodb

  frontend:
    container_name: frontend
    build: ./frontend
    env_file:
      - ./frontend/.env.docker
    ports:
      - "5173:5173"

  redis:
    container_name: redis
    restart: unless-stopped
    image: redis:7.0.5-alpine 
    expose:
        - 6379
    depends_on:
      - mongodb

volumes:
  data:
    build: ./frontend
    env_file:
      - ./backend/.env.sample
    ports:
      - "5173:5173"

volumes:
  data:

Step 4: Running the Containers

With the Dockerfiles and docker-compose.yml in place, you can now build and run your containers.

1. Build the containers:

    docker-compose build
   

2. Run the containers:

    docker-compose up
   

3. Access the application:

   • Frontend: http://3.138.102.123:5153/

   • Backend: http://3.138.102.123:5000/

Conclusion

By containerizing your MERN stack application with Docker and orchestrating the containers using Docker Compose, you can simplify the deployment process and ensure consistent environments. This approach not only enhances your development workflow but also makes it easier to manage dependencies and scale your application.

Deploying a MERN stack project using Docker enables you to leverage containerization benefits such as isolation, portability, and scalability, ensuring your application runs smoothly across different environments.

Connect and Follow Me on Socials

LINKDIN | GITHUB |TWITTER