# 🚀 Guide de DĂ©marrage - Test IntĂ©gration Veza **Objectif**: Lancer l'environnement complet pour tester l'intĂ©gration backend ↔ frontend dans le navigateur. --- ## 📋 État des Lieux ### Infrastructure (Docker Compose) - **PostgreSQL**: Port `5432` (user: `veza`, password: `password`, db: `veza`) - **Redis**: Port `6379` (pour CSRF, cache, rate limiting) - **RabbitMQ**: Ports `5672` (AMQP) et `15672` (Management UI) ### Services - **Backend Go**: Port `8080` (`veza-backend-api/`) - **Frontend React**: Port `3000` (`apps/web/`) - configurĂ© dans `vite.config.ts` - **Chat Server Rust**: Port `8081` (optionnel pour tests) - **Stream Server Rust**: Port `8082` (optionnel pour tests) ### Commandes Disponibles #### Makefile (Racine) ```bash make help # Affiche toutes les commandes make setup # Installation complĂšte (deps + tools) make infra-up # DĂ©marrer infrastructure Docker make infra-down # ArrĂȘter infrastructure Docker make db-migrate # ExĂ©cuter migrations DB make dev # DĂ©marrer TOUT (infra + backends + frontend) make dev-backend # DĂ©marrer backends uniquement make status # VĂ©rifier santĂ© des services ``` #### Frontend (`apps/web/`) ```bash npm run dev # DĂ©marrer Vite dev server (port 3000) npm run build # Build production npm run typecheck # VĂ©rifier types TypeScript npm run test # Tests unitaires npm run test:e2e # Tests E2E Playwright ``` #### Backend (`veza-backend-api/`) ```bash go run cmd/api/main.go # DĂ©marrer serveur (port 8080) make run # Build + run make dev # Run en mode dev ``` --- ## 🎯 DĂ©marrage Rapide (RecommandĂ©) ### Option 1: Tout-en-un avec Makefile ```bash # 1. Installation initiale (une seule fois) make setup # 2. DĂ©marrer l'infrastructure Docker make infra-up # 3. ExĂ©cuter les migrations make db-migrate # 4. DĂ©marrer TOUT (infra + backends + frontend) make dev ``` **RĂ©sultat**: - ✅ Infrastructure Docker dĂ©marrĂ©e - ✅ Backend Go sur http://localhost:8080 - ✅ Frontend React sur http://localhost:3000 - ✅ Hot reload activĂ© si outils installĂ©s (air, cargo-watch) **AccĂšs**: - Frontend: http://localhost:3000 - Backend API: http://localhost:8080/api/v1 - Swagger: http://localhost:8080/docs - RabbitMQ UI: http://localhost:15672 (veza/password) --- ### Option 2: DĂ©marrage Manuel (Plus de contrĂŽle) #### Étape 1: Infrastructure Docker ```bash # DĂ©marrer Postgres, Redis, RabbitMQ make infra-up # VĂ©rifier que tout est prĂȘt make status ``` #### Étape 2: Migrations Base de DonnĂ©es ```bash make db-migrate ``` #### Étape 3: Backend Go ```bash cd veza-backend-api # CrĂ©er fichier .env si inexistant cat > .env << EOF APP_ENV=development JWT_SECRET=dev-secret-key-minimum-32-characters-long-for-testing DATABASE_URL=postgres://veza:password@localhost:5432/veza?sslmode=disable REDIS_URL=redis://localhost:6379 CORS_ALLOWED_ORIGINS=http://localhost:3000,http://localhost:5173 APP_PORT=8080 LOG_LEVEL=INFO EOF # DĂ©marrer le serveur go run cmd/api/main.go # OU avec hot reload (si air installĂ©) air ``` **VĂ©rification Backend**: ```bash curl http://localhost:8080/health # Devrait retourner: {"status":"ok"} ``` #### Étape 4: Frontend React ```bash cd apps/web # Installer dĂ©pendances (si pas dĂ©jĂ  fait) npm install # DĂ©marrer Vite dev server npm run dev ``` **VĂ©rification Frontend**: - Ouvrir http://localhost:3000 dans le navigateur - La page devrait se charger --- ## ⚙ Configuration Requise ### Variables d'Environnement Backend **Fichier**: `veza-backend-api/.env` ```bash # REQUIS APP_ENV=development JWT_SECRET=dev-secret-key-minimum-32-characters-long-for-testing DATABASE_URL=postgres://veza:password@localhost:5432/veza?sslmode=disable # REQUIS pour CSRF (en dĂ©veloppement, Redis peut ĂȘtre optionnel) REDIS_URL=redis://localhost:6379 # REQUIS pour CORS (en dĂ©veloppement, defaults locaux OK) CORS_ALLOWED_ORIGINS=http://localhost:3000,http://localhost:5173 # Optionnel APP_PORT=8080 LOG_LEVEL=INFO UPLOAD_DIR=uploads ``` ### Variables d'Environnement Frontend **Fichier**: `apps/web/.env` (optionnel, valeurs par dĂ©faut OK) ```bash # Optionnel - Valeurs par dĂ©faut utilisĂ©es si non dĂ©fini VITE_API_URL=http://127.0.0.1:8080/api/v1 VITE_WS_URL=ws://127.0.0.1:8081/ws VITE_STREAM_URL=ws://127.0.0.1:8082/stream VITE_UPLOAD_URL=http://127.0.0.1:8080/upload ``` **Note**: Les valeurs par dĂ©faut dans `apps/web/src/config/env.ts` sont correctes pour le dĂ©veloppement local. --- ## 🔍 VĂ©rification de l'IntĂ©gration ### 1. VĂ©rifier Backend ```bash # Health check curl http://localhost:8080/health # Swagger UI open http://localhost:8080/docs # Test endpoint API curl http://localhost:8080/api/v1/auth/check-username?username=test ``` ### 2. VĂ©rifier Frontend ```bash # Ouvrir dans le navigateur open http://localhost:3000 # VĂ©rifier console navigateur (F12) # Devrait voir: connexion API rĂ©ussie ``` ### 3. Test Complet d'IntĂ©gration 1. **Ouvrir** http://localhost:3000 2. **Tester Register/Login**: - CrĂ©er un compte - Se connecter - VĂ©rifier que le token est stockĂ© 3. **Tester API**: - Ouvrir DevTools → Network - VĂ©rifier que les requĂȘtes incluent `Authorization: Bearer ` - VĂ©rifier que les mutations incluent `X-CSRF-Token` 4. **Tester Upload Track**: - Uploader un fichier audio - VĂ©rifier progression - VĂ©rifier que le track apparaĂźt dans la liste --- ## 🐛 DĂ©pannage ### ProblĂšme: Port dĂ©jĂ  utilisĂ© ```bash # VĂ©rifier ports occupĂ©s lsof -i :8080 # Backend lsof -i :3000 # Frontend lsof -i :5432 # Postgres lsof -i :6379 # Redis # Tuer processus si nĂ©cessaire kill -9 ``` ### ProblĂšme: Backend ne dĂ©marre pas ```bash # VĂ©rifier variables d'environnement cd veza-backend-api cat .env # VĂ©rifier connexion DB docker compose exec postgres psql -U veza -d veza -c "SELECT 1;" # VĂ©rifier connexion Redis docker compose exec redis redis-cli ping # VĂ©rifier logs go run cmd/api/main.go 2>&1 | tee backend.log ``` ### ProblĂšme: Frontend ne se connecte pas au backend ```bash # VĂ©rifier URL API dans frontend cd apps/web grep -r "VITE_API_URL" src/ # VĂ©rifier CORS curl -v -H "Origin: http://localhost:3000" \ -H "Access-Control-Request-Method: GET" \ -X OPTIONS \ http://localhost:8080/api/v1/auth/me # Devrait retourner headers CORS ``` ### ProblĂšme: Erreur CSRF ```bash # VĂ©rifier que Redis est dĂ©marrĂ© docker compose ps redis # VĂ©rifier connexion Redis depuis backend docker compose exec redis redis-cli ping # Si Redis down, backend devrait loguer un warning (en dev) # En production, backend refuse de dĂ©marrer ``` ### ProblĂšme: Migrations Ă©chouent ```bash # RĂ©initialiser DB (⚠ DESTRUCTIF) docker compose down -v docker compose up -d postgres make db-migrate # OU manuellement docker compose exec postgres psql -U veza -d veza -c "DROP SCHEMA public CASCADE; CREATE SCHEMA public;" make db-migrate ``` --- ## 📊 Commandes Utiles ### VĂ©rifier État des Services ```bash # État Docker docker compose ps # Logs en temps rĂ©el docker compose logs -f # Logs d'un service spĂ©cifique docker compose logs -f postgres docker compose logs -f redis # SantĂ© des services make status ``` ### AccĂšs aux Bases de DonnĂ©es ```bash # Postgres shell make db-shell # OU docker compose exec postgres psql -U veza -d veza # Redis shell make redis-shell # OU docker compose exec redis redis-cli ``` ### ArrĂȘter Tout ```bash # ArrĂȘter infrastructure Docker make infra-down # ArrĂȘter tout (infra + apps) # Ctrl+C dans le terminal oĂč make dev tourne # OU pkill -f "go run\|vite\|cargo" make infra-down ``` --- ## 🎯 Workflow RecommandĂ© ### PremiĂšre Installation ```bash # 1. Installer dĂ©pendances systĂšme make setup # 2. DĂ©marrer infrastructure make infra-up # 3. Migrations make db-migrate # 4. VĂ©rifier make status ``` ### DĂ©veloppement Quotidien ```bash # Option A: Tout en un (recommandĂ©) make dev # Option B: SĂ©parĂ© (plus de contrĂŽle) # Terminal 1: Infrastructure make infra-up # Terminal 2: Backend cd veza-backend-api && go run cmd/api/main.go # Terminal 3: Frontend cd apps/web && npm run dev ``` ### Tests d'IntĂ©gration ```bash # Backend + Frontend doivent tourner # Puis dans apps/web: npm run test:e2e ``` --- ## ✅ Checklist de VĂ©rification Avant de tester l'intĂ©gration, vĂ©rifier: - [ ] Infrastructure Docker dĂ©marrĂ©e (`make infra-up`) - [ ] Migrations exĂ©cutĂ©es (`make db-migrate`) - [ ] Backend Go dĂ©marrĂ© sur port 8080 - [ ] Frontend React dĂ©marrĂ© sur port 3000 - [ ] Variables d'environnement backend configurĂ©es (`.env`) - [ ] CORS_ALLOWED_ORIGINS inclut `http://localhost:3000` - [ ] Redis accessible (pour CSRF) - [ ] Postgres accessible (pour donnĂ©es) **Test rapide**: ```bash # Backend curl http://localhost:8080/health # Frontend curl http://localhost:3000 ``` --- ## 🎉 PrĂȘt Ă  Tester ! Une fois tout dĂ©marrĂ©: 1. **Ouvrir** http://localhost:3000 dans le navigateur 2. **Tester** le flow complet: - Register → Login → Upload Track → CrĂ©er Playlist 3. **VĂ©rifier** DevTools → Network pour voir les requĂȘtes API 4. **VĂ©rifier** que CORS et CSRF fonctionnent correctement **Bon dĂ©veloppement ! 🚀**