Docker Compose for Local Frontend + API + DB — Sample Repo

Stop "It Works on My Machine" Forever
Spinning up a full-stack app locally usually means:

npm install in 3 terminals

A local database needing manual setup

Environment variables getting lost

Docker Compose fixes all of that. One command, three services, zero local dependencies.

The Stack (Simple & Realistic)
Frontend: React/Vite (port 3000)

API: Node.js/Express (port 5000)

Database: PostgreSQL (port 5432)

The Project Structure
text
my-app/
├── frontend/
│ ├── Dockerfile
│ └── (React app)
├── backend/
│ ├── Dockerfile
│ └── (Express app)
└── docker-compose.yml

1. The Compose File (docker-compose.yml) yaml version: '3.8'

services:
db:
image: postgres:15
environment:
POSTGRES_USER: devuser
POSTGRES_PASSWORD: devpass
POSTGRES_DB: appdb
ports:
- "5432:5432"
volumes:
- pgdata:/var/lib/postgresql/data

backend:
build: ./backend
ports:
- "5000:5000"
environment:
DATABASE_URL: postgresql://devuser:devpass@db:5432/appdb
depends_on:
- db
volumes:
- ./backend:/app
- /app/node_modules

frontend:
build: ./frontend
ports:
- "3000:3000"
environment:
VITE_API_URL: http://localhost:5000
depends_on:
- backend
volumes:
- ./frontend:/app
- /app/node_modules

volumes:
pgdata:

1. Frontend Dockerfile (frontend/Dockerfile) dockerfile FROM node:18 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "run", "dev"]
2. Backend Dockerfile (backend/Dockerfile) dockerfile FROM node:18 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 5000 CMD ["npm", "run", "dev"] Note: Using npm run dev with --watch or nodemon enables hot reloading thanks to the volume mounts.

Running Everything
bash
docker-compose up --build
That's it. Your entire stack is running:

Frontend → http://localhost:3000

API → http://localhost:5000

PostgreSQL → localhost:5432

Why This Rocks for Local Dev
✅ Zero local installs — No Node, no Postgres on your host
✅ Perfect isolation — Different Node versions? No problem
✅ Instant onboarding — New teammate runs one command
✅ Hot reload — Code changes rebuild instantly (volume mounts)
✅ Clean teardown — docker-compose down -v nukes everything

The Sample Repo
👉 github.com/yourusername/fullstack-docker-compose

(Clone it, run docker-compose up, and you're live in 30 seconds)

Next Steps
Add a .env file for secrets

Use profiles for dev vs prod

Throw in Redis or Nginx if needed

Stop wrestling with local setup. Ship code instead.

Have you tried Docker Compose for full-stack dev? Drop your tips below. 🐳