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
15 lines
259 B
TypeScript
15 lines
259 B
TypeScript
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
// https://vite.dev/config/
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
server: {
|
|
host: '0.0.0.0',
|
|
port: 5173,
|
|
watch: {
|
|
usePolling: true,
|
|
},
|
|
},
|
|
})
|