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

[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”

Continue reading...

 

Join 𝕋𝕄𝕋 on Telegram
Channel PREVIEW: