Dockerizing a MERN Stack Application using Docker Compose: A Step-by-Step Guide

Docker is a popular containerization technology that allows developers to package and deploy their applications with ease. Docker Compose is an additional tool that simplifies the process of defining and running multi-container Docker applications. In this blog post, we will walk through how to Dockerize a MERN stack application using Docker Compose.

MERN Stack Overview

Before we dive into Dockerizing our MERN stack application, let’s first understand what MERN stack is. MERN is an acronym for MongoDB, Express, React, and Node.js, which are four open-source technologies used to build web applications. MongoDB is a NoSQL database used to store data, Express is a web application framework for Node.js, React is a front-end library used to create user interfaces, and Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Dockerizing a MERN Stack Application

Dockerizing a MERN stack application involves creating a Docker image for each component of the stack and defining how these components will communicate with each other using Docker Compose.

Backend/Server

1. Create Dockerfile for the Node.js Server. We will start by creating a Dockerfile for the Node.js server. The Node.js server is the backend of our application that runs on the server and communicates with the database. The directory should look like this.

2. We will use the node:alpine image as our base image and copy the server files into the container.

# Base image
FROM node:alpine

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json files
COPY package*.json ./

# Install dependencies
RUN npm install 

# Copy the rest of the application files
COPY . .

# Port on which the backend server runs
EXPOSE 5000 

# Serve the application
CMD ["npm", "start"]

Note: If you have nodemon installed then running the server command is “npm start”. And if you haven’t installed nodemon, then running the server command is “node index/server.js”

3. This Dockerfile installs node:alpine , sets the working directory to /app, copies the package.json and package-lock.json files, runs npm install, copies the entire application code, exposes port 5000, and finally runs the npm start command.

Frontend/Client

1. Create Dockerfile for the React Client Next, we will create a Dockerfile for the React client. The React client is the front-end of our application that runs in the user’s browser. The directory should look like this.

2. We will again use the node:alpine image as our base image and copy the client files into the container.

# Base image
FROM node:alpine

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json files
COPY package*.json ./

# Install dependencies
RUN npm install --force

# Copy the rest of the application files
COPY . .

# Port on which the frontend server runs
EXPOSE 3000  

# Serve the application
CMD ["npm", "start"]

Note: In my case it was “npm install — force”. Usually it is only “npm install”

3. This Dockerfile installs node:alpine , sets the working directory to /app, copies the package.json and package-lock.json files, runs npm install, copies the entire application code, exposes port 3000, and finally runs the npm start command.

Docker Compose

Make sure you have Docker Desktop installed and the version of docker compose is v2. After that, follow these steps

1. Define Docker Compose Configuration in the main working directory.

We will now define the Docker Compose configuration file that will bring together our Backend and Frontend containers. We will name the configuration file docker-compose.yaml. Add the following code to this file:

version: '3.8'

services:
  mongodb:
    image: "mongo"
    volumes: 
      - data:/data/db
  backend:
    build: ./backend
    ports: 
      - "5000:5000"
    volumes:
      - logs:/app/logs
      - ./backend:/app
      - /app/node_modules
    depends_on:
      - mongodb
  
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend/src:/app/src
    stdin_open: true
    tty: true
    depends_on:
      - backend

volumes:
  data:
  logs:

This configuration file defines two services: backend and frontend. The backend service uses the Dockerfile in the ./backend directory to build the Node.js server image and maps port 5000 in the container to port 5000 on the host. The frontend service uses the Dockerfile in the ./frontend directory to build the React client image and maps port 3000 in the container to port 3000 on the host.

Commands for Docker Compose

Follow these steps in order to fully Dockerize the multi container applications.

1. Build the multi container application using: docker-compose build

2. Run the multi container application using: docker-compose up

Congratulations! You have fully Dockerized your MERN Stack Application!

You can run your application on localhost:3000 to view. Backend server is running on port 5000.

Conclusion

In conclusion, Docker Compose is a powerful tool for managing MERN stack applications, providing developers with a unified and efficient way to deploy and run their code across multiple environments. By using Docker Compose, developers can easily manage the dependencies of their application and many other things. With its ease of use and flexibility, Docker Compose has become a go-to solution for many developers looking to streamline their workflow and optimize their application deployment process.