name: hot-reload description: Development hot reload behavior. Auto-triggered when discussing file watching, rebuilds, or dev server.
Hot Reload Behavior
How file changes trigger rebuilds in development.
Quick Start
# Terminal 1: Start services
just dev
# Terminal 2: Watch for changes (REQUIRED for frontend hot reload)
just watch-templates
Architecture Overview
Pre-bundled frontend: astro/dist/ is committed to git. No Vite dev server at runtime.
| Component | How Changes Work |
|---|---|
| Frontend (Astro) | Build to astro/dist/, nginx serves immediately |
| Backend (Python) | uvicorn auto-reloads on file changes |
| Jinja2 templates | Auto-reload on request (no restart needed) |
Frontend (chokidar + Astro Build)
File watching is handled by just watch-templates running in a separate terminal.
| File Type | Watch Pattern | Rebuild Output |
|---|---|---|
.astro |
src/**/*.astro |
astro/dist/ |
.tsx/.ts |
src/**/*.{ts,tsx} |
astro/dist/ |
.css |
src/**/*.css |
astro/dist/_astro/*.css |
| React islands | src/islands/*.tsx |
astro/dist/islands/*.js |
Rebuild Process
- chokidar detects file change
- Triggers
pnpm build(Astro) - Output written to
astro/dist/ - nginx serves updated files immediately (bind mount)
- Browser refresh shows changes
Prerequisite: just watch-templates must be running.
Manual Build
If watch isn't running:
just build-astro
Committing Changes
After frontend changes, commit both source and dist:
git add astro/src/ astro/dist/
git commit -m "feat: Update frontend styles"
Backend (uvicorn --reload)
uvicorn watches Python files automatically.
| File Type | Behavior |
|---|---|
.py |
uvicorn auto-restarts (polling on Mac, inotify on Linux) |
| Jinja2 templates | Auto-reload on request (no restart needed) |
| Static files | Served directly by nginx, no restart needed |
No action needed - uvicorn handles Python file watching.
Jinja2 Templates
Templates in astro/dist/ auto-reload on each request:
- No container restart
- No build step
- Just refresh browser
Templates in astro/dist/layouts/ (Astro-built wrapper):
- Rebuild with
just build-astro - Or use
just watch-templates
Troubleshooting
Changes Don't Appear
-
Check watch is running:
docker compose exec -T frontend pgrep -f "chokidar"If no output:
just watch-templatesin new terminal -
Check for build errors:
docker compose logs frontend --tail=20 -
Force rebuild:
just build-astro -
Verify dist/ is updated:
ls -la astro/dist/
CSS Not Updating
CSS is compiled by Astro, not served directly.
- Verify
astro/src/styles/global.cssexists - Check
just watch-templatesis running - Look for
astro/dist/_astro/*.cssfile - Hard refresh browser (Cmd+Shift+R)
React Islands Not Updating
Islands are built separately:
# Check if islands exist
ls astro/dist/islands/
# Manual rebuild
docker compose exec astro pnpm build:islands
Python Changes Not Reloading
-
Check container is running:
docker compose ps backend -
Check logs for reload:
docker compose logs backend --tail=20 -
Restart if stuck:
docker compose restart backend
Verification
Use the workflow-verifier agent or /workflow-check command:
/workflow-check
This tests all hot reload paths and reports status.
File Type Quick Reference
| Change This | Requires | Appears After |
|---|---|---|
.astro page |
watch running | ~4s + refresh |
.css styles |
watch running | ~4s + refresh |
| React island | watch running | ~4s + refresh |
| Python code | nothing | ~2s (auto) |
| Jinja2 template | nothing | instant on refresh |
| Static file | nothing | instant on refresh |
Common Issues
| Symptom | Cause | Fix |
|---|---|---|
| No CSS changes | Watch not running | just watch-templates |
| Astro not rebuilding | chokidar not started | Restart frontend or run watch |
| Python not reloading | Container issue | docker compose restart backend |
| Islands stale | Cache issue | just fix-frontend-rebuild |
| Build errors | Syntax error | Check docker compose logs frontend |
Key Difference from Traditional Dev Servers
There is no Vite dev server running at runtime. The workflow is:
- Edit files in
astro/src/ - Watch process (or manual build) compiles to
astro/dist/ - nginx serves pre-built files from the bind-mounted directory
- No HMR - full page refresh needed
This architecture means:
- Simpler runtime (no dev server process)
-
astro/dist/is committed to git - CI uses pre-committed dist (no build step)
- Production-like serving even in development
chat Comments (0)
Sign in to join the discussion and leave a comment.
Skill Details
Related Skills
Build your own?
Join 12,000+ developers contributing to the Claude ecosystem.
No comments yet. Be the first to share your thoughts!