TheLazy.Dev
Portfolio GitHub

Blog

docker |react |express |mongodb

Dockerize MERN Application

rakibtweets

Rakib Hasan

Posted on November 12, 2024

Dockerize MERN Application

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)
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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:
Enter fullscreen mode Exit fullscreen mode

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:
Enter fullscreen mode Exit fullscreen mode

Step 5: Running the Dockerized Applications

Now that the Docker configuration is ready, let’s start the services.

  1. Open a terminal in the mern-docker directory.
  2. Run the following command to start both the frontend and backend services: 
docker-compose -f docker-compose.yml up --build
Enter fullscreen mode Exit fullscreen mode

or run this command

docker-compose -f frontend/docker-compose.yml -f backend/docker-compose.yml up --build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

  1. Dockerize vite-react application: click here

  2. Dockerizing an Express App with MongoDB Database: click here

Happy Coding !!!

💖 💪 🙅 🚩
rakibtweets
Rakib Hasan

Posted on November 12, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Dockerize MERN Application
docker Dockerize MERN Application

November 12, 2024