Full Stack in a Container: NodeJS, NextJS, and MongoDB with Docker

Published at

1/10/2025

Categories

1 categories in total

Full Stack in a Container: NodeJS, NextJS, and MongoDB with Docker

Recently, I had to create a NodeJS project for backend and a NextJS project for Frontend and connect MongoDB local database in NodeJS.
I tried to run everything locally but using Docker gave me the most optimal way of running everything together inside different containers.

I have run all the projects and DB inside different containers. The Frontend will run at 3000 port, Backend will run at 8000 port and DB will run at 27017 port of localhost.
The Project structure was something like this:

project/
│
├── docker-compose.yml     # Where all the containers are declared
│
├── backend/                  
│   ├── package.json           
│   ├── Dockerfile            
│   └── index.js            # Where server runs
│
│
├── frontend/                  
│   ├── package.json           
│   ├── Dockerfile            
│   └── layout.jsx           # Where home page runs
│

Now, we need to run the frontend and declare the Dockerfile for it. In order to run these setups in production as well, I've kept the build commands.
Frontend/Dockerfile looks like this:

# Use the official Node.js image as the base image
FROM node:20

# 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 . .

# Build the application
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "start"]

Similarly, the backend Dockerfile looks like this:

# Dockerfile

# Use the official Node.js image as a base image
FROM node:18

# Set the working directory inside the container
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 . .

# Build the application
RUN npm run build

# Expose the port that the app runs on
EXPOSE 8000

# Command to run the application
CMD ["npm", "start"]

Now, In order to connect these containers with DB container, we need to create a docker-network and keep all the containers under the same network.

The root project folder has the docker-compose.yml file which will define all the containers, DB volume and the docker network.

version: '3.8'

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    environment:
      - MONGODB_URI=mongodb://mongo:27017/db
      - PORT=8000
    depends_on:
      - mongo
    networks:
      - project-network

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NEXT_PUBLIC_WEBSOCKET_URL=http://localhost:8000
      - NEXT_PUBLIC_HTTP_URL=http://localhost:8000
    depends_on:
      - backend
    networks:
      - project-network

  mongo:
    image: mongo:latest
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db
    networks:
      - project-network

networks:
  project-network:
    driver: bridge

volumes:
  mongo-data:

This config file has 3 containers: frontend, backend & mongo. The backend container depends on mongo container, and the frontend container depends on the backend container. All 3 containers has connected into the project-network.

Now if we run docker-compose up -d in the root folder to run it in detached mode, in the Docker Desktop, we can see the logs for all containers.

To see the full project code, visit now: https://github.com/fahadfahim13/httpbin-monitor.git

dev-resources.site

Full Stack in a Container: NodeJS, NextJS, and MongoDB with Docker