Deploying MERN Applications Using Docker Containers: A Detailed Guide

In today’s fast-paced software development environment, deploying applications quickly and efficiently is crucial. The MERN stack (MongoDB, Express.js, React, Node.js) is one of the most popular choices for building modern web applications. However, deploying a MERN application can become a complicated process if not managed well. Docker, a containerization platform, can simplify this process by allowing developers to package their applications with all the dependencies, ensuring consistent and easy deployments across environments.

In this blog post, we’ll walk you through the process of deploying a MERN application using Docker containers. Whether you are a beginner or an experienced developer, this guide will provide you with step-by-step instructions on how to package and deploy your MERN stack application.

---

What Is Docker?

Docker is a tool that enables developers to package applications and their dependencies into isolated containers. These containers can be easily moved between different environments (e.g., development, testing, production) without worrying about differences in software or hardware configurations. Docker containers ensure that the application runs the same way regardless of where it’s deployed, making it easier to manage and scale applications.

Why Use Docker for Deploying MERN Applications?

1. Portability: Docker containers can be deployed on any environment that supports Docker, whether it’s your local machine, a testing environment, or a cloud server.
2. Consistency: With Docker, you eliminate the “it works on my machine” problem. The app behaves the same way everywhere.
3. Isolation: Each component of your MERN stack (MongoDB, Express, React, Node.js) can run in its container, reducing conflicts and dependencies.
4. Scalability: Docker helps you easily scale your MERN app by running multiple containers and orchestrating them using tools like Docker Compose or Kubernetes.

Prerequisites

Before we dive into the steps, ensure you have the following:

• Basic understanding of the MERN stack.
• Docker and Docker Compose installed on your system. You can download them from Docker’s official website.
• A MERN application set up and ready for deployment.

If you’re unfamiliar with Docker, check out their Getting Started guide.

---

Step-by-Step Guide to Deploy a MERN Application Using Docker

Step 1: Create Your MERN Application

If you don’t already have a MERN app, you can create one by following these commands:

bash

 code

# Install express-generator globally

npm install -g express-generator

# Generate a new Express app

express my-mern-app

# Navigate to the app directorycd my-mern-app

# Install dependencies

npm install

# Add MongoDB, React, and any other necessary packages

Make sure you have a functional MERN application with the backend (Node.js + Express) and frontend (React) set up.

Step 2: Create Dockerfiles for Backend and Frontend

In a typical MERN app, you’ll have two main parts: the backend (Node.js + Express) and the frontend (React). To dockerize them, you’ll need to create Dockerfiles for both.

Dockerfile for the Backend (Node.js + Express)

1. Create a Dockerfile in the root of your backend folder (usually where server.js is located).

Dockerfile

 code

# Step 1: Use the official Node.js image

FROM node:16

# Step 2: Set the working directory

WORKDIR /usr/src/app

# Step 3:  package.json and package-lock.json

 package*.json ./

# Step 4: Install dependencies

RUN npm install

# Step 5:  the rest of the backend code

 . .

# Step 6: Expose the backend port (default is 5000)

EXPOSE 5000

# Step 7: Command to start the backend server

CMD ["npm", "start"]

Dockerfile for the Frontend (React)

1. Create a Dockerfile in the root of your frontend folder (where your React app resides).

Dockerfile

 code

# Step 1: Use the official Node.js image

FROM node:16

# Step 2: Set the working directory

WORKDIR /usr/src/app

# Step 3:  package.json and package-lock.json

 package*.json ./

# Step 4: Install dependencies

RUN npm install

# Step 5:  the rest of the frontend code

 . .

# Step 6: Build the React app

RUN npm run build

# Step 7: Install a static file server

RUN npm install -g serve

# Step 8: Expose the port

EXPOSE 3000

# Step 9: Command to run the frontend app

CMD ["serve", "-s", "build"]

Step 3: Create a Docker Compose File

Now, let’s use Docker Compose to orchestrate both containers (backend and frontend), along with MongoDB.

