Dockerfile.frontend

# Dockerfile for Frontend Development & Production
# Multi-stage build for optimized production image

# Development stage
FROM node:20-alpine AS development

# Install pnpm
RUN npm install -g pnpm

# Set working directory
WORKDIR /app

# Copy package files
COPY package.json pnpm-lock.yaml* ./

# Install dependencies
RUN pnpm install --frozen-lockfile

# Copy source code
COPY src ./src
COPY public ./public
COPY index.html ./
COPY vite.config.ts ./
COPY tsconfig.json ./
COPY tsconfig.node.json ./

# Expose port
EXPOSE 3000

# Development command (can be overridden in docker-compose)
CMD ["pnpm", "run", "dev", "--", "--host", "0.0.0.0"]

# Production build stage
FROM node:20-alpine AS builder

# Install pnpm globally (cached layer)
RUN npm install -g pnpm@latest

WORKDIR /app

# Copy package files first for better caching
COPY package.json pnpm-lock.yaml* ./

# Install dependencies (this layer will be cached unless package files change)
RUN pnpm install --frozen-lockfile

# Copy configuration files (separate layer for better caching)
COPY tsconfig.json tsconfig.node.json vite.config.ts ./

# Copy source code and static assets
COPY index.html ./
COPY public ./public
COPY src ./src

# Build arguments for environment variables
ARG VITE_API_URL
ARG VITE_ZERO_SERVER
ARG VITE_AUTH_ENABLED

# Build application with optimizations
RUN pnpm run build && \
    # Remove source maps in production for security and size
    find /app/dist -name "*.map" -type f -delete

# Production stage - serve with nginx
FROM nginx:alpine AS production

# Install wget for health checks
RUN apk add --no-cache wget

# Copy nginx configuration first
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy built files from builder (optimized with --chown)
COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html

# Set proper permissions and create necessary directories
RUN chown -R nginx:nginx /usr/share/nginx/html && \
    chown -R nginx:nginx /var/cache/nginx && \
    chown -R nginx:nginx /var/log/nginx && \
    # Create necessary runtime directories
    mkdir -p /var/cache/nginx/client_temp && \
    mkdir -p /var/cache/nginx/proxy_temp && \
    mkdir -p /var/cache/nginx/fastcgi_temp && \
    mkdir -p /var/cache/nginx/uwsgi_temp && \
    mkdir -p /var/cache/nginx/scgi_temp && \
    chown -R nginx:nginx /var/cache/nginx && \
    # Set permissions for nginx PID
    touch /var/run/nginx.pid && \
    chown nginx:nginx /var/run/nginx.pid && \
    # Make sure nginx config is readable
    chmod 644 /etc/nginx/conf.d/default.conf

# Switch to non-root user for security
USER nginx

# Expose port
EXPOSE 3000

# Health check with proper timing
HEALTHCHECK --interval=30s --timeout=10s --start-period=10s --retries=3 \
    CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1

# Start nginx in foreground
CMD ["nginx", "-g", "daemon off;"]