Create containerized development setup for safe and consistent frontend development: Docker Configuration: - docker-compose.yml: Root-level orchestration with frontend service - frontend/Dockerfile.dev: Node.js 20 Alpine optimized for dev - Volume mounts for Hot Module Replacement (HMR) - Named volume for node_modules to avoid conflicts - Health check to verify service availability - Environment variables for file watching (CHOKIDAR_USEPOLLING) Vite Configuration Update: - vite.config.ts: Add server config for Docker compatibility - host: '0.0.0.0' to accept external connections - usePolling: true for file watching in container - port: 5173 explicitly configured Documentation: - README.md: Add Docker development procedure section - Document docker compose up -d workflow - Explain HMR and hot-reload capabilities - List advantages of Docker-based development Usage: docker compose up -d # Start development server docker compose logs -f # View logs docker compose down # Stop container Access: http://localhost:5173 Safety First: - Isolated environment prevents system conflicts - Reproducible setup across different machines - No host Node.js installation required - Easy team onboarding Refs: Docker best practices for Node.js development
33 lines
910 B
YAML
33 lines
910 B
YAML
# Docker Compose - LogWhisperer AI Development Environment
|
|
# Usage: docker compose up -d
|
|
# Access: http://localhost:5173
|
|
|
|
services:
|
|
frontend:
|
|
build:
|
|
context: ./frontend
|
|
dockerfile: Dockerfile.dev
|
|
container_name: logwhisperer-frontend-dev
|
|
ports:
|
|
- "5173:5173"
|
|
volumes:
|
|
# Mount source code for Hot Module Replacement (HMR)
|
|
- ./frontend:/app
|
|
# Use named volume for node_modules to avoid conflicts with host
|
|
- node_modules:/app/node_modules
|
|
environment:
|
|
- NODE_ENV=development
|
|
- CHOKIDAR_USEPOLLING=true
|
|
# Ensure container restarts on failure
|
|
restart: unless-stopped
|
|
# Health check to verify the service is running
|
|
healthcheck:
|
|
test: ["CMD", "wget", "-q", "--spider", "http://localhost:5173"]
|
|
interval: 30s
|
|
timeout: 10s
|
|
retries: 3
|
|
start_period: 40s
|
|
|
|
volumes:
|
|
node_modules:
|
|
driver: local |