Dockerfile.frontend

# =============================================================================
# Frontend Dockerfile — React + Vite Development Image
# =============================================================================
# This Dockerfile creates a container image for the React frontend.
# It follows the same layered approach as the backend Dockerfile:
#   1. Install dependencies first (cached unless package.json changes).
#   2. Copy source code second (changes frequently).
#
# Build: docker build -f Dockerfile.frontend -t frontend .
# Run:   docker run -p 5173:5173 frontend
# =============================================================================

# Start from the official Node.js 20 Alpine image.
# Alpine Linux is an ultra-small distribution (~5MB) that keeps the
# image size minimal. Node 20 is the current LTS (Long-Term Support) version.
FROM node:20-alpine

# Set the working directory inside the container.
WORKDIR /app

# Copy ONLY the dependency manifest files first for Docker layer caching.
# - package.json: lists the project's dependencies.
# - package-lock.json: locks exact dependency versions for reproducibility.
COPY frontend/package.json frontend/package-lock.json ./

# Install dependencies using `npm ci` (Clean Install).
# Unlike `npm install`, `npm ci`:
#   - Deletes node_modules first for a fresh start.
#   - Installs exact versions from package-lock.json (no resolution).
#   - Is faster and more reliable for CI/CD and Docker builds.
RUN npm ci

# Copy the rest of the frontend source code.
COPY frontend/ .

# Start the Vite development server.
# The "--host" flag makes it listen on all interfaces (0.0.0.0),
# which is required for the server to be accessible from outside
# the Docker container.
CMD ["npm", "run", "dev", "--", "--host"]