10/30/25, 10:14 PM OneNote
Full Stack Application with Docker Compose
Friday, August 29, 2025 3:33 PM
GOAL --> To run FULL stack application on Docker with docker compose
Why Docker compose?
Docker compose allows us to define and run multiple containers.
It reduces complexity of running containers separately
Clone any MERN app or any full stack application of your choice
Folder structure
1. Client (React App)
2. Server (Node app)
Inside the client folder
Create following files
Dockerfile
.dockerignore (this file will contain list of files and folders that should be ignored
while copy files from system to container)
Dockerfile for client
FROM node:latest (get the latest base image of node)
WORKDIR /app/client (Create a workspace for client inside the
app folder)
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000 (Exposing the port number)
CMD ["npm", "run", "dev"] (Start up command)
.dockerignore for client
node_modules
.dockerignore
Dockerfile
These are the files and folders, we don't want in the react-app
image
Inside the Server folder
Create following files
[Link] 1/4
10/30/25, 10:14 PM OneNote
Dockerfile
.dockerignore (this file will contain list of files and folders that should be ignored
while copy files from system to container)
Dockerfile for Server
FROM node:latest
WORKDIR /app/server (Create a workspace for server inside the
app folder)
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5100
CMD ["npm", "start"]
.dockerignore for server
node_modules
.dockerignore
Dockerfile
These are the files and folders, we don't want in the node-app
image
We can dockerize the application separately. And connect them but managing them becomes a tedious
job.
Therefore we will be using docker compose
This allows you run and manage the containers from a single file ([Link])
Come the root folder where both client and server folder are present
Inside this folder create a [Link] file
services:
This section defines the different applications (containers) that will run together. Each service is an
isolated component of your application, like the frontend, backend, or database.
react-app Service
• react-app: This is the name of the service, which is used for service discovery within the Docker
network.
• Build: This tells Docker Compose to build a custom image for this service.
• context: ./client: This specifies the directory (./client) where Docker should look for the Dockerfile
to build the image.
• ports: - '5100:5100': This maps port 5100 of the host machine to port 5100 of the react-app
container. This makes the frontend accessible at [Link]
• depends_on: - node-app: This ensures that the node-app service is started before the react-app
service.
• volumes: - ./client:/app/client: This line creates a bind mount, synchronizing the ./client directory
on the host machine with the /app/client directory inside the container. Any changes you make to
the source code on your local machine will instantly be reflected inside the container.
[Link] 2/4
10/30/25, 10:14 PM OneNote
node-app Service
• node-app:: This is the name for the backend service.
• build: ./server: This instructs Docker to build the image from the Dockerfile located in the ./server
directory.
• ports: - '3000:3000': This maps the host's port 3000 to the container's port 3000.
• env_file: - ./server/[Link]: This specifies that the container should load environment variables
from the [Link] file in the server directory.
• depends_on: - mongo: This ensures that the mongo service is started before the node-app
service.
• volumes: - ./server:/app/server: This synchronizes the backend source code on the host machine
with the container's /app/server directory.
Mongo service
• mongo: This is the name for the MongoDB database service.
• image: mongo: This specifies that Docker Compose should pull the official mongo image from
Docker Hub.
• container_name: mongo: This sets a custom name for the container, making it easy to reference.
• ports: - '27017:27017': This maps the container's MongoDB port to the host's port, allowing you to
connect to the database from a database client on your local machine.
• volumes: - mongo-data:/data/db: This uses a named volume (mongo-data) to persist the
MongoDB database files. This prevents data from being lost if the container is removed.
volumes:
This section defines data volumes that are used to store persistent data. This is important for databases,
as it ensures that the data is not lost when the container is stopped or removed.
Entire docker-compose file
[Link] 3/4
10/30/25, 10:14 PM OneNote
Make sure you make following changes according to the application
The URL mongodb://<name-of-the-mongo-db-container>:27017/users is the connection string for the
backend [Link] application to connect to the MongoDB database.
Url of the Api (called from react app)
http:<name-of-node-container>:3000
Make sure you change (localhost --> <name-of-the-container> (that the app is dependent on)
This repository is for your reference only; do not submit it as your practical.
[Link]
[Link] 4/4