Docker for Frontend Developers

Why Docker?

As a frontend developer, you might wonder why you need Docker. The answer is simple: consistency. Docker ensures your app runs the same way everywhere — on your machine, your colleague's machine, and in production.

Your First Dockerfile

Here's a minimal Dockerfile for a Next.js application:

FROM node:20-alpine AS base

FROM base AS deps
WORKDIR /app
COPY package.json bun.lock ./
RUN npm install --frozen-lockfile

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run 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"]

Multi-Stage Builds

The Dockerfile above uses multi-stage builds — each FROM statement starts a new stage. This keeps your final image small by only including what's needed to run the app.

Stage	Purpose	Included in Final
deps	Install node_modules	No
builder	Build the app	No
runner	Run the app	Yes

Docker Compose for Development

version: "3.8"
services:
  app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - DATABASE_URL=postgresql://user:pass@db:5432/mydb

  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: mydb
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Key Takeaways

• Docker eliminates "works on my machine" problems
• Multi-stage builds keep images lean
• Docker Compose simplifies multi-service setups
• Volume mounts enable live reloading in development

Start containerizing your projects today — your future self will thank you.