41e7fc08ed
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>
100 lines
1.9 KiB
Markdown
100 lines
1.9 KiB
Markdown
# 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)
|