CIA/e-voting-system/.claude/BUILD_SOLUTION.md

🔧 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é

# 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

# 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

# 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?

make clean                  # Nettoie tout
make build                  # Rebuild from scratch

Port déjà utilisé?

make down                   # Arrête les conteneurs
make up                     # Redémarre

Voir ce qui se passe?

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