diff --git a/README.md b/README.md index eab216f..c0328b8 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..ee8360d --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,33 @@ +# 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 \ No newline at end of file diff --git a/frontend/Dockerfile.dev b/frontend/Dockerfile.dev new file mode 100644 index 0000000..e311e53 --- /dev/null +++ b/frontend/Dockerfile.dev @@ -0,0 +1,26 @@ +# Dockerfile.dev - Development container for LogWhisperer AI Frontend +# Optimized for Node.js with Hot Module Replacement (HMR) + +FROM node:20-alpine + +# Set working directory +WORKDIR /app + +# Install dependencies for file watching (needed for HMR in Docker) +RUN apk add --no-cache git + +# Copy package files first (for better caching) +COPY package*.json ./ + +# Install dependencies +RUN npm ci + +# Copy the rest of the application +COPY . . + +# Expose port 5173 for Vite dev server +EXPOSE 5173 + +# Command to run the development server +# Using --host 0.0.0.0 to allow connections from outside the container +CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"] \ No newline at end of file diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 8b0f57b..cd7ad00 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -4,4 +4,11 @@ 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, + }, + }, })