commands/development/setup-hot-reload.md

Set up a hot-reloading development server for instant code changes.

Your task:

1. Detect the project type and framework:

   • React/Vue/Angular (Vite, Webpack, etc.)
   • Node.js/Express (nodemon, node --watch)
   • Python (Flask/Django with auto-reload)
   • Static sites (live-server, browser-sync)

2. Configure hot reloading based on the stack:

   • Install necessary dev dependencies
   • Update configuration files
   • Set up file watching
   • Configure port and proxy settings

3. Create or update dev scripts:

   "scripts": {
     "dev": "appropriate-dev-server --watch",
     "start": "production-command"
   }
   

4. Optimize for performance:

   • Configure file watch patterns
   • Exclude unnecessary directories
   • Set up source maps
   • Enable HMR (Hot Module Replacement) if available

5. Document the dev server usage:

   • How to start the dev server
   • Available options and flags
   • Port configuration
   • Troubleshooting common issues

Ensure instant feedback on code changes for optimal development workflow.