Docker for Frontend Developers: Containerize Your React App in 15 Minutes

Why Docker?

"It works on my machine" is a phrase that Docker eliminates. As a frontend developer, Docker helps you:

• Ensure consistent environments across teams
• Simplify onboarding for new developers
• Match development and production environments

Your First Dockerfile

# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Production stage
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Docker Compose for Full-Stack Dev

version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend/src:/app/src

  api:
    build: ./api
    ports:
      - "8080:8080"
    environment:
      - DATABASE_URL=postgres://user:pass@db:5432/app

  db:
    image: postgres:15
    environment:
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: app

Key Takeaways

1. Multi-stage builds keep images small
2. Docker Compose simplifies multi-service development
3. Volume mounts enable hot reloading in containers
4. Match your dev environment to production