In this blog, we going to explore a amazing technology called docker. we will get to know what docker is? what is role in MERN application how we can deploy our MERN application on docker hub and with help of docker-compose we can run or application on just writing a single command sound interesting, so lets explore….

Before dive into docker. let first understand what is MERN stack and how we can0 connect to frontend , backend and mongo DB. so here are my Github repo you can see application code there in that i have mern folder where i have frontend and backend code , then i have docker-compose file for running container.

lets start..

What is MERN stack?

Introduction

The MERN Stack is a popular JavaScript technology stack used to build full-stack web applications. It consists of four key technologies:

• MongoDB – NoSQL database for storing application data.

• Express.js – Web framework for building backend APIs.

• React.js – Frontend library for creating user interfaces.

• Node.js – JavaScript runtime for running the backend server

Components of MERN Stack

• MongoDB (Database Layer)

  MongoDB is a NoSQL database that stores data in a JSON-like format (BSON – Binary JSON). It is widely used because of its scalability, flexibility, and ability to handle large amounts of data efficiently.

If you go inside my backend folder. you will see another folder knowns as “db“ there is a connection.js in that i used port 27017 for accessing the database from backend.

• Express.js(backend)

  Express.js is a lightweight, fast, and flexible web framework for Node.js. It simplifies server-side logic, routing, and API handling.REST API friendly – Helps create APIs easily using GET, POST, PUT, DELETE

In backend folder there you see server.js folder there is express which used port 5050 for backend, so backend listen on port 5050.

• React.js(frontend)

React.js is a popular JavaScript library for building user interfaces. It is developed by Facebook and follows a component-based architecture. frontend used port 5173 to listen a request.

What is docker and docker-compose?

Docker

Docker is a containerization platform that packages applications and their dependencies into lightweight, portable containers. It ensures that applications run consistently across different environments (development, testing, and production).

Key Features of Docker:

• Isolation: Each container runs independently with its own dependencies.

• Lightweight: Containers share the host OS, making them more efficient than virtual machines.

• Portability: Runs on any system with Docker installed.

• Fast Deployment: Containers start and stop quickly.

So basically, first i create a network call “mern“ because in that container can easily communicate with each other without any external things i used bridge method for the network, after that i make docker file for frontend and backend. You can check in my repo, go in frontend folder there you see dockerfile which contaIN node as a base image and there i expose port 5173 and i install npm there.

Same like backend there also i used node as base image and i also install npm to execute the files , expose port 5050 for request you can see in dockerfile of backend

So as you see i make a frontend and backend dockerfile but i dont make for mongodb because it not necessary but i create a mongodb contanier using a mern network from that all container is connected and can easily communicate through this network. Then simply i build image from dockerfies and push the image of both frontend and backend on dockerhub using “docker push“ command.

Then i simply used “docker run” for creating the container in that i used network command. but managing dockerfile in production level is very hard, because you need deal with multi-problems at same time and you can’t always stop every container manually and start them this take efforts. Also there were so many problem with dockerfiles, problem are:

• Manual Multi-Container Management: You need to manually start multiple containers using separate docker run commands.

• Complex Networking Setup: Each container must be manually linked using --network flags for communication.

• Dependency Handling Issues: Containers may start in the wrong order, causing failures (e.g., backend starts before MongoDB is ready)

• Hard to Scale: Running multiple instances of a container requires manual setup and scripting.

Docker Compose

Docker Compose is a tool used to define, manage, and run multi-container Docker applications using a simple YAML configuration file (docker-compose.yml). Instead of manually running multiple docker run commands, Compose allows you to start all containers with a single command.

• Multi-Container Management – Easily manage multiple dependent containers (e.g., frontend, backend, database).

• Simplified Configuration – Define all services in a YAML file (docker-compose.yml).

• Automatic Networking – Connects containers internally without extra setup.

• Environment Variables Support – Manage environment variables easily.

• Dependency Management – Ensures that services start in the correct order (depends_on).

• Scaling – Run multiple instances of a container using docker-compose up --scale.

• Portability – The same docker-compose.yml file works across different environments.

So that’s why using docker file is hectic. I simply shifted towards Docker-compose which make work and command very limited, You can check my Docker-compose file in folder also i show down.

As you can see my docker-compose lets dive into that, first i declare frontend of my MERN application

Frontend in docker-compose there I used build which basically build frontend container in that i used ports 5173 and mern as network

backend in docker-compose there i also used build command for creating container and i showed the path where there the dockerfile exist and expose port for backend services 5050 and used mern as network

but in backend is used depends_on which indicate that you need to run mongo before the backend otherwise its have issues so docker daemon will activate mongo before backend

Mongo in docker-compose here i used direct image of mongo which ever be latest image (but i need to specify which version for better understanding of dependency) then i expose the port 27017 for mongo and i used mern as network so all my 3 container are in same network

Volumes i declare volumes in mongo part - mongo-data:/data/db it collect the data from mongo server then i declare volumes separately there i tell which type of volumes its is and which driver it used

And i declare networks in that i give name as mern and driver as bridge

after completing my docker-compose file then i simply used docker-compose command

docker-compose -d --build up

After successfully creating all 3 docker container we can check the Application is up or not.

I used AWS instance, so access that application i need Public ip of that instance so my public IP is 13.60.157.116 then i used that IP with frontend port to access the application on web browser I searched 13.60.157.116:5173 and i see the application.

This is how you can easily access your application using docker-compose.

CONCLUSION:

By containerizing your MERN stack application, you achieve better scalability, portability, and faster deployments. Whether you're a developer looking to streamline your workflow or an engineer aiming for efficient deployments, Docker and Docker Compose are essential tools for modern web applications.

Thank you for checking my my blog

Connect with me on LINKEDIN.