From 976dd95dc8dc4f7f0a9c4fca04620e6e4e01e90a Mon Sep 17 00:00:00 2001
From: Luca Sacchi Ricciardi <luca@lucasacchi.net>
Date: Fri, 3 Apr 2026 14:47:36 +0200
Subject: [PATCH] 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
---
 README.md               | 30 ++++++++++++++++++++++++++++++
 docker-compose.yml      | 33 +++++++++++++++++++++++++++++++++
 frontend/Dockerfile.dev | 26 ++++++++++++++++++++++++++
 frontend/vite.config.ts |  7 +++++++
 4 files changed, 96 insertions(+)
 create mode 100644 docker-compose.yml
 create mode 100644 frontend/Dockerfile.dev

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,
+    },
+  },
 })