🛳️ Docker Series: Episode 9 — Docker Compose in the Real World: Volumes, Networks & Frontend

This content originally appeared on DEV Community and was authored by Yash Sonawane

“You’ve learned Docker Compose basics. Now let’s level up and build a real full-stack app with persistent data, clean networking, and a frontend that connects to your backend and database — all with one command.”

The Full Stack Setup

We’re building a ToDo App with:

• Frontend: React
• Backend: Node.js + Express
• Database: MongoDB
• Volumes: For MongoDB persistence
• Networks: For clean container communication

Folder Structure

todo-app/
├── docker-compose.yml
├── backend/
│   ├── Dockerfile
│   └── index.js
├── frontend/
│   ├── Dockerfile
│   └── (React app)

docker-compose.yml

version: '3.8'

services:
  mongo:
    image: mongo
    container_name: mongo
    volumes:
      - mongo-data:/data/db
    networks:
      - app-net

  backend:
    build: ./backend
    container_name: backend
    ports:
      - "5000:5000"
    depends_on:
      - mongo
    environment:
      - MONGO_URL=mongodb://mongo:27017/todos
    networks:
      - app-net

  frontend:
    build: ./frontend
    container_name: frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend
    networks:
      - app-net

volumes:
  mongo-data:

networks:
  app-net:

backend/Dockerfile

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 5000
CMD ["node", "index.js"]

frontend/Dockerfile

FROM node:18
WORKDIR /app
COPY . .
RUN npm install && npm run build
EXPOSE 3000
CMD ["npm", "start"]

Run the Entire Stack

docker-compose up -d --build

Visit:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

Why This Setup Rocks

• Persistent DB: MongoDB data survives container restarts
• Isolated Network: Clean communication without port clashes
• One Command Deploy: Everything runs with a single up

Pro Dev Tips

• Use .env for secrets
• Use docker-compose.override.yml for local dev tweaks
• Use depends_on for simple service order (but consider healthchecks too)

Up Next: Dockerize Your Own App From Scratch

In Episode 10, we’ll:

• Take any app YOU choose
• Write the Dockerfile + Compose
• Walk through dockerizing it step-by-step

Let’s Build Together

Want to dockerize your own stack?
Share your tech stack in the comments and I’ll help you write the perfect Compose setup.

If this helped you deploy your first real app stack, give it a like, leave a comment, or share with your teammates.

Next: “Dockerize Your Own Project — Step-by-Step Help for Your Tech Stack”

This content originally appeared on DEV Community and was authored by Yash Sonawane