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.
123 lines
2.9 KiB
Markdown
123 lines
2.9 KiB
Markdown
# 🔧 Notes de Développement
|
||
|
||
## Problème: Build statique vs Développement
|
||
|
||
### Le Problème
|
||
- **Production:** `docker-compose.yml` → build statique avec `npm run build` (fichiers pré-compilés)
|
||
- **Issue:** Les changements au frontend ne sont pas visibles car le build est en cache
|
||
- **Symptôme:** L'URL change (`/dashboard/actifs`) mais le contenu ne change pas
|
||
|
||
### Solution: Script de Rebuild Complet ⚡
|
||
|
||
Le problème du cache Docker est **résolu** avec un script qui:
|
||
1. ✅ Arrête tous les conteneurs
|
||
2. ✅ Supprime les images Docker en cache
|
||
3. ✅ Nettoie le build précédent
|
||
4. ✅ Rebuild tout avec `docker-compose up -d --build`
|
||
|
||
#### <20> Utilisation
|
||
|
||
**Option 1: Script direct (recommandé)**
|
||
```bash
|
||
./rebuild.sh
|
||
```
|
||
|
||
**Option 2: Makefile**
|
||
```bash
|
||
make rebuild
|
||
```
|
||
|
||
Les deux font exactement la même chose!
|
||
|
||
### 📊 Modes de Déploiement
|
||
|
||
#### 1️⃣ **Production (Build Statique)** ← À UTILISER pour le dev aussi
|
||
```bash
|
||
make rebuild # Rebuild complet, force le cache
|
||
make up # Simple redémarrage
|
||
```
|
||
|
||
**Utiliser pour:**
|
||
- Tests finaux ✅
|
||
- Déploiement réel ✅
|
||
- Déploiement Docker ✅
|
||
|
||
#### 2️⃣ **Développement (Hot Reload)** ← Si vraiment tu veux npm start
|
||
```bash
|
||
make up-dev # npm start avec auto-reload
|
||
```
|
||
|
||
**Utiliser pour:**
|
||
- Dev ultra-rapide (mais pas de build production)
|
||
- Testing local rapide
|
||
- Debugging React
|
||
|
||
### 📁 Fichiers de Configuration
|
||
|
||
| Fichier | Mode | Frontend | Backend |
|
||
|---------|------|----------|---------|
|
||
| `docker-compose.yml` | Production | `npm run build` + serve | `--reload` |
|
||
| `docker-compose.dev.yml` | Dev | `npm start` (hot reload) | `--reload` |
|
||
| `rebuild.sh` | Production | Force rebuild complet | N/A |
|
||
|
||
### 🚀 Workflow Recommandé
|
||
|
||
```bash
|
||
# 1. Éditer le code
|
||
# vim frontend/src/pages/DashboardPage.jsx
|
||
|
||
# 2. Rebuild complet
|
||
make rebuild
|
||
|
||
# 3. Test dans le navigateur
|
||
# http://localhost:3000/dashboard/actifs
|
||
|
||
# ✅ Les changements sont appliqués!
|
||
```
|
||
|
||
### 🔍 Debugging
|
||
|
||
**Voir les logs:**
|
||
```bash
|
||
make logs-frontend # Logs du frontend
|
||
make logs-backend # Logs du backend
|
||
```
|
||
|
||
**Nettoyer complètement:**
|
||
```bash
|
||
make clean # Prune + supprime les images
|
||
```
|
||
|
||
### ⚠️ Notes Importantes
|
||
|
||
1. **Script `rebuild.sh`:** Nettoie complètement et recompile
|
||
- Plus lent (~30-60s) mais garantit une build fraîche
|
||
- Idéal après changements majeurs
|
||
|
||
2. **`make up` simple:** Redémarrage rapide
|
||
- Utilise l'image précédente en cache
|
||
- Plus rapide mais peut avoir du cache résiduel
|
||
|
||
3. **En cas de problème:**
|
||
```bash
|
||
make clean # Nettoie tout
|
||
make rebuild # Rebuild du zéro
|
||
```
|
||
|
||
### 📝 Exemple: Corriger la Navigation du Dashboard
|
||
|
||
```bash
|
||
# 1. Éditer DashboardPage.jsx
|
||
vim frontend/src/pages/DashboardPage.jsx
|
||
|
||
# 2. Rebuild complet
|
||
make rebuild
|
||
|
||
# 3. Vérifier dans le navigateur
|
||
# http://localhost:3000/dashboard/actifs
|
||
# → Les changements sont visibles! ✨
|
||
|
||
# ✅ Le filtre change maintenant correctement
|
||
```
|
||
|