create-aziz-app 2.0.10 → 2.0.11

package/bin/create-aziz-app.js

@@ -217,6 +217,18 @@ function setupCSSFramework(targetDir, framework) {
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">`
         );
         
+        // Ensure live reload script is present
+        if (!html.includes('live-reload-client.js')) {
+            html = html.replace(
+                '<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>',
+                `<!-- Live Reload (only active in development) -->
+    <script src="scripts/live-reload-client.js"></script>
+
+    <!-- Babel compiles JSX in the browser -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>`
+            );
+        }
+        
         // Add Bootstrap JS before closing body tag
         const bootstrapJS = `
     <!-- Bootstrap 5 JS -->
@@ -249,8 +261,32 @@ function setupCSSFramework(targetDir, framework) {
     </script>`
         );
         
+        // Ensure live reload script is present
+        if (!html.includes('live-reload-client.js')) {
+            html = html.replace(
+                '<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>',
+                `<!-- Live Reload (only active in development) -->
+    <script src="scripts/live-reload-client.js"></script>
+
+    <!-- Babel compiles JSX in the browser -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>`
+            );
+        }
+        
         // Update components
         updateComponentsForTailwind(targetDir);
+    } else {
+        // For 'none', ensure live reload script is present
+        if (!html.includes('live-reload-client.js')) {
+            html = html.replace(
+                '<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>',
+                `<!-- Live Reload (only active in development) -->
+    <script src="scripts/live-reload-client.js"></script>
+
+    <!-- Babel compiles JSX in the browser -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>`
+            );
+        }
     }
     // If 'none', keep globals.css as is
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "A React-like framework with state management, routing, and API routes - Create apps with auto-import, live reload, and Next.js-like features",
   "keywords": [
     "react",

package/template/app.html

@@ -11,6 +11,9 @@
     <!-- Global Styles -->
     <link rel="stylesheet" href="styles/globals.css">
 
+    <!-- Live Reload (only active in development) -->
+    <script src="scripts/live-reload-client.js"></script>
+
     <!-- Babel compiles JSX in the browser -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 </head>

package/template/docs/DEV-SERVER.md

@@ -2,15 +2,16 @@
 
 ## Overview
 
-The dev server provides a smooth development experience with live reload, automatic import generation, and file watching.
+The dev server provides a smooth development experience with live reload using WebSocket, automatic import generation, and file watching.
 
 ## Features
 
-### 🔄 Live Reload
+### 🔄 Live Reload (WebSocket-based)
 - **Automatic browser refresh** when you save files
 - **Visual indicator** in bottom-right corner shows connection status
-- **Smart caching** - forces cache clear on reload to always show latest changes
+- **WebSocket connection** - reliable, fast, no caching issues
 - **CSS hot reload** - instant updates without regenerating imports
+- **Always loaded** - script is part of your HTML, not injected
 
 ### 👀 File Watching
 The dev server watches these directories:
@@ -41,22 +42,36 @@ Then open the URL shown in console (usually `http://localhost:3000/`)
 ## Visual Indicators
 
 The live reload indicator in the bottom-right corner shows:
-- 🔌 **Connecting...** - Initial connection
-- ✅ **Live Reload Active** - Connected and watching (fades after 2s)
-- 🔄 **Reloading...** - Changes detected, refreshing page
-- ⚠️ **Reconnecting...** - Connection lost, attempting to reconnect
+- 🔌 **Connecting...** - Initial connection (gray/green)
+- ✅ **Live Reload** - Connected and watching (green, fades to 30%)
+- 🔄 **Reloading...** - Changes detected, refreshing page (blue)
+- ⚠️ **Disconnected** - Connection lost, attempting to reconnect (orange)
+- ❌ **Offline** - Max reconnection attempts reached (red)
+
+**Click the indicator** to manually reload the page.
 
 Hover over the indicator to make it fully visible.
 
 ## How It Works
 
 1. **Server starts** and generates initial imports
-2. **Browser connects** via Server-Sent Events (SSE)
-3. **File watcher** detects changes in watched directories
-4. **Debouncing** prevents multiple rapid reloads (300ms for CSS, 500ms for JS)
-5. **Import regeneration** (for JS/JSX changes only)
-6. **Browser notification** via SSE
-7. **Page reload** with cache busting
+2. **Browser loads** `live-reload-client.js` (always in HTML)
+3. **WebSocket connects** to dev server
+4. **File watcher** detects changes in watched directories
+5. **Debouncing** prevents multiple rapid reloads (300ms for CSS, 500ms for JS)
+6. **Import regeneration** (for JS/JSX changes only)
+7. **WebSocket message** sent to all connected browsers
+8. **Page reload** happens immediately
+
+## Why WebSocket?
+
+Previous versions used Server-Sent Events (SSE) with runtime injection, which had caching issues. The new approach:
+
+- ✅ **Always loaded** - Script is in HTML, not injected at runtime
+- ✅ **No caching issues** - Browser always has the script
+- ✅ **Bidirectional** - WebSocket allows two-way communication
+- ✅ **Reliable** - Built-in reconnection logic
+- ✅ **Fast** - Instant notifications, no polling
 
 ## Cache Control
 
@@ -67,28 +82,52 @@ Pragma: no-cache
 Expires: 0
 ```
 
-This ensures you always see the latest changes without needing Ctrl+Shift+R.
+Plus, `app.html` has meta tags:
+```html
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+<meta http-equiv="Pragma" content="no-cache">
+<meta http-equiv="Expires" content="0">
+```
 
 ## Troubleshooting
 
+### Indicator stuck on "Connecting..."?
+
+1. **Check dev server is running** - Terminal should show "✅ Dev server running"
+2. **Check browser console** (F12) - Look for WebSocket errors
+3. **Check port** - Browser URL should match server URL
+4. **Firewall** - Allow Node.js through firewall
+5. **Try different browser** - Rule out browser-specific issues
+
 ### Changes not showing?
-1. Check the visual indicator - is it green?
-2. Open browser console - look for "✅ Live reload connected"
-3. Check terminal - does it show "🔄 Notifying X browser(s) to reload..."?
-4. Try hard refresh once: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
+
+1. **Check indicator is green** - "✅ Live Reload"
+2. **Check terminal** - Should show "📝 Detected change: ..."
+3. **Check file was saved** - No unsaved indicator in editor
+4. **Check file location** - Must be in watched directories
+5. **Check for errors** - Browser console (F12) for JavaScript errors
+
+### WebSocket connection failed?
+
+1. **Port mismatch** - Check browser URL matches server port
+2. **Proxy/VPN** - May block WebSocket connections
+3. **Browser extension** - Ad blockers can interfere
+4. **Try incognito mode** - Rule out extensions
 
 ### Port already in use?
-The server will automatically try the next port (3001, 3002, etc.)
 
-### Live reload disconnected?
-The page will automatically try to reconnect after 2 seconds.
+The server automatically tries the next port. Check terminal for actual port:
+```
+🌐 Server running at http://localhost:3001/
+```
 
 ## Performance
 
 - **Debouncing** prevents reload spam when saving multiple files
 - **CSS-only changes** skip import regeneration for faster updates
-- **SSE connection** is lightweight and efficient
+- **WebSocket** is lightweight and efficient
 - **Multiple browsers** can connect simultaneously
+- **Automatic reconnection** if connection drops
 
 ## Development Tips
 
@@ -96,3 +135,50 @@ The page will automatically try to reconnect after 2 seconds.
 2. The visual indicator helps confirm live reload is working
 3. CSS changes are faster than JS changes (no import regeneration)
 4. Multiple browser tabs will all reload simultaneously
+5. Click the indicator to manually reload if needed
+
+## Production
+
+The live reload script only runs in development (localhost). In production:
+- Script detects non-localhost hostname
+- Exits immediately without connecting
+- No performance impact
+- No visual indicator
+
+## Technical Details
+
+### WebSocket Protocol
+
+The dev server implements a simple WebSocket server without external dependencies:
+- Uses Node.js `http` module's `upgrade` event
+- Performs WebSocket handshake manually
+- Sends text frames to connected clients
+- Handles connection cleanup automatically
+
+### Message Format
+
+Server sends a single message type:
+- `"reload"` - Triggers browser reload
+
+### Reconnection Logic
+
+Client attempts to reconnect:
+- Max 10 attempts
+- 2-second delay between attempts
+- Exponential backoff could be added if needed
+
+## Comparison with Other Tools
+
+| Feature | Aziz App | Live Server | Vite |
+|---------|----------|-------------|------|
+| Setup | Zero config | Zero config | Config file |
+| Speed | Fast | Fast | Very fast |
+| WebSocket | ✅ | ✅ | ✅ |
+| Auto-import | ✅ | ❌ | ✅ |
+| Visual indicator | ✅ | ❌ | ❌ |
+| Dependencies | None | None | Many |
+
+## Summary
+
+The dev server provides a reliable, fast live reload experience using WebSocket. The script is always loaded (not injected), eliminating caching issues. File watching, debouncing, and automatic reconnection make development smooth and efficient.
+

package/template/docs/HOW-IT-WORKS.md

@@ -0,0 +1,362 @@
+# How It Works
+
+## System Architecture
+
+Aziz App has three main systems working together:
+
+1. **Auto-Import System** - Automatically generates script tags
+2. **Live Reload System** - Automatically refreshes browser on changes
+3. **Routing System** - File-based routing with auto-registration
+
+## 1. Auto-Import System
+
+### Files Involved:
+- `scripts/generate-imports.js` - Scans folders and generates script tags
+- `app.html` - Contains the generated script tags
+- `app.config.js` - Configuration (auto-generated)
+
+### How It Works:
+
+```
+1. Dev server starts
+2. Runs generate-imports.js
+3. Scans: api/, components/, pages/
+4. Generates <script> tags for each file
+5. Updates app.html (body section only)
+6. Browser loads all scripts
+```
+
+### What Gets Generated:
+
+```html
+<!-- Load core modules -->
+<script type="text/babel" src="modules/router.js"></script>
+<script type="text/babel" src="modules/state.js"></script>
+<script type="text/babel" src="modules/api.js"></script>
+
+<!-- Load API routes -->
+<script type="text/babel" src="api/hello.js"></script>
+
+<!-- Load shared components -->
+<script type="text/babel" src="components/Navbar.jsx"></script>
+
+<!-- Load pages -->
+<script type="text/babel" src="pages/Home.jsx"></script>
+
+<!-- Start the app -->
+<script type="text/babel">
+    startApp();
+</script>
+```
+
+### When It Runs:
+
+- **On server start** - Initial generation
+- **On file change** - When .js/.jsx files are added/removed/renamed
+- **Manual** - Run `npm run build`
+
+### What It Doesn't Touch:
+
+- `<head>` section - Styles, meta tags, live-reload script
+- Files outside watched folders
+- Non-.js/.jsx files
+
+## 2. Live Reload System
+
+### Files Involved:
+- `scripts/live-reload-client.js` - Browser-side WebSocket client
+- `scripts/dev-server.js` - Server-side WebSocket server + file watcher
+- `app.html` - Loads the client script
+
+### How It Works:
+
+```
+1. Browser loads app.html
+2. app.html includes live-reload-client.js
+3. Client creates WebSocket connection
+4. Server watches: api/, components/, pages/, modules/, styles/
+5. File changes detected
+6. Server sends "reload" message via WebSocket
+7. Client receives message
+8. Browser reloads page
+```
+
+### Architecture:
+
+```
+┌─────────────┐                    ┌─────────────┐
+│   Browser   │                    │ Dev Server  │
+│             │                    │             │
+│  live-      │  WebSocket         │  File       │
+│  reload-    │◄──────────────────►│  Watcher    │
+│  client.js  │  "reload" message  │             │
+│             │                    │             │
+└─────────────┘                    └─────────────┘
+       │                                  │
+       │ Reload page                      │ Detects changes
+       ▼                                  ▼
+   app.html                         api/, pages/, etc.
+```
+
+### Why WebSocket?
+
+- **Reliable** - Bidirectional, persistent connection
+- **Fast** - Instant notifications
+- **Simple** - No external dependencies
+- **No caching** - Script is always loaded, not injected
+
+### Connection States:
+
+1. **Connecting** (gray) - Initial connection
+2. **Connected** (green) - Ready, watching for changes
+3. **Reloading** (blue) - Change detected, reloading
+4. **Disconnected** (orange) - Connection lost, reconnecting
+5. **Offline** (red) - Max reconnection attempts reached
+
+## 3. Routing System
+
+### Files Involved:
+- `modules/router.js` - Core routing engine
+- `pages/*.jsx` - Page components
+- `app.html` - Root element (#root)
+
+### How It Works:
+
+```
+1. Browser loads all page files
+2. Each page defines a function: HomePage(), AboutPage(), etc.
+3. startApp() calls autoRegisterPages()
+4. Scans window for functions ending with "Page"
+5. Registers: HomePage → "home", AboutPage → "about"
+6. URL hash changes: #/about
+7. Router finds AboutPage() function
+8. Renders it into #root
+```
+
+### Auto-Registration:
+
+```javascript
+// In pages/About.jsx
+function AboutPage() {
+    return <div><h1>About</h1></div>;
+}
+
+// Router automatically does:
+routes["about"] = AboutPage;
+```
+
+### Manual Registration (Optional):
+
+```javascript
+// For custom route names
+registerPage("user-profile", UserProfilePage);
+```
+
+## How They Work Together
+
+### Startup Sequence:
+
+```
+1. Run: npm run dev
+2. Dev server starts
+3. Runs generate-imports.js
+4. Scans folders, updates app.html
+5. Starts HTTP server on port 3000
+6. Starts WebSocket server
+7. Starts file watchers
+8. Ready! ✅
+```
+
+### Browser Load Sequence:
+
+```
+1. Browser requests http://localhost:3000/
+2. Server sends app.html
+3. Browser loads:
+   - styles/globals.css
+   - scripts/live-reload-client.js (connects to WebSocket)
+   - Babel standalone
+   - modules/router.js, state.js, api.js
+   - api/*.js
+   - components/*.jsx
+   - pages/*.jsx
+4. Calls startApp()
+5. Auto-registers pages
+6. Renders current route
+7. Done! ✅
+```
+
+### File Change Sequence:
+
+```
+1. Developer edits pages/Home.jsx
+2. File watcher detects change
+3. Debounce timer starts (500ms)
+4. Timer expires
+5. Runs generate-imports.js
+6. Updates app.html
+7. Sends "reload" via WebSocket
+8. Browser receives message
+9. Browser reloads
+10. New version loads
+11. Done! ✅
+```
+
+### CSS Change Sequence (Faster):
+
+```
+1. Developer edits styles/globals.css
+2. File watcher detects change
+3. Debounce timer starts (300ms)
+4. Timer expires
+5. Skips generate-imports (not needed for CSS)
+6. Sends "reload" via WebSocket
+7. Browser reloads
+8. Done! ✅
+```
+
+## File Organization
+
+### What Goes Where:
+
+```
+template/
+├── app.html              # Main HTML (auto-generated scripts)
+├── modules/              # Core system (don't modify)
+│   ├── router.js         # Routing + rendering
+│   ├── state.js          # State management
+│   └── api.js            # API system
+├── scripts/              # Build tools (don't modify)
+│   ├── dev-server.js     # Dev server + WebSocket
+│   ├── generate-imports.js  # Auto-import generator
+│   └── live-reload-client.js  # Browser WebSocket client
+├── api/                  # Your API routes (auto-imported)
+├── components/           # Your components (auto-imported)
+├── pages/                # Your pages (auto-imported)
+└── styles/               # Your styles (watched for changes)
+```
+
+### What You Modify:
+
+- ✅ `api/` - Add your API routes
+- ✅ `components/` - Add your components
+- ✅ `pages/` - Add your pages
+- ✅ `styles/` - Add your styles
+- ❌ `modules/` - Core system
+- ❌ `scripts/` - Build tools
+- ⚠️ `app.html` - Only modify `<head>` section
+
+## Key Concepts
+
+### 1. Auto-Import is Automatic
+
+You don't need to:
+- Add `<script>` tags manually
+- Run build commands after creating files
+- Restart the dev server
+
+Just create a file and save it!
+
+### 2. Live Reload is Always On
+
+The `live-reload-client.js` script:
+- Is always loaded (in `<head>`)
+- Only runs on localhost
+- Connects automatically
+- Reconnects if disconnected
+- Safe for production (does nothing)
+
+### 3. Pages Auto-Register
+
+You don't need to:
+- Call `registerPage()` (optional)
+- Import pages manually
+- Configure routes
+
+Just name your function `YourNamePage()` and it works!
+
+### 4. Everything is Watched
+
+The dev server watches:
+- `api/` - API routes
+- `components/` - Components
+- `pages/` - Pages
+- `modules/` - Core modules
+- `styles/` - Stylesheets
+
+Changes trigger:
+- Import regeneration (for .js/.jsx)
+- Browser reload (for everything)
+
+## Performance Optimizations
+
+### 1. Debouncing
+
+Prevents multiple rapid reloads:
+- CSS changes: 300ms delay
+- JS/JSX changes: 500ms delay
+
+### 2. Selective Regeneration
+
+- CSS changes: Skip import generation
+- JS/JSX changes: Regenerate imports
+
+### 3. WebSocket Efficiency
+
+- Single persistent connection
+- Minimal message size ("reload")
+- Automatic cleanup on disconnect
+
+### 4. Smart Watching
+
+- Only watches specific folders
+- Ignores non-code files
+- Recursive: false (performance)
+
+## Troubleshooting
+
+### Import Generation Issues
+
+**Problem:** New file not showing up
+
+**Check:**
+1. File is in `api/`, `components/`, or `pages/`
+2. File ends with `.js` or `.jsx`
+3. Dev server is running
+4. Check terminal for errors
+
+**Solution:** Run `npm run build` manually
+
+### Live Reload Issues
+
+**Problem:** Changes not showing
+
+**Check:**
+1. Indicator is green (✅ Live Reload)
+2. Dev server is running
+3. File was saved
+4. Browser console for errors
+
+**Solution:** Click indicator to manually reload
+
+### Routing Issues
+
+**Problem:** Page shows 404
+
+**Check:**
+1. Function name ends with "Page"
+2. File is loaded (check app.html)
+3. Browser console shows auto-registration
+4. URL hash is correct (#/about)
+
+**Solution:** Add manual registration
+
+## Summary
+
+Aziz App combines three systems:
+
+1. **Auto-Import** - Scans folders, generates script tags
+2. **Live Reload** - WebSocket connection, file watching
+3. **Auto-Registration** - Scans functions, registers routes
+
+Together, they provide a seamless development experience with zero configuration!

package/template/package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "aziz-app",
+  "version": "1.0.2",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "aziz-app",
+      "version": "1.0.2",
+      "license": "ISC"
+    }
+  }
+}

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aziz-app",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple, clean React-like framework with state management, routing, and API routes",
   "main": "app.html",
   "scripts": {

package/template/scripts/dev-server.js

@@ -6,7 +6,7 @@ const http = require('http');
 const { exec } = require('child_process');
 
 const PORT = process.env.PORT || 3000;
-const clients = []; // Store SSE clients for live reload
+const clients = new Set();
 
 console.log('🚀 Dev server starting...\n');
 
@@ -27,193 +27,117 @@ function generateImports() {
 // Notify all clients to reload
 function notifyClients() {
     const timestamp = new Date().toLocaleTimeString();
-    console.log(`🔄 [${timestamp}] Notifying ${clients.length} browser(s) to reload...`);
+    console.log(`🔄 [${timestamp}] Notifying ${clients.size} browser(s) to reload...`);
     clients.forEach(client => {
-        client.write('data: reload\n\n');
-    });
-}
-
-// Live reload script to inject
-function getLiveReloadScript() {
-    return `
-<script>
-    (function() {
-        // Create visual indicator
-        const indicator = document.createElement('div');
-        indicator.id = 'live-reload-indicator';
-        indicator.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: #4caf50; color: white; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-family: monospace; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s;';
-        indicator.textContent = '🔌 Connecting...';
-        document.body.appendChild(indicator);
-        
-        // Live reload client
-        console.log('🔌 Connecting to live reload at ' + window.location.origin + '/live-reload');
-        
-        let evtSource;
-        let reconnectAttempts = 0;
-        const maxReconnectAttempts = 5;
-        
-        function connect() {
-            try {
-                evtSource = new EventSource('/live-reload');
-                
-                evtSource.onopen = function() {
-                    console.log('✅ Live reload connected');
-                    reconnectAttempts = 0;
-                    indicator.style.background = '#4caf50';
-                    indicator.textContent = '✅ Live Reload Active';
-                    setTimeout(function() {
-                        indicator.style.opacity = '0.3';
-                    }, 2000);
-                };
-                
-                evtSource.onmessage = function(event) {
-                    if (event.data === 'reload') {
-                        console.log('🔄 Changes detected, reloading...');
-                        indicator.style.opacity = '1';
-                        indicator.style.background = '#2196f3';
-                        indicator.textContent = '🔄 Reloading...';
-                        setTimeout(function() {
-                            // Add timestamp to force cache bust
-                            var url = window.location.href.split('?')[0];
-                            window.location.href = url + '?t=' + Date.now();
-                        }, 100);
-                    }
-                };
-                
-                evtSource.onerror = function(err) {
-                    console.log('⚠️ Live reload connection error');
-                    indicator.style.background = '#ff9800';
-                    indicator.style.opacity = '1';
-                    indicator.textContent = '⚠️ Connection Lost';
-                    
-                    if (evtSource) {
-                        evtSource.close();
-                    }
-                    
-                    if (reconnectAttempts < maxReconnectAttempts) {
-                        reconnectAttempts++;
-                        console.log('Reconnecting... attempt ' + reconnectAttempts);
-                        setTimeout(connect, 2000);
-                    } else {
-                        indicator.textContent = '❌ Reload Failed';
-                        console.log('Max reconnection attempts reached. Please refresh manually.');
-                    }
-                };
-            } catch (e) {
-                console.error('Failed to create EventSource:', e);
-                indicator.style.background = '#f44336';
-                indicator.textContent = '❌ Connection Error';
-            }
+        try {
+            client.send('reload');
+        } catch (e) {
+            clients.delete(client);
         }
-        
-        connect();
-        
-        // Show indicator on hover
-        indicator.addEventListener('mouseenter', function() {
-            indicator.style.opacity = '1';
-        });
-        indicator.addEventListener('mouseleave', function() {
-            if (indicator.textContent.includes('Active')) {
-                indicator.style.opacity = '0.3';
-            }
-        });
-    })();
-</script>
-`;
+    });
 }
 
 // Create HTTP server
-function createServer(port) {
-    return http.createServer((req, res) => {
-        // Handle live reload SSE endpoint
-        if (req.url === '/live-reload' || req.url.startsWith('/live-reload?')) {
-            res.writeHead(200, {
-                'Content-Type': 'text/event-stream',
+const server = http.createServer((req, res) => {
+    // Strip query parameters for file serving (cache busting)
+    let filePath = '.' + req.url.split('?')[0];
+    if (filePath === './') {
+        filePath = './app.html';
+    }
+
+    const extname = String(path.extname(filePath)).toLowerCase();
+    const mimeTypes = {
+        '.html': 'text/html',
+        '.js': 'text/javascript',
+        '.jsx': 'text/javascript',
+        '.css': 'text/css',
+        '.json': 'application/json',
+        '.png': 'image/png',
+        '.jpg': 'image/jpg',
+        '.gif': 'image/gif',
+        '.svg': 'image/svg+xml',
+        '.wav': 'audio/wav',
+        '.mp4': 'video/mp4',
+        '.woff': 'application/font-woff',
+        '.ttf': 'application/font-ttf',
+        '.eot': 'application/vnd.ms-fontobject',
+        '.otf': 'application/font-otf',
+        '.wasm': 'application/wasm'
+    };
+
+    const contentType = mimeTypes[extname] || 'application/octet-stream';
+
+    fs.readFile(filePath, (error, content) => {
+        if (error) {
+            if (error.code === 'ENOENT') {
+                res.writeHead(404, { 'Content-Type': 'text/html' });
+                res.end('<h1>404 - File Not Found</h1>', 'utf-8');
+            } else {
+                res.writeHead(500);
+                res.end('Server Error: ' + error.code, 'utf-8');
+            }
+        } else {
+            // Add cache control headers to prevent caching during development
+            res.writeHead(200, { 
+                'Content-Type': contentType,
                 'Cache-Control': 'no-cache, no-store, must-revalidate',
-                'Connection': 'keep-alive',
-                'Access-Control-Allow-Origin': '*',
-                'X-Accel-Buffering': 'no'
+                'Pragma': 'no-cache',
+                'Expires': '0'
             });
-            
-            // Send initial connection message
-            res.write(':ok\n\n');
-            
-            clients.push(res);
-            const timestamp = new Date().toLocaleTimeString();
-            console.log(`🔌 [${timestamp}] Browser connected for live reload (${clients.length} total)`);
-            
-            req.on('close', () => {
-                const index = clients.indexOf(res);
-                if (index !== -1) {
-                    clients.splice(index, 1);
-                }
-                const closeTime = new Date().toLocaleTimeString();
-                console.log(`🔌 [${closeTime}] Browser disconnected (${clients.length} remaining)`);
-            });
-            
-            return;
+            res.end(content, 'utf-8');
         }
+    });
+});
 
-        // Strip query parameters for file serving (cache busting)
-        let filePath = '.' + req.url.split('?')[0];
-        if (filePath === './') {
-            filePath = './app.html';
+// WebSocket implementation (simple, no external dependencies)
+server.on('upgrade', (req, socket, head) => {
+    // Simple WebSocket handshake
+    const key = req.headers['sec-websocket-key'];
+    const acceptKey = require('crypto')
+        .createHash('sha1')
+        .update(key + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')
+        .digest('base64');
+
+    socket.write(
+        'HTTP/1.1 101 Switching Protocols\r\n' +
+        'Upgrade: websocket\r\n' +
+        'Connection: Upgrade\r\n' +
+        `Sec-WebSocket-Accept: ${acceptKey}\r\n` +
+        '\r\n'
+    );
+
+    const timestamp = new Date().toLocaleTimeString();
+    console.log(`🔌 [${timestamp}] Browser connected (${clients.size + 1} total)`);
+
+    // Wrap socket with send method
+    const client = {
+        socket: socket,
+        send: function(message) {
+            const buffer = Buffer.from(message);
+            const frame = Buffer.alloc(buffer.length + 2);
+            frame[0] = 0x81; // Text frame
+            frame[1] = buffer.length;
+            buffer.copy(frame, 2);
+            socket.write(frame);
         }
+    };
 
-        const extname = String(path.extname(filePath)).toLowerCase();
-        const mimeTypes = {
-            '.html': 'text/html',
-            '.js': 'text/javascript',
-            '.jsx': 'text/javascript',
-            '.css': 'text/css',
-            '.json': 'application/json',
-            '.png': 'image/png',
-            '.jpg': 'image/jpg',
-            '.gif': 'image/gif',
-            '.svg': 'image/svg+xml',
-            '.wav': 'audio/wav',
-            '.mp4': 'video/mp4',
-            '.woff': 'application/font-woff',
-            '.ttf': 'application/font-ttf',
-            '.eot': 'application/vnd.ms-fontobject',
-            '.otf': 'application/font-otf',
-            '.wasm': 'application/wasm'
-        };
+    clients.add(client);
 
-        const contentType = mimeTypes[extname] || 'application/octet-stream';
+    socket.on('close', () => {
+        clients.delete(client);
+        const closeTime = new Date().toLocaleTimeString();
+        console.log(`🔌 [${closeTime}] Browser disconnected (${clients.size} remaining)`);
+    });
 
-        fs.readFile(filePath, (error, content) => {
-            if (error) {
-                if (error.code === 'ENOENT') {
-                    res.writeHead(404, { 'Content-Type': 'text/html' });
-                    res.end('<h1>404 - File Not Found</h1>', 'utf-8');
-                } else {
-                    res.writeHead(500);
-                    res.end('Server Error: ' + error.code, 'utf-8');
-                }
-            } else {
-                // Inject live reload script into HTML files
-                if (extname === '.html') {
-                    content = content.toString().replace('</body>', getLiveReloadScript() + '</body>');
-                }
-                
-                // Add cache control headers to prevent caching during development
-                res.writeHead(200, { 
-                    'Content-Type': contentType,
-                    'Cache-Control': 'no-cache, no-store, must-revalidate',
-                    'Pragma': 'no-cache',
-                    'Expires': '0'
-                });
-                res.end(content, 'utf-8');
-            }
-        });
+    socket.on('error', (err) => {
+        clients.delete(client);
+        console.log('⚠️ Socket error:', err.message);
     });
-}
+});
 
 // Function to start server on available port
 function startServer(port) {
-    const server = createServer(port);
-    
     server.listen(port, () => {
         console.log(`🌐 Server running at http://localhost:${port}/`);
         console.log(`📱 Open http://localhost:${port}/ in your browser\n`);

package/template/scripts/live-reload-client.js

@@ -0,0 +1,105 @@
+// Live Reload Client - Always loaded, connects to dev server
+(function() {
+    // Only run in development (when dev server is running)
+    const isDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+    if (!isDev) return;
+
+    // Create visual indicator
+    const indicator = document.createElement('div');
+    indicator.id = 'live-reload-indicator';
+    indicator.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background: #4caf50; color: white; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-family: monospace; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s; cursor: pointer;';
+    indicator.textContent = '🔌 Connecting...';
+    
+    // Wait for body to be ready
+    function addIndicator() {
+        if (document.body) {
+            document.body.appendChild(indicator);
+        } else {
+            setTimeout(addIndicator, 100);
+        }
+    }
+    addIndicator();
+
+    let ws;
+    let reconnectAttempts = 0;
+    const maxReconnectAttempts = 10;
+    const port = window.location.port || 3000;
+
+    function connect() {
+        try {
+            console.log('🔌 Connecting to live reload WebSocket...');
+            ws = new WebSocket(`ws://localhost:${port}`);
+
+            ws.onopen = function() {
+                console.log('✅ Live reload connected');
+                reconnectAttempts = 0;
+                indicator.style.background = '#4caf50';
+                indicator.textContent = '✅ Live Reload';
+                setTimeout(function() {
+                    indicator.style.opacity = '0.3';
+                }, 2000);
+            };
+
+            ws.onmessage = function(event) {
+                if (event.data === 'reload') {
+                    console.log('🔄 Changes detected, reloading...');
+                    indicator.style.opacity = '1';
+                    indicator.style.background = '#2196f3';
+                    indicator.textContent = '🔄 Reloading...';
+                    
+                    // Small delay to show the indicator
+                    setTimeout(function() {
+                        window.location.reload();
+                    }, 100);
+                }
+            };
+
+            ws.onerror = function(err) {
+                console.log('⚠️ WebSocket error:', err);
+            };
+
+            ws.onclose = function() {
+                console.log('⚠️ Live reload disconnected');
+                indicator.style.background = '#ff9800';
+                indicator.style.opacity = '1';
+                indicator.textContent = '⚠️ Disconnected';
+
+                // Try to reconnect
+                if (reconnectAttempts < maxReconnectAttempts) {
+                    reconnectAttempts++;
+                    console.log(`Reconnecting... attempt ${reconnectAttempts}`);
+                    setTimeout(connect, 2000);
+                } else {
+                    indicator.textContent = '❌ Offline';
+                    indicator.style.background = '#f44336';
+                }
+            };
+        } catch (e) {
+            console.error('Failed to create WebSocket:', e);
+            indicator.style.background = '#f44336';
+            indicator.textContent = '❌ Error';
+        }
+    }
+
+    // Start connection when page loads
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', connect);
+    } else {
+        connect();
+    }
+
+    // Show indicator on hover
+    indicator.addEventListener('mouseenter', function() {
+        indicator.style.opacity = '1';
+    });
+    indicator.addEventListener('mouseleave', function() {
+        if (indicator.textContent.includes('Live Reload')) {
+            indicator.style.opacity = '0.3';
+        }
+    });
+
+    // Click to manually reload
+    indicator.addEventListener('click', function() {
+        window.location.reload();
+    });
+})();