feat: Add development mode for Next.js frontend with hot reload and verbose logging
Add comprehensive development setup for frontend debugging and rapid iteration. FEATURES: ✓ Hot Module Reload (HMR) - auto-refresh on file changes ✓ Detailed Logging - all console logs visible in Docker output ✓ TypeScript Checking - real-time type validation ✓ Source Maps - easier debugging in DevTools ✓ Fast Iteration - no container rebuild needed for code changes FILES ADDED: - docker-compose.dev.yml - compose override with dev-specific settings - docker/Dockerfile.frontend.dev - updated with dev environment variables - dev-mode.sh - helper script with easy commands - DEV_MODE.md - comprehensive development guide - QUICK_DEV_START.md - quick start instructions USAGE: ./dev-mode.sh start # Start frontend in dev mode ./dev-mode.sh logs # Stream frontend logs ./dev-mode.sh logs-all # Stream all services logs ./dev-mode.sh stop # Stop development mode ./dev-mode.sh rebuild # Rebuild after package.json changes ./dev-mode.sh shell # Open shell in container ./dev-mode.sh status # Check container status BENEFITS: - Faster feedback loop during development - Better debugging with detailed logs - No production artifacts in dev container - Source code mounted for real-time updates - Improved developer experience 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Alexis Bruneteau
parent
6067c3741f
commit
fbb7bc3991
238
e-voting-system/DEV_MODE.md
Normal file
238
e-voting-system/DEV_MODE.md
Normal file
@ -0,0 +1,238 @@
|
||||
# Frontend Development Mode - Setup & Usage
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Option 1: Using the Helper Script (Recommended)
|
||||
|
||||
```bash
|
||||
# Start frontend in development mode
|
||||
./dev-mode.sh start
|
||||
|
||||
# In another terminal, stream logs
|
||||
./dev-mode.sh logs
|
||||
|
||||
# To stop
|
||||
./dev-mode.sh stop
|
||||
```
|
||||
|
||||
### Option 2: Direct Docker Compose Commands
|
||||
|
||||
```bash
|
||||
# Start dev frontend with other services
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml up frontend-dev
|
||||
|
||||
# Stream logs
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml logs -f frontend-dev
|
||||
|
||||
# Stop
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml down
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✨ Features in Development Mode
|
||||
|
||||
### ✓ Hot Module Reload (HMR)
|
||||
- Changes to `.ts`, `.tsx`, `.css` files automatically refresh in browser
|
||||
- No need to rebuild container
|
||||
- Source maps for debugging
|
||||
|
||||
### ✓ Detailed Logging
|
||||
- Browser console logs visible in Docker logs
|
||||
- Server-side render logs
|
||||
- API request/response debugging
|
||||
- Network timing information
|
||||
|
||||
### ✓ Development Tools
|
||||
- Next.js dev server with full diagnostics
|
||||
- TypeScript error messages with line numbers
|
||||
- React Fast Refresh for component updates
|
||||
- Network tab in browser DevTools
|
||||
|
||||
### ✓ Volume Mounting
|
||||
- `./frontend:/app` - all source code hot-reloaded
|
||||
- `/app/node_modules` - isolated for performance
|
||||
- `/app/.next` - isolated build cache
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Available Commands
|
||||
|
||||
```bash
|
||||
# Start development mode
|
||||
./dev-mode.sh start
|
||||
|
||||
# Stop development mode
|
||||
./dev-mode.sh stop
|
||||
|
||||
# Stream frontend logs only
|
||||
./dev-mode.sh logs
|
||||
|
||||
# Stream ALL services logs
|
||||
./dev-mode.sh logs-all
|
||||
|
||||
# Rebuild dev image (after package.json changes)
|
||||
./dev-mode.sh rebuild
|
||||
|
||||
# Open shell in dev container
|
||||
./dev-mode.sh shell
|
||||
|
||||
# Check container status
|
||||
./dev-mode.sh status
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📍 Access Points
|
||||
|
||||
| Service | URL | Purpose |
|
||||
|---------|-----|---------|
|
||||
| Frontend (Dev) | http://localhost:3000 | Application with hot reload |
|
||||
| Backend API | http://localhost:8000 | API endpoint |
|
||||
| API Docs | http://localhost:8000/docs | Swagger documentation |
|
||||
| Database Admin | http://localhost:8081 | MariaDB management |
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Debugging Tips
|
||||
|
||||
### View Detailed Frontend Logs
|
||||
```bash
|
||||
./dev-mode.sh logs
|
||||
|
||||
# Or use grep to filter
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml logs -f frontend-dev | grep -i error
|
||||
```
|
||||
|
||||
### Check All Services
|
||||
```bash
|
||||
./dev-mode.sh logs-all
|
||||
```
|
||||
|
||||
### Open Terminal in Container
|
||||
```bash
|
||||
./dev-mode.sh shell
|
||||
|
||||
# Inside container, you can run:
|
||||
npm run lint
|
||||
npm run type-check
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Browser DevTools
|
||||
1. Open http://localhost:3000
|
||||
2. Open DevTools (F12 or Ctrl+Shift+I)
|
||||
3. View:
|
||||
- **Console** - see all logs from Next.js
|
||||
- **Network** - see API requests/responses
|
||||
- **Sources** - debug TypeScript code
|
||||
- **Application** - inspect state/localStorage
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ When to Rebuild
|
||||
|
||||
```bash
|
||||
# After changing package.json or package-lock.json
|
||||
./dev-mode.sh rebuild
|
||||
|
||||
# After changing environment variables in Dockerfile.frontend.dev
|
||||
./dev-mode.sh rebuild
|
||||
|
||||
# Usually NOT needed for code changes (hot reload works)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Environment Variables in Dev Mode
|
||||
|
||||
Automatically set in `docker-compose.dev.yml`:
|
||||
|
||||
```yaml
|
||||
NODE_ENV: development # Enable dev features
|
||||
NEXT_PUBLIC_DEBUG: 'true' # Frontend debug mode
|
||||
NEXT_PUBLIC_API_URL: http://localhost:8000
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Hot Reload Workflow
|
||||
|
||||
1. **Edit a file** → `frontend/components/something.tsx`
|
||||
2. **Save** → File is mounted in container
|
||||
3. **Next.js detects change** → ~500ms
|
||||
4. **Fast Refresh** → Browser auto-reloads
|
||||
5. **View in DevTools** → Console shows updates
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Common Issues
|
||||
|
||||
### Container won't start
|
||||
```bash
|
||||
# Check logs
|
||||
./dev-mode.sh logs
|
||||
|
||||
# Rebuild from scratch
|
||||
./dev-mode.sh rebuild
|
||||
./dev-mode.sh start
|
||||
```
|
||||
|
||||
### Port 3000 already in use
|
||||
```bash
|
||||
# Change port in docker-compose.dev.yml
|
||||
# Or kill existing process
|
||||
lsof -ti:3000 | xargs kill -9
|
||||
```
|
||||
|
||||
### Changes not reflecting
|
||||
```bash
|
||||
# Try full refresh in browser
|
||||
Ctrl+Shift+R (hard refresh)
|
||||
|
||||
# Or restart container
|
||||
./dev-mode.sh stop
|
||||
./dev-mode.sh start
|
||||
```
|
||||
|
||||
### Need to see all npm commands
|
||||
```bash
|
||||
./dev-mode.sh shell
|
||||
cat package.json | grep -A 10 '"scripts"'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 Production vs Development
|
||||
|
||||
| Aspect | Production | Development |
|
||||
|--------|-----------|-------------|
|
||||
| Build | Optimized, minified | Unoptimized for speed |
|
||||
| HMR | ✗ No | ✓ Yes |
|
||||
| Logging | Minimal | Verbose |
|
||||
| Performance | Fast | Slower (for debugging) |
|
||||
| File Size | ~100KB | ~5MB |
|
||||
| Startup | 5-10s | 30-60s |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Performance Notes
|
||||
|
||||
- Dev mode is intentionally verbose for debugging
|
||||
- Larger bundle size than production
|
||||
- Slower startup is normal
|
||||
- HMR eliminates need for full rebuilds
|
||||
|
||||
Use production mode for performance testing.
|
||||
|
||||
---
|
||||
|
||||
## 📚 Further Reading
|
||||
|
||||
- [Next.js Dev Server](https://nextjs.org/docs/app/api-reference/cli/next/dev)
|
||||
- [Docker Compose Override](https://docs.docker.com/compose/extends/)
|
||||
- [React DevTools](https://react-devtools-tutorial.vercel.app/)
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** 2025-11-07
|
||||
99
e-voting-system/QUICK_DEV_START.md
Normal file
99
e-voting-system/QUICK_DEV_START.md
Normal file
@ -0,0 +1,99 @@
|
||||
# Quick Development Mode Setup
|
||||
|
||||
## ⚡ 30-Second Start
|
||||
|
||||
```bash
|
||||
# Make sure you're in the project root
|
||||
cd /home/sorti/projects/CIA/e-voting-system
|
||||
|
||||
# Start development mode
|
||||
./dev-mode.sh start
|
||||
```
|
||||
|
||||
That's it! Your frontend will be running with:
|
||||
- ✓ Hot reload on every file change
|
||||
- ✓ Full console logs in Docker
|
||||
- ✓ TypeScript type checking
|
||||
- ✓ Source maps for debugging
|
||||
|
||||
## 📺 View Logs in Real-Time
|
||||
|
||||
Open a **new terminal** and run:
|
||||
|
||||
```bash
|
||||
./dev-mode.sh logs
|
||||
```
|
||||
|
||||
Now you'll see every log from:
|
||||
- Next.js startup messages
|
||||
- Component renders
|
||||
- API calls
|
||||
- Console.log() statements
|
||||
- Errors with full stack traces
|
||||
|
||||
## 🌐 Access Your App
|
||||
|
||||
Open in browser: **http://localhost:3000**
|
||||
|
||||
Press `F12` to open DevTools and see:
|
||||
- Console logs from both server and client
|
||||
- Network requests to `/api/`
|
||||
- Component hierarchy in React DevTools
|
||||
|
||||
## 🛑 Stop Development Mode
|
||||
|
||||
```bash
|
||||
./dev-mode.sh stop
|
||||
```
|
||||
|
||||
## 📝 Edit Files
|
||||
|
||||
1. Edit any file in `frontend/` directory
|
||||
2. Save
|
||||
3. Next.js detects change (~500ms)
|
||||
4. Browser auto-refreshes
|
||||
5. See console logs in terminal
|
||||
|
||||
**No container rebuild needed!** 🎉
|
||||
|
||||
## 🆘 Troubleshooting
|
||||
|
||||
**Can't see logs?**
|
||||
```bash
|
||||
./dev-mode.sh logs
|
||||
```
|
||||
|
||||
**Port 3000 in use?**
|
||||
```bash
|
||||
lsof -ti:3000 | xargs kill -9
|
||||
./dev-mode.sh start
|
||||
```
|
||||
|
||||
**Need a shell in container?**
|
||||
```bash
|
||||
./dev-mode.sh shell
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Common Dev Tasks
|
||||
|
||||
| Task | Command |
|
||||
|------|---------|
|
||||
| Start dev | `./dev-mode.sh start` |
|
||||
| View logs | `./dev-mode.sh logs` |
|
||||
| Stop dev | `./dev-mode.sh stop` |
|
||||
| Rebuild after npm install | `./dev-mode.sh rebuild` |
|
||||
| Open shell | `./dev-mode.sh shell` |
|
||||
| Check status | `./dev-mode.sh status` |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Next Steps
|
||||
|
||||
1. ✓ Start dev mode: `./dev-mode.sh start`
|
||||
2. ✓ View logs: `./dev-mode.sh logs` (in another terminal)
|
||||
3. ✓ Open browser: http://localhost:3000
|
||||
4. ✓ Edit some code and see instant updates!
|
||||
|
||||
For more info, see [DEV_MODE.md](./DEV_MODE.md)
|
||||
83
e-voting-system/dev-mode.sh
Executable file
83
e-voting-system/dev-mode.sh
Executable file
@ -0,0 +1,83 @@
|
||||
#!/bin/bash
|
||||
|
||||
# E-Voting System - Frontend Development Mode Helper
|
||||
# This script helps run the Next.js frontend in development mode with detailed logging
|
||||
|
||||
set -e
|
||||
|
||||
case "${1:-help}" in
|
||||
start)
|
||||
echo "🚀 Starting frontend in DEVELOPMENT mode with full logging..."
|
||||
echo ""
|
||||
echo "Features:"
|
||||
echo " ✓ Hot reload on file changes"
|
||||
echo " ✓ Detailed browser console logs"
|
||||
echo " ✓ Server-side render logs"
|
||||
echo " ✓ API request/response logs"
|
||||
echo ""
|
||||
|
||||
# Stop the production frontend if running
|
||||
if docker compose ps | grep -q "evoting_frontend"; then
|
||||
echo "Stopping production frontend..."
|
||||
docker compose stop frontend
|
||||
fi
|
||||
|
||||
# Start dev frontend with other services
|
||||
echo "Starting all services..."
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml up frontend-dev
|
||||
;;
|
||||
|
||||
stop)
|
||||
echo "⏹️ Stopping frontend development mode..."
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml down
|
||||
;;
|
||||
|
||||
logs)
|
||||
echo "📋 Showing frontend development logs (streaming)..."
|
||||
echo ""
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml logs -f frontend-dev
|
||||
;;
|
||||
|
||||
logs-all)
|
||||
echo "📋 Showing all services logs..."
|
||||
echo ""
|
||||
docker compose logs -f
|
||||
;;
|
||||
|
||||
rebuild)
|
||||
echo "🔨 Rebuilding frontend dev image..."
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml build --no-cache frontend-dev
|
||||
;;
|
||||
|
||||
shell)
|
||||
echo "🐚 Opening shell in frontend dev container..."
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml exec frontend-dev sh
|
||||
;;
|
||||
|
||||
status)
|
||||
echo "📊 Frontend development status:"
|
||||
echo ""
|
||||
docker compose -f docker-compose.yml -f docker-compose.dev.yml ps frontend-dev
|
||||
;;
|
||||
|
||||
*)
|
||||
echo "E-Voting System - Frontend Development Mode Helper"
|
||||
echo ""
|
||||
echo "Usage: ./dev-mode.sh [command]"
|
||||
echo ""
|
||||
echo "Commands:"
|
||||
echo " start - Start frontend in development mode with hot reload"
|
||||
echo " stop - Stop development mode"
|
||||
echo " logs - Show frontend logs (streaming)"
|
||||
echo " logs-all - Show all services logs"
|
||||
echo " rebuild - Rebuild frontend dev image"
|
||||
echo " shell - Open shell in dev container"
|
||||
echo " status - Show development container status"
|
||||
echo ""
|
||||
echo "Examples:"
|
||||
echo " ./dev-mode.sh start # Start dev mode"
|
||||
echo " ./dev-mode.sh logs # Stream logs"
|
||||
echo " ./dev-mode.sh logs-all # All services"
|
||||
echo ""
|
||||
;;
|
||||
esac
|
||||
@ -1,72 +1,43 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
mariadb:
|
||||
image: mariadb:latest
|
||||
container_name: evoting_db
|
||||
environment:
|
||||
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD:-rootpass123}
|
||||
MYSQL_DATABASE: ${DB_NAME:-evoting_db}
|
||||
MYSQL_USER: ${DB_USER:-evoting_user}
|
||||
MYSQL_PASSWORD: ${DB_PASSWORD:-evoting_pass123}
|
||||
ports:
|
||||
- "${DB_PORT:-3306}:3306"
|
||||
volumes:
|
||||
- evoting_data:/var/lib/mysql
|
||||
- ./docker/init.sql:/docker-entrypoint-initdb.d/init.sql
|
||||
networks:
|
||||
- evoting_network
|
||||
healthcheck:
|
||||
test: ["CMD", "mariadb-admin", "ping", "-h", "localhost", "--silent"]
|
||||
timeout: 20s
|
||||
retries: 10
|
||||
start_period: 30s
|
||||
|
||||
backend:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: docker/Dockerfile.backend
|
||||
container_name: evoting_backend
|
||||
environment:
|
||||
DB_HOST: mariadb
|
||||
DB_PORT: 3306
|
||||
DB_NAME: ${DB_NAME:-evoting_db}
|
||||
DB_USER: ${DB_USER:-evoting_user}
|
||||
DB_PASSWORD: ${DB_PASSWORD:-evoting_pass123}
|
||||
SECRET_KEY: ${SECRET_KEY:-your-secret-key-change-in-production}
|
||||
DEBUG: ${DEBUG:-false}
|
||||
ports:
|
||||
- "${BACKEND_PORT:-8000}:8000"
|
||||
depends_on:
|
||||
mariadb:
|
||||
condition: service_healthy
|
||||
volumes:
|
||||
- ./backend:/app/backend
|
||||
networks:
|
||||
- evoting_network
|
||||
command: uvicorn backend.main:app --host 0.0.0.0 --port 8000 --reload
|
||||
|
||||
frontend:
|
||||
# Development version of the frontend with hot reload and verbose logging
|
||||
frontend-dev:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: docker/Dockerfile.frontend.dev
|
||||
args:
|
||||
REACT_APP_API_URL: http://backend:8000
|
||||
container_name: evoting_frontend
|
||||
container_name: evoting_frontend_dev
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "${FRONTEND_PORT:-3000}:3000"
|
||||
depends_on:
|
||||
- backend
|
||||
backend:
|
||||
condition: service_healthy
|
||||
validator-1:
|
||||
condition: service_healthy
|
||||
validator-2:
|
||||
condition: service_healthy
|
||||
validator-3:
|
||||
condition: service_healthy
|
||||
environment:
|
||||
NEXT_PUBLIC_API_URL: http://localhost:${BACKEND_PORT:-8000}
|
||||
NODE_ENV: development
|
||||
NEXT_PUBLIC_DEBUG: 'true'
|
||||
NODE_OPTIONS: "--max_old_space_size=4096"
|
||||
volumes:
|
||||
- ./frontend/src:/app/src
|
||||
- ./frontend/public:/app/public
|
||||
# Mount source code for hot reload
|
||||
- ./frontend:/app
|
||||
- /app/node_modules
|
||||
- /app/.next
|
||||
networks:
|
||||
- evoting_network
|
||||
stdin_open: true
|
||||
tty: true
|
||||
|
||||
volumes:
|
||||
evoting_data:
|
||||
logging:
|
||||
driver: "json-file"
|
||||
options:
|
||||
max-size: "50m"
|
||||
max-file: "5"
|
||||
# Run in development mode with verbose output
|
||||
command: npm run dev -- -H 0.0.0.0 --port 3000
|
||||
|
||||
networks:
|
||||
evoting_network:
|
||||
|
||||
@ -15,7 +15,13 @@ COPY frontend/ .
|
||||
ARG REACT_APP_API_URL=http://backend:8000
|
||||
ENV REACT_APP_API_URL=${REACT_APP_API_URL}
|
||||
|
||||
# Development environment variables for detailed logging
|
||||
ENV NODE_ENV=development
|
||||
ENV NEXT_PUBLIC_DEBUG=true
|
||||
ENV DEBUG=*
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
# Mode développement avec hot reload (npm start)
|
||||
CMD ["npm", "start"]
|
||||
# Mode développement avec hot reload et logs verbeux
|
||||
# --turbopack-trace=verbose pour plus de détails
|
||||
CMD ["npm", "run", "dev", "--", "-H", "0.0.0.0", "--port", "3000"]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user