# 🔧 Notes de Développement

## ✅ Solution: Build Frontend AVANT Docker

**Inspiré par:** L_Onomathoppee project

### Le Problème (Résolu ✅)
- **Ancien problème:** Docker build avec cache → changements React non visibles
- **Cause:** CRA buildait le React à chaque `docker-compose up --build`, mais le cache Docker gardait l'ancien résultat
- **Solution:** Build React **AVANT** Docker avec `npm run build`

### 🚀 Workflow Recommandé

```bash
# 1. Éditer le code
vim frontend/src/pages/DashboardPage.jsx

# 2. Build et deploy (TOUT EN UN)
make build

# ✨ Les changements sont visibles immédiatement!
```

### 📊 Comment ça fonctionne

1. ✅ `npm run build` dans `frontend/` → crée `frontend/build/`
2. ✅ Copie le build dans `build/frontend/`
3. ✅ Crée un Dockerfile qui utilise **Nginx** pour servir le build statique
4. ✅ Docker-compose lance les conteneurs avec le build frais
5. ✅ **BONUS:** Nginx optimise le cache des assets et gère React Router

### 📁 Structure après `make build`

```
build/
├── docker-compose.yml    # Orchestration
├── init.sql              # Init MariaDB
├── frontend/
│   ├── Dockerfile        # Nginx + static files
│   ├── nginx.conf        # Config React SPA (try_files)
│   └── [fichiers React compilés]
└── backend/
    ├── Dockerfile        # Python FastAPI
    ├── pyproject.toml
    └── [fichiers Python]
```

### 🔑 Commandes principales

```bash
# Build complet (recommandé après changements au code)
make build                  # Clean + npm build + docker build + deploy

# Redémarrage sans rebuild (si rien n'a changé au code)
make up                     # Juste redémarrer les conteneurs existants

# Arrêter les services
make down

# Voir les logs en temps réel
make logs-frontend          # Logs du frontend (Nginx)
make logs-backend           # Logs du backend (FastAPI)

# Nettoyer complètement
make clean                  # Supprime build/, frontend/build/, images Docker
```

### 📝 Exemple: Corriger la Navigation Dashboard

```bash
# 1. Éditer le fichier
vim frontend/src/pages/DashboardPage.jsx
# → Ajoute useLocation pour détecter les changements de route

# 2. Sauvegarder et builder
make build
# → npm run build → docker build → docker-compose up -d

# 3. Vérifier dans le navigateur
# http://localhost:3000/dashboard/actifs
# ✅ Le filtre change maintenant correctement!
```

### ⚙️ Scripts et Fichiers

| Fichier | Rôle |
|---------|------|
| `build.sh` | Script de build complet (npm build + docker) |
| `Makefile` | Commandes pratiques (make build, make up, etc) |
| `build/docker-compose.yml` | Généré automatiquement, orchestration |
| `.claude/` | Documentation (ce fichier) |

### 🌐 URLs d'accès après `make build`

- **Frontend:** http://localhost:3000
- **Backend:** http://localhost:8000
- **Database:** localhost:3306

### ✨ Avantages de cette approche

✅ **Pas de cache Docker** → changements visibles **immédiatement**  
✅ **Build production réel** → `npm run build` (pas de dev server)  
✅ **Nginx optimisé** → Cache des assets, gestion React Router  
✅ **Simple et rapide** → Une commande: `make build`  
✅ **Production-ready** → Comme en production réelle  

### ⚠️ Points importants

1. **Après modifier le frontend** → Toujours faire `make build`
2. **Après modifier le backend** → `make build` (ou `make up` si pas de changement à la structure)
3. **Pour nettoyer** → `make clean` (supprime tout, build à zéro)
4. **Les fichiers `build/`** → À .gitignore (fichiers générés)

### 🔍 Troubleshooting

**Les changements React ne sont pas visibles?**
```bash
make clean                  # Nettoie tout
make build                  # Rebuild from scratch
```

**Port déjà utilisé?**
```bash
make down                   # Arrête les conteneurs
make up                     # Redémarre
```

**Voir ce qui se passe?**
```bash
cd build
docker-compose logs -f frontend    # Voir tous les logs Nginx
docker-compose logs -f backend     # Voir tous les logs FastAPI
```

### 📚 Référence: Inspiré par L_Onomathoppee

Ce workflow est basé sur le projet L_Onomathoppee qui:
- Build le frontend React AVANT Docker
- Utilise Nginx pour servir les fichiers statiques
- Gère correctement React Router avec `try_files`
- Cache optimisé pour les assets

Voir: ~/L_Onomathoppee/build.sh pour la version complète