Docker for Frontend Developers: A Gentle Introduction

Why Frontend Devs Should Care About Docker

"It works on my machine" is the oldest joke in software development. Docker solves it — and as frontend applications grow more complex, containerization becomes essential.

Your First Dockerfile

For a Next.js application:

FROM base AS deps WORKDIR /app COPY package.json pnpm-lock.yaml ./ RUN corepack enable pnpm && pnpm install --frozen-lockfile

FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN pnpm build

FROM base AS runner WORKDIR /app ENV NODE_ENV=production COPY --from=builder /app/.next/standalone ./ COPY --from=builder /app/.next/static ./.next/static COPY --from=builder /app/public ./public EXPOSE 3000 CMD ["node", "server.js"] ```

Docker Compose for Full-Stack Dev

Spin up your entire stack with one command:

services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app

db: image: postgres:16-alpine environment: POSTGRES_DB: myapp ```

Common Pitfalls

1. Don't copy node_modules — always install inside the container
2. Use .dockerignore — exclude .next, node_modules, .git
3. Pin your base image — use specific versions, not latest