DEV Community

Yash Sonawane
Yash Sonawane

Posted on

๐Ÿ›ณ๏ธ Docker Series: Episode 9 โ€” Docker Compose in the Real World: Volumes, Networks & Frontend

๐ŸŽฌ "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)
Enter fullscreen mode Exit fullscreen mode

๐Ÿงพ 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:
Enter fullscreen mode Exit fullscreen mode

๐Ÿ› ๏ธ backend/Dockerfile

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

๐Ÿ› ๏ธ frontend/Dockerfile

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

๐Ÿš€ Run the Entire Stack

docker-compose up -d --build
Enter fullscreen mode Exit fullscreen mode

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โ€

Top comments (0)