DEV Community

Yash Sonawane
Yash Sonawane

Posted on

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

#tutorial #productivity #docker #devops

🎬 "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)