feat: add Docker development environment for frontend

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
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-03 14:47:36 +02:00
parent 84338ea861
commit 976dd95dc8
4 changed files with 96 additions and 0 deletions

View File

@@ -141,6 +141,36 @@ npm run preview
La landing page sarà disponibile su `http://localhost:5173` durante lo sviluppo.
#### Sviluppo con Docker (Consigliato)
Per un ambiente di sviluppo isolato e consistente, utilizza Docker Compose:
```bash
# Avvia il container di sviluppo
docker compose up -d
# La landing page sarà disponibile su http://localhost:5173
# Modifica i file in frontend/src/ e vedi le modifiche in tempo reale (HMR)
# Visualizza i log
docker compose logs -f frontend
# Ferma il container
docker compose down
```
**Vantaggi Docker:**
- Ambiente isolato e riproducibile
- Hot Module Replacement (HMR) funzionante
- Nessun conflitto con Node.js installato sul sistema
- Facile da condividere con il team
**Stack Frontend:**
- **React 18** + **TypeScript** - UI library con type safety
- **Vite** - Build tool veloce con HMR
- **Tailwind CSS** - Utility-first CSS framework
- **PostCSS** + **Autoprefixer** - Processing CSS
## 🤖 Agenti AI (OpenCode.ai)