From 66746b80e4941c774ec4d581ebb2c8fd16c4d33e Mon Sep 17 00:00:00 2001
From: AdamThomas <adamthomas@mac.home>
Date: Wed, 9 Sep 2026 23:20:29 +0200
Subject: [PATCH] Compose : service frontend dans la stack de dev
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nouveau service `frontend` (build ./frontend, Vite --host sur 5173, bind
  mount + volume nommé frontend_node_modules, depends_on backend).
- VITE_API_MODE=mock par défaut (aucun backend requis) ; VITE_API_TARGET
  pointe sur le service backend pour le mode http.
- .env.example : VITE_API_MODE / VITE_EDITION_ID.
- frontend/.dockerignore ; README : URL http://localhost:5173.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AwswqSChc3Rwtu61pRXiY2
---
 .env.example           |  7 +++++++
 README.md              |  7 ++++++-
 docker-compose.yml     | 20 ++++++++++++++++++++
 frontend/.dockerignore |  7 +++++++
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 frontend/.dockerignore

diff --git a/.env.example b/.env.example
index bbfd60f..bc17b2d 100644
--- a/.env.example
+++ b/.env.example
@@ -7,3 +7,10 @@ POSTGRES_DB=benevoles
 
 # Secret de signature des jetons (lien magique / session). À régénérer en prod.
 JWT_SECRET=dev-only-change-me
+
+# Frontend (service `frontend` du docker-compose).
+#   mock (défaut) : jeu de démonstration en mémoire, aucun backend requis.
+#   http          : API réelle — renseigner alors VITE_EDITION_ID avec l'UUID
+#                   d'une édition (créée p. ex. par `python -m app.seed`).
+VITE_API_MODE=mock
+# VITE_EDITION_ID=
diff --git a/README.md b/README.md
index da76152..0c14b14 100644
--- a/README.md
+++ b/README.md
@@ -14,9 +14,14 @@ cp .env.example .env
 docker compose up --build
 ```
 
+- Frontend : http://localhost:5173
 - API : http://localhost:8000
 - Documentation interactive : http://localhost:8000/docs
 
+Le frontend démarre en mode `mock` (jeu de démonstration en mémoire, aucun
+backend requis). Pour le brancher sur l'API réelle : `VITE_API_MODE=http` et
+`VITE_EDITION_ID=<uuid>` dans `.env` (voir `frontend/README.md`).
+
 ## Tests
 
 ```bash
@@ -31,6 +36,6 @@ démarrage du conteneur PostgreSQL.
 | Dossier      | Rôle                                             |
 |--------------|-------------------------------------------------|
 | `backend/`   | API FastAPI, modèle SQLModel, migrations Alembic |
-| `frontend/`  | Interface React + Vite + TS + Tailwind (étape ultérieure) |
+| `frontend/`  | Interface React + Vite + TS + Tailwind (service `frontend`) |
 | `deploy/`    | Configuration de déploiement production          |
 | `.github/`   | Chaîne CI/CD (build → GHCR → SSH sur le VPS)     |
diff --git a/docker-compose.yml b/docker-compose.yml
index 3d0b7f6..9086334 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -36,6 +36,26 @@ services:
       - ./backend:/app
       - venv:/app/.venv
 
+  frontend:
+    build: ./frontend
+    command: npm run dev -- --host --port 5173
+    environment:
+      # mock = jeu de démonstration en mémoire (défaut, aucun backend requis).
+      # http = API réelle : renseigner aussi VITE_EDITION_ID (UUID d'une édition
+      # existante, p. ex. après `docker compose run --rm backend uv run python -m app.seed`).
+      VITE_API_MODE: ${VITE_API_MODE:-mock}
+      VITE_EDITION_ID: ${VITE_EDITION_ID:-}
+      # Cible du proxy `/api` de Vite à l'intérieur du réseau compose.
+      VITE_API_TARGET: http://backend:8000
+    ports:
+      - "5173:5173"
+    depends_on:
+      - backend
+    volumes:
+      - ./frontend:/app
+      - frontend_node_modules:/app/node_modules
+
 volumes:
   db_data:
   venv:
+  frontend_node_modules:
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 0000000..afd9c38
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+.vite
+*.tsbuildinfo
+.env
+.env.*
+.DS_Store