8baabf528c
- Added HistoriquePage component to display user's voting history with detailed statistics and vote cards. - Created UpcomingVotesPage component to show upcoming elections with a similar layout. - Developed CSS styles for both pages to enhance visual appeal and responsiveness. - Integrated API calls to fetch user's votes and upcoming elections. - Added a rebuild script for Docker environment setup and data restoration. - Created a Python script to populate the database with sample data for testing.
144 lines
4.4 KiB
Markdown
144 lines
4.4 KiB
Markdown
# 🔧 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
|