1. In the root of your project, create a docker-compose.yml file.

yaml

 code

version: ‘3.7’

services:

  backend:

    build:

      context: ./backend

    container_name: mern-backend

    ports:

      – “5000:5000”

    networks:

      – mern-network

    depends_on:

      – mongo

  frontend:

    build:

      context: ./frontend

    container_name: mern-frontend

    ports:

      – “3000:3000”

    networks:

      – mern-network

    depends_on:

      – backend

  mongo:

    image: mongo:latest

    container_name: mern-mongo

    ports:

      – “27017:27017”

    networks:

      – mern-network

    volumes:

      – mongo-data:/data/db

networks:

  mern-network:

    driver: bridge

volumes:

  mongo-data:

    driver: local

This file will:

• Define three services: backend, frontend, and mongo.
• Build the backend and frontend from their respective Dockerfiles.
• Set up MongoDB using the official Mongo image.
• Connect all services in a custom Docker network (mern-network).

Step 4: Build and Run the Containers

Now that we’ve set up the Dockerfiles and Docker Compose file, it’s time to build and run the containers.

1. Open your terminal and navigate to the root directory of your project.
2. Run the following command to build the Docker containers:

bash

 code

docker-compose build

1. Once the build completes, run the containers:

bash

 code

docker-compose up

This command will start all the services (backend, frontend, and MongoDB) as containers. The backend will be accessible on port 5000, and the frontend will be accessible on port 3000.

Step 5: Test Your Application

Once everything is up and running, open your browser and navigate to:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000
• MongoDB: If you want to check MongoDB, you can connect to it through a MongoDB client (e.g., MongoDB Compass) using the localhost:27017 address.

You should see your MERN app running smoothly with both frontend and backend communicating, and MongoDB storing your data.

Step 6: Deploying to Production (Optional)

When you’re ready to deploy your MERN app to production, Docker provides a consistent and easy way to deploy on cloud platforms like AWS, Google Cloud, or Azure. You can:

• Push your Docker images to Docker Hub.
• Use cloud services like AWS ECS (Elastic Container Service) or Google Kubernetes Engine (GKE) to manage the deployment.

---

Conclusion

In this guide, we’ve covered the basics of deploying a MERN application using Docker containers. Docker simplifies the process of packaging and deploying applications, making it easy to manage dependencies, ensure consistency across environments, and scale your app efficiently.

By using Docker, you not only streamline the deployment process but also make your MERN application more portable and easier to manage in different environments.

Next Steps:

• If you’re new to Docker, consider exploring Docker’s official documentation for more advanced concepts like multi-stage builds, CI/CD integration, and more.
• Try deploying your MERN app to a cloud platform to gain hands-on experience with real-world deployment.

Feel free to ask questions or share your experiences in the comments below!

---

Interactive Quiz:

To test your understanding, take this short quiz:

What does Docker allow you to do?

• a) Run applications without dependencies
• b) Package applications and their dependencies into containers
• c) Only run frontend applications
• d) None of the above

What is the purpose of Docker Compose in this setup?

• a) To build the backend Dockerfile
• b) To manage multiple containers
• c) To create a MongoDB database
• d) None of the above

What port is the backend of the MERN application accessible on?

• a) 27017
• b) 3000
• c) 5000
• d) 8080

Answer in the comments and discuss with other learners!

---

Final Thoughts:

Docker has become an essential tool for modern web development and deployment. By integrating Docker with your MERN applications, you ensure smooth, reliable deployments and an easier way to manage your development and production environments. Happy coding!

Additional learning resources:

• C LANGUAGE COMPLETE COURSE – IN HINDI – Link
• CYBER SECURITY TUTORIAL SERIES – Link
• CODING FACTS SERIES – Link
• SKILL DEVELOPMENT SERIES – Link
• PYTHON PROGRAMMING QUIZ – Link
• CODING INTERVIEW QUIZ – Link
• JAVA PROGRAMMING QUIZ – Link
• C PROGRAMMING QUIZ – Link