Luca Sacchi Ricciardi
1c6f0b5b61
fix: configure nginx proxy for API calls to fix cross-origin issues
...
CI/CD - Build & Test / Backend Tests (push) Has been cancelled
CI/CD - Build & Test / Frontend Tests (push) Has been cancelled
CI/CD - Build & Test / Security Scans (push) Has been cancelled
CI/CD - Build & Test / Docker Build Test (push) Has been cancelled
CI/CD - Build & Test / Terraform Validate (push) Has been cancelled
Deploy to Production / Build & Test (push) Has been cancelled
Deploy to Production / Security Scan (push) Has been cancelled
Deploy to Production / Build Docker Images (push) Has been cancelled
Deploy to Production / Deploy to Staging (push) Has been cancelled
Deploy to Production / E2E Tests (push) Has been cancelled
Deploy to Production / Deploy to Production (push) Has been cancelled
E2E Tests / Run E2E Tests (push) Has been cancelled
E2E Tests / Visual Regression Tests (push) Has been cancelled
E2E Tests / Smoke Tests (push) Has been cancelled
Problem:
Frontend was calling localhost:8000 for API, but when accessing
from Windows (192.168.254.79:8888), the browser tried to connect
to localhost on the Windows machine instead of the server.
Solution:
1. Added nginx.conf with proxy configuration for /api/ routes
2. Updated Dockerfile to copy nginx.conf to container
3. Changed api.ts baseURL from 'http://localhost:8000/api/v1 ' to '/api/v1'
4. Nginx now proxies all /api/ requests to backend:8000
This allows the frontend to work correctly from any client
by using relative paths that nginx proxies to the backend.
2026-04-08 00:05:14 +02:00
Luca Sacchi Ricciardi
991908ba62
feat(frontend): implement complete React frontend with Vite, TypeScript, and Tailwind
...
Complete frontend implementation (FE-001 to FE-006):
FE-001: Setup Ambiente React
- Initialize Vite + React + TypeScript project
- Configure Tailwind CSS with custom theme
- Add shadcn/ui components (Button, Card, Badge, Table, DropdownMenu, Toaster)
- Install dependencies: axios, react-query, react-router-dom, lucide-react, etc.
- Configure path aliases (@/components, @/lib, etc.)
FE-002: Configurazione API Client
- Create lib/api.ts with Axios instance
- Add TypeScript types for Scenario, Metrics, etc.
- Configure environment variable VITE_API_URL
FE-003: React Query Hooks
- Create QueryProvider with React Query client
- Add useScenarios hook with pagination/filters
- Add useScenario hook for detail view
- Add mutations: create, update, delete, start, stop
- Add useMetrics hook with auto-refresh
- Implement cache invalidation
FE-004: Layout e Navigazione
- Create Layout component with Header and Sidebar
- Configure React Router with routes:
* / - Dashboard
* /scenarios - Scenarios list
* /scenarios/:id - Scenario detail
- Implement responsive navigation
- Add active state styling
FE-005: Dashboard Page
- Create Dashboard with stat cards
- Display total scenarios, running count, total cost, PII violations
- Use real data from useScenarios hook
- Add loading states
FE-006: Scenarios List Page
- Create ScenariosPage with data table
- Display scenario name, status (with badge), region, requests, cost
- Add action dropdown (Start, Stop, Delete)
- Implement navigation to detail view
Components Created:
- ui/button.tsx - Button component with variants
- ui/card.tsx - Card component with header/content/footer
- ui/badge.tsx - Badge component for status
- ui/table.tsx - Table component
- ui/dropdown-menu.tsx - Dropdown menu
- ui/toaster.tsx - Toast notifications
Pages Created:
- Dashboard.tsx - Main dashboard view
- ScenariosPage.tsx - List of scenarios
- ScenarioDetail.tsx - Scenario detail with metrics
- NotFound.tsx - 404 page
All features integrated with backend API.
Tasks: FE-001, FE-002, FE-003, FE-004, FE-005, FE-006 complete
2026-04-07 14:58:46 +02:00
