- Disable HMR when NODE_ENV=production to prevent WebSocket binding errors
- HMR was trying to bind to external IP:443 which is not available in Docker
- App now works correctly behind HTTPS reverse proxy
- Add .env file for production deployment with reverse proxy
- Add docker-compose.prod.yml for production profile
- Add docker-compose.override.yml for local development
- Update docker-compose.yml with all configurable variables
- Update frontend to use VITE_* environment variables
- Update backend to support CORS_ORIGINS and WEBHOOK_BASE_URL
- Add vite.config.ts allowedHosts for reverse proxy
- Add documentation for docker-compose and reverse proxy setup
All URLs are now configurable via environment variables:
- VITE_API_URL: Backend API endpoint
- VITE_WEBHOOK_BASE_URL: Webhook base URL
- VITE_INSTALL_SCRIPT_URL: Install script URL
- VITE_APP_URL: Frontend URL
- CORS_ORIGINS: Allowed CORS origins
- WEBHOOK_BASE_URL: Backend webhook base URL
Create mock backend to simulate AI responses for UI development:
Backend Implementation:
- tools/fake-backend/server.js: Express server with CORS
- POST /api/analyze: Accepts log, returns mock AI analysis with 1.5s delay
- GET /health: Health check endpoint
- Pattern matching for different log types (PostgreSQL, Nginx, Node.js, Disk)
- Error handling: 400 for empty payload, 500 for server errors
- Mock responses for common errors (OOM, 502, connection refused, disk full)
Container Setup:
- Dockerfile: Node.js 20 Alpine container
- docker-compose.yml: Added fake-backend service on port 3000
- Health checks for both frontend and backend services
- Environment variable VITE_API_URL for frontend
Frontend Integration:
- InteractiveDemo.tsx: Replaced static data with real fetch() calls
- API_URL configurable via env var (default: http://localhost:3000)
- Error handling with user-friendly messages
- Shows backend URL in demo section
- Maintains loading states and UI feedback
Documentation:
- docs/tools_fake_backend.md: Complete usage guide
- README.md: Updated with tools/fake-backend structure and usage
Development Workflow:
1. docker compose up -d (starts both frontend and backend)
2. Frontend calls http://fake-backend:3000/api/analyze
3. Backend returns realistic mock responses
4. No OpenRouter API costs during development
Safety First:
- No real API calls during development
- Isolated mock logic in dedicated tool
- Easy switch to real backend by changing URL
- CORS enabled only for development
Refs: Sprint 4 preparation, API development workflow
The 'Guarda la Demo' (Watch Demo) button in Hero section was not working.
Now it smoothly scrolls to the InteractiveDemo section.
Changes:
- Added id='demo-interattiva' to InteractiveDemo section
- Implemented handleSecondaryCta with document.getElementById
- Used scrollIntoView with smooth behavior for better UX
Refs: User feedback - button was not functional
Create interactive demo component showcasing AI log analysis:
Layout:
- Two-column responsive grid (side-by-side desktop, stacked mobile)
- Left panel: Terminal-style input with log selection
- Right panel: AI analysis output with results
Terminal Panel (Left):
- Dark terminal design (bg-slate-900) with header
- 3 preset log buttons: PostgreSQL OOM, Nginx 502, Node.js Exception
- Terminal content area with monospace font
- Blinking cursor animation
- Log content display with syntax highlighting
Analysis Panel (Right):
- Initial state with guidance message
- Loading animation: 'Analisi in corso...' with 1.5s delay
- Result display with title, description, command
- Command box with copy button and feedback
- Safety badge and additional notes
React Logic:
- useState for selection, loading, analysis states
- Simulated 1.5s delay with setTimeout
- Static mock data (no API calls)
- Copy to clipboard functionality with visual feedback
Accessibility:
- aria-live=polite on output panel for screen readers
- aria-atomic=true for complete announcements
- aria-pressed on selection buttons
- aria-label on interactive elements
- Icons hidden from screen readers
TypeScript:
- LogAnalysis interface defined
- Proper type safety throughout
- Build passes without errors
Integration:
- Added to components/index.ts exports
- Integrated in App.tsx after HowItWorks section
Refs: Giorno 4 - Sprint 3 Landing Page development
Critical bug fix (P0): Text appearing white-on-white and unreadable.
Root Cause:
- CSS legacy styles in index.css were setting global colors via :root variables
- color-scheme: light dark was interfering with Tailwind classes
- Global color: var(--text) and background: var(--bg) were overriding Tailwind
- Dark mode media query was applying even when Tailwind expected light mode
- Variables like --text-h were referenced but not properly initialized
Fix:
- Removed all legacy CSS variable definitions
- Removed color-scheme declaration that interfered with Tailwind
- Removed global color/background declarations
- Simplified index.css to only import Tailwind and set minimal base styles
- Let Tailwind utility classes handle all colors completely
Result:
- Text now renders with correct Tailwind colors (text-slate-900, text-indigo-700, etc.)
- Badge with 'Sprint 2 Completato' now visible with indigo background
- Headline 'Il DevOps tascabile...' now renders in dark slate
- Build successful: 28KB CSS bundle with all utilities
Safety First:
- Verified build passes
- No breaking changes to component structure
- Tailwind classes now have full control over styling
- Minimal base styles preserved for font-smoothing
Refs: Tailwind v4 CSS-first configuration
Critical bug fix (P0): Tailwind CSS classes were not being compiled.
Root Cause:
- Tailwind v4 requires explicit @import tailwindcss in CSS file
- File was missing this directive, causing all utility classes to be ignored
- CSS bundle was only 4KB instead of expected 30KB+
Fix:
- Added @import tailwindcss; at the top of src/index.css
- Verified build now generates 30KB+ CSS bundle with all utility classes
- Confirmed classes like text-3xl, bg-indigo-600, max-w-7xl are present
Safety First:
- Build passes successfully
- No breaking changes to existing styles
- Incremental fix before UI refactoring
Refs: Tailwind v4 migration guide
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
