DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Software Design and Architecture
  3. Cloud Architecture
  4. Dockerizing a MERN Stack Web Application

Dockerizing a MERN Stack Web Application

Learn how to dockerize an entire MERN Stack application.

Avik Kundu user avatar by
Avik Kundu
·
Dec. 09, 22 · Tutorial
Like (1)
Save
Tweet
Share
3.88K Views

Join the DZone community and get the full member experience.

Join For Free

The MERN stack is becoming increasingly popular and could be a powerful stack to figure in. Therefore having the ability to build and deploy good MERN applications, greatly helps career prospects as a developer.

What Is the MERN Stack?

The MERN stack is a JavaScript stack that is designed to make the development process smoother. MERN includes four open-source components: MongoDB, Express, React, and Node.js. These components offer an associate end-to-end framework for developers to work in.

A Closer Look at MERN Stack Components

MongoDB: A Cross-Platform Document Database

MongoDB is a NoSQL (non-relational) document-oriented database. Data is stored in flexible documents with a JSON (JavaScript Object Notation)-based query language. MongoDB is known for being flexible and easy to scale.

Express: A Back-End Web Application Framework

Express is a web application framework for Node.js, another MERN component. Instead of writing full web server code by hand on Node.js directly, developers use Express to simplify the task of writing server code.

React: A JavaScript Library for Building User Interfaces

React was originally created by a software engineer at Facebook, and was later open-sourced. The React library can be used for creating views rendered in HTML. In a way, it’s the defining feature of the stack.

Node.JS: A Cross-Platform JavaScript Runtime Environment

Node.js is constructed on Chrome’s V8 JavaScript engine. It’s designed to build scalable network applications and can execute JavaScript code outside of a browser. 

Before we understand the utility of Docker, let’s first learn about Containers.


What Is a Container?

“A container is the standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another. ”

A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings. Container images become containers at runtime and in the case of Docker containers — images become containers when they run on Docker Engine.

Docker Hub

Docker Hub is a cloud-based registry service for storing and sharing Docker images. It allows users to create, manage, and distribute Docker images and containers, as well as collaborate and integrate with other tools and platforms. Docker Hub provides a central repository for sharing and distributing Docker images and containers, as well as a platform for collaboration and integration with other tools and services. It enables users to quickly and easily find and pull the images they need to run their applications, and to share their own images with others.


Getting Started With the Integration

Our main focus in this tutorial is understanding how to integrate Docker with a MERN Stack Application. For explaining this, let’s try to dockerize an E-Commerce Web Application.

You can download the basic E-Commerce Web App from this Github Link.

Overview

We are going to Dockerize Node.JS, React, and MongoDB into separate containers. Then we are going to use Docker Compose to run the multi-container application.

At last, from a single command, we can create and start all the services from our configuration.

Initializing the Project

Clone the GitHub repository to a local folder on your computer. Open the folder using VSCode or any text editor of your choice.

Docker Files

Now, we need to create a Dockerfile for the server and the client. The Dockerfile essentially contains the build instructions to build the image.

Let’s start by creating the Dockerfile for the client (our React Frontend).

  1. In the client folder, create a file called Dockerfile without any extension.
  2. Write the following lines of code in the file:
YAML
 
# Dockerfile for React client

# Build react client
FROM node:10.16-alpine

# Working directory be app
WORKDIR /usr/src/app

COPY package*.json ./

###  Installing dependencies

RUN npm install --silent

# copy local files to app folder
COPY . .

EXPOSE 3000

CMD ["npm","start"]


We can simply build our Frontend with this command

Shell
 
docker build -t react-app .


To verify everything is fine, we run our newly built container using the command:

Shell
 
docker run -p 3000:3000 react-app .


This will run just the Frontend.

In the same way, we create a file called Dockerfile for the Backend Node.JS Server.

  1. Now, we create a Dockerfile for the server directory.
  2. Write the following lines of code in the file:
YAML
 
#  Dockerfile for Node Express Backend

FROM node:10.16-alpine

# Create App Directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install Dependencies
COPY package*.json ./

RUN npm install --silent

# Copy app source code
COPY . .

# Exports
EXPOSE 5000

CMD ["npm","start"]


We can simply build our Backend with this command:

Shell
 
docker build -t node-app .

Docker Compose

“Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration.”

To run our entire application together, i.e run all containers parallelly, we need to configure the docker-compose file.

  1. In the main directory of the project, (outside the server/client) create a file named docker-compose.yml .
  2. Write these contents into the file.
YAML
 
version: '3.7'

services:
  server:
    build:
      context: ./server
      dockerfile: Dockerfile
    image: myapp-server
    container_name: myapp-node-server
    command: /usr/src/app/node_modules/.bin/nodemon server.js
    volumes:
      - ./server/:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - "5000:5000"
    depends_on:
      - mongo
    env_file: ./server/.env
    environment:
      - NODE_ENV=development
    networks:
      - app-network
  mongo:
    image: mongo
    volumes:
      - data-volume:/data/db
    ports:
      - "27017:27017"
    networks:
      - app-network
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    image: myapp-client
    container_name: myapp-react-client
    command: npm start
    volumes:
      - ./client/:/usr/app
      - /usr/app/node_modules
    depends_on:
      - server
    ports:
      - "3000:3000"
    networks:
      - app-network

networks:
    app-network:
        driver: bridge

volumes:
    data-volume:
    node_modules:
    web-root:
      driver: local


Creating the Build

To create the build for the entire application, we need to run the following command:

Shell
 
docker-compose build

Starting the Services

We can start the multi-container system using the following simple command: 

YAML
 
docker-compose up


At last, we can open http://localhost:3000 to see our React Frontend.

The backend server is live on http://localhost:5000

And MongoDB is running on http://localhost:27017


Maintenance and Inspection

We can inspect running services using the command:

Shell
 
docker-compose ps


For dumping the logs of all the running services, use the following command:

Shell
 
docker-compose logs

Stopping the Containers

To stop all the services, we use :

Shell
 
docker-compose stop


To bring everything down, removing the containers entirely, with the data volume of the services:

Shell
 
docker-compose down --volumes


Finally, we have successfully dockerized our E-Commerce Web application.

Web application application MERN (stack) Node.js Web container

Published at DZone with permission of Avik Kundu. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Fargate vs. Lambda: The Battle of the Future
  • The 5 Books You Absolutely Must Read as an Engineering Manager
  • REST vs. Messaging for Microservices
  • Building a Real-Time App With Spring Boot, Cassandra, Pulsar, React, and Hilla

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: