๐ฌ "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โ
Top comments (0)