Docker for Frontend Developers: Practical Guide

# Basic Docker workflow
docker build -t my-app .        # Build an image from Dockerfile
docker run -p 3000:3000 my-app  # Run container, map port 3000
docker ps                       # List running containers
docker stop <container-id>      # Stop a container

# Dockerfile - Instructions to build your image
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

# .dockerignore - Files to exclude from build context
node_modules
.git
.env.local
README.md
Dockerfile
.dockerignore

# Dockerfile
# Multi-stage build for optimized production image
FROM node:18-alpine AS builder
 
# Set working directory
WORKDIR /app
 
# Copy package files for dependency installation
COPY package*.json ./
 
# Install dependencies (use npm ci for production builds)
RUN npm ci --only=production
 
# Copy source code
COPY . .
 
# Build the application
RUN npm run build
 
# Production stage - serve with nginx
FROM nginx:stable-alpine AS production
 
# Copy built files from builder stage
COPY --from=builder /app/build /usr/share/nginx/html
 
# Copy custom nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf
 
# Expose port 80
EXPOSE 80
 
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

# nginx.conf
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;
 
    # Handle React Router
    location / {
        try_files $uri $uri/ /index.html;
    }
 
    # Enable gzip compression
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
 
    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

# Build the Docker image
docker build -t react-app .
 
# Run in development mode with volume mounting
docker run -it --rm \
  -p 3000:3000 \
  -v $(pwd):/app \
  -v /app/node_modules \
  react-app npm start
 
# Run production version
docker run -p 80:80 react-app

# Dockerfile for Next.js
FROM node:18-alpine AS base
 
# Install dependencies only when needed
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
 
# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi
 
# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
 
# Set environment variables for build
ENV NEXT_TELEMETRY_DISABLED 1
ENV NODE_ENV production
 
# Build the application
RUN npm run build
 
# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app
 
ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1
 
# Create nextjs user
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
 
# Copy necessary files
COPY --from=builder /app/public ./public
 
# Set correct permissions for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next
 
# Copy built application
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
USER nextjs
 
EXPOSE 3000
 
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"
 
# Start the application
CMD ["node", "server.js"]

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable standalone output for Docker
  output: 'standalone',
  
  // Optimize images for containers
  images: {
    unoptimized: process.env.NODE_ENV === 'production',
  },
  
  // Configure experimental features
  experimental: {
    // Enable if using App Router
    appDir: true,
  },
}
 
module.exports = nextConfig

# Dockerfile for Vue.js
FROM node:18-alpine AS build-stage
 
# Set working directory
WORKDIR /app
 
# Copy package files
COPY package*.json ./
 
# Install dependencies
RUN npm ci
 
# Copy source code
COPY . .
 
# Build for production
RUN npm run build
 
# Production stage
FROM nginx:stable-alpine AS production-stage
 
# Copy built files
COPY --from=build-stage /app/dist /usr/share/nginx/html
 
