Alexis Bruneteau 41e7fc08ed 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>

2025-11-11 19:18:42 +01:00

1.9 KiB

Raw Blame History

Quick Development Mode Setup

⚡ 30-Second Start

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

./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

./dev-mode.sh stop

📝 Edit Files

Edit any file in frontend/ directory
Save
Next.js detects change (~500ms)
Browser auto-refreshes
See console logs in terminal

No container rebuild needed! 🎉

🆘 Troubleshooting

Can't see logs?

./dev-mode.sh logs

Port 3000 in use?

lsof -ti:3000 | xargs kill -9
./dev-mode.sh start

Need a shell in container?

./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

✓ Start dev mode: ./dev-mode.sh start
✓ View logs: ./dev-mode.sh logs (in another terminal)
✓ Open browser: http://localhost:3000
✓ Edit some code and see instant updates!

For more info, see DEV_MODE.md

1.9 KiB Raw Blame History