dockerfile-frontendlisted

# Dockerfile for Frontend Applications Multi-stage Dockerfile patterns for building and serving React/Vite/TypeScript frontend applications with nginx or Node.js static servers. ## When to use - Containerizing Vite, React, Next.js, or other Node.js-based frontend applications - Building production-optimized static bundles in Docker - Implementing build-time configuration via VITE_* or REACT_APP_* env vars - Setting up nginx to serve SPAs with history API fallback routing - Configuring runtime environment variables (backend URLs) via envsubst - Deploying frontend containers to Kubernetes, Cloud Run, or container platforms - Reverse-proxying API calls from frontend nginx to backend services ## Core conventions ### Multi-Stage Build: Node.js Build + Nginx Runtime **Build stage (node:alpine)**: Use `node:20-alpine` or `node:22-alpine` for the build stage; install dependencies with lockfile-first caching (`COPY package.json package-lock.json* ./` then `npm ci`), then build the static bundle (`npm run build` or `npx vite build`). **Runtime stage (nginx:alpine)**: Use `nginx:alpine` for the runtime stage; copy only the built `dist/` directory from the build stage to `/usr/share/nginx/html`. The final image contains no source code, no node_modules, only static files. **Why**: Multi-stage builds keep the runtime image minimal (nginx:alpine ≈ 40MB vs node:alpine ≈ 180MB); faster deploys, smaller attack surface, lower storage costs. **Alternative runtime (node server)**: Some p