# Copy custom nginx config for Vue Router
COPY nginx-vue.conf /etc/nginx/conf.d/default.conf
 
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# nginx-vue.conf
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;
 
    # Handle Vue Router history mode
    location / {
        try_files $uri $uri/ /index.html;
    }
 
    # API proxy (adjust as needed)
    location /api {
        proxy_pass http://backend:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
 
    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

# Dockerfile.dev
FROM node:18-alpine
 
WORKDIR /app
 
# Copy package files
COPY package*.json ./
 
# Install all dependencies (including devDependencies)
RUN npm install
 
# Copy source code
COPY . .
 
# Expose development port
EXPOSE 3000
 
# Start development server with hot reload
CMD ["npm", "run", "dev"]

# docker-compose.dev.yml
version: '3.8'
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true  # Enable hot reload in containers
    stdin_open: true
    tty: true

# Dockerfile.prod
FROM node:18-alpine AS builder
 
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
 
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.prod.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# docker-compose.prod.yml
version: '3.8'
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - "80:80"
    environment:
      - NODE_ENV=production
    restart: unless-stopped

# docker-compose.yml
version: '3.8'
 
services:
  # Frontend application
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      - REACT_APP_API_URL=http://localhost:4000
    depends_on:
      - backend
      - database
    networks:
      - app-network
 
  # Backend API
  backend:
    build:
      context: ./backend
    ports:
      - "4000:4000"
    environment:
      - NODE_ENV=development
      - DATABASE_URL=postgresql://user:pass@database:5432/myapp
    depends_on:
      - database
    networks:
      - app-network
 
  # Database
  database:
    image: postgres:15-alpine
    environment:
      - POSTGRES_DB=myapp
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=pass
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app-network
 
  # Redis for caching
  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"
    networks:
      - app-network
 
volumes:
  postgres_data:
 
networks:
  app-network:
    driver: bridge

# Start all services
docker-compose up -d
 
# View logs
docker-compose logs -f frontend
 
# Stop all services
docker-compose down
 
# Rebuild and restart a service
docker-compose up -d --build frontend

# Optimized Dockerfile with proper layer caching
FROM node:18-alpine AS base
 
WORKDIR /app
 
# Copy only package files first (changes less frequently)
COPY package*.json ./
 
# Install dependencies (this layer gets cached)
RUN npm ci --only=production
 
# Copy source code (changes more frequently)
COPY . .
 
# Build application
RUN npm run build

# Advanced multi-stage build with cache mounts
FROM node:18-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN --mount=type=cache,target=/root/.npm \
    npm ci --only=production
 
FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN --mount=type=cache,target=/root/.npm \
    npm run build
 
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html

# Size-optimized Dockerfile
FROM node:18-alpine AS builder
 
# Use Alpine for smaller base image
WORKDIR /app
 
# Copy only necessary files
COPY package*.json ./
RUN npm ci --only=production && npm cache clean --force
 
COPY . .
RUN npm run build
 
# Multi-stage build - final image only contains built assets
FROM nginx:stable-alpine
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app/build /usr/share/nginx/html
 
# Remove unnecessary packages
RUN apk del --purge \
    && rm -rf /var/cache/apk/* \
    && rm -rf /tmp/*
 
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Compare image sizes
docker images | grep my-app
 
# Analyze layers
docker history my-app:latest

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
 
FROM nginx:stable-alpine
 
# Create non-root user
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
 
# Set proper permissions
COPY --from=builder --chown=nextjs:nodejs /app/build /usr/share/nginx/html
 
# Switch to non-root user
USER nextjs
 
EXPOSE 3000

# docker-compose.yml - Use env files for secrets
version: '3.8'
services:
  frontend:
    build: .
    env_file:
      - .env.local  # Not committed to git
    environment:
      - NODE_ENV=production
      # Don't put secrets directly here
    ports:
      - "3000:3000"

# .env.local (add to .gitignore)
REACT_APP_API_URL=https://api.example.com
API_SECRET_KEY=your-secret-key
DATABASE_URL=postgresql://user:pass@localhost:5432/db

# Scan for vulnerabilities
docker scout quickview my-app:latest
 
# Detailed vulnerability report
docker scout cves my-app:latest

# .github/workflows/docker-build.yml
name: Docker Build and Deploy
 
on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]
 
jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Set up Docker Buildx
      uses: docker/setup-buildx-action@v2
      
    - name: Log in to Docker Hub
      uses: docker/login-action@v2
      with:
        username: ${{ secrets.DOCKER_USERNAME }}
        password: ${{ secrets.DOCKER_PASSWORD }}
        
    - name: Build and test
      run: |
        docker build -t my-app:test .
        docker run --rm my-app:test npm test
        
    - name: Build and push
      uses: docker/build-push-action@v4
      with:
        context: .
        push: true
        tags: |
          my-app:latest
          my-app:${{ github.sha }}
        cache-from: type=gha
        cache-to: type=gha,mode=max

# Wrong - reinstalls dependencies every time
FROM node:18-alpine
WORKDIR /app
COPY . .              # This invalidates cache when any file changes
RUN npm install
RUN npm run build
 
# Right - leverages Docker layer caching
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./  # Only copy package files first
RUN npm ci            # This layer gets cached
COPY . .              # Copy source after dependencies
RUN npm run build

# Check what's making your image large
docker run --rm -it my-app:latest sh
du -sh /app/*
 
# Use .dockerignore effectively
echo "node_modules
.git
*.md
.env*
coverage/
.nyc_output
src/
public/
!public/build" > .dockerignore

# docker-compose.yml - Enable polling for hot reload
version: '3.8'
services:
  frontend:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true  # Essential for hot reload in containers
      - WATCHPACK_POLLING=true    # For webpack 5

# Wrong - build-time variables in runtime
FROM node:18-alpine
ARG REACT_APP_API_URL
ENV REACT_APP_API_URL=$REACT_APP_API_URL
RUN npm run build
 
# Right - use multi-stage builds properly
FROM node:18-alpine AS builder
ARG REACT_APP_API_URL
ENV REACT_APP_API_URL=$REACT_APP_API_URL
RUN npm run build
 
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html

# Enable BuildKit for advanced features
export DOCKER_BUILDKIT=1
 
# Use build secrets for npm tokens
docker build --secret id=npmrc,src=.npmrc .

# syntax=docker/dockerfile:1
FROM node:18-alpine
 
# Mount secret at build time
RUN --mount=type=secret,id=npmrc,target=/root/.npmrc \
    npm ci --only=production

FROM nginx:stable-alpine
 
COPY --from=builder /app/build /usr/share/nginx/html
 
# Add health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD curl -f http://localhost/ || exit 1
 
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Install useful Docker Desktop extensions
# Resource Usage - monitor container resources
# Logs Explorer - better log viewing
# Volume Manager - manage Docker volumes

# View container logs
docker logs -f <container-name>
 
# Execute commands inside running container
docker exec -it <container-name> sh
 
# Inspect container configuration
docker inspect <container-name>
 
# View resource usage
docker stats
 
# Debug build process
docker build --progress=plain --no-cache .
 
# Save container state for debugging
docker commit <container-name> debug-image
docker run -it debug-image sh

# docker-compose.prod.yml
version: '3.8'
services:
  frontend:
    image: my-app:${IMAGE_TAG}
    deploy:
      replicas: 3
      update_config:
        parallelism: 1
        delay: 10s
        failure_action: rollback
      restart_policy:
        condition: on-failure
    ports:
      - "80:80"

#!/bin/bash
# deploy.sh
 
NEW_TAG=$1
CURRENT_SERVICE=$(docker-compose ps -q frontend)
 
# Start new version
docker-compose -f docker-compose.yml -f docker-compose.blue.yml up -d frontend-blue
 
# Wait for health check
sleep 30
 
# Switch traffic
docker-compose -f docker-compose.yml -f docker-compose.green.yml up -d frontend
 
# Remove old version
docker-compose stop frontend-blue
docker-compose rm -f frontend-blue