create-aziz-app 2.0.11 → 2.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "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/README.md

@@ -125,10 +125,12 @@ navigate("about");
 
 ### API Routes
 ```javascript
-// api/todos.js
-registerApiRoute('todos', async (req, res) => {
-    return res.status(200).json({ todos: [] });
-});
+// api/todos.js - Runs on SERVER (Node.js)!
+module.exports = async function handler(req, res) {
+    if (req.method === 'GET') {
+        return res.status(200).json({ todos: [] });
+    }
+};
 
 // Use in components
 const response = await fetchApi('/api/todos');
@@ -152,9 +154,11 @@ The CLI will automatically set up your chosen framework!
 
 - **[Getting Started](docs/GETTING-STARTED.md)** - Complete setup guide
 - **[Auto-Registration](docs/AUTO-REGISTRATION.md)** - How pages auto-register
-- **[API Guide](docs/API-GUIDE.md)** - How to create API routes
+- **[API Routes](docs/API-ROUTES.md)** - Server-side API endpoints (like Next.js!)
+- **[API Guide](docs/API-GUIDE.md)** - Legacy API guide
 - **[Auto-Import](docs/AUTO-IMPORT.md)** - Auto-import system details
 - **[Dev Server](docs/DEV-SERVER.md)** - Live reload and development
+- **[How It Works](docs/HOW-IT-WORKS.md)** - System architecture
 - **[Troubleshooting](docs/TROUBLESHOOTING.md)** - Fix common issues
 - **[Quick Start](docs/QUICK-START.md)** - Quick examples
 

package/template/api/hello.js

@@ -1,9 +1,8 @@
-/** @jsx h */
+// API Route: /api/hello
+// This runs on the SERVER (Node.js), not in the browser!
 
-// Example API route: /api/hello
-// Simple hello world API endpoint
-
-registerApiRoute('hello', async (req, res) => {
+// Export the handler function (like Next.js)
+module.exports = async function handler(req, res) {
     const name = req.query.name || 'World';
     
     return res.status(200).json({
@@ -11,4 +10,4 @@ registerApiRoute('hello', async (req, res) => {
         timestamp: new Date().toISOString(),
         method: req.method
     });
-});
+};

package/template/api/users.js

@@ -1,17 +1,15 @@
-/** @jsx h */
+// API Route: /api/users
+// This runs on the SERVER (Node.js), not in the browser!
 
-// Example API route: /api/users
-// This simulates a backend API endpoint
-
-// Mock database
+// Mock database (in real app, use a real database)
 const users = [
     { id: 1, name: 'Aziz Ahmed', email: 'aziz@example.com' },
     { id: 2, name: 'John Doe', email: 'john@example.com' },
     { id: 3, name: 'Jane Smith', email: 'jane@example.com' }
 ];
 
-// Register the API route
-registerApiRoute('users', async (req, res) => {
+// Export the handler function (like Next.js)
+module.exports = async function handler(req, res) {
     // Handle different HTTP methods
     switch (req.method) {
         case 'GET':
@@ -59,4 +57,4 @@ registerApiRoute('users', async (req, res) => {
         default:
             return res.status(405).json({ error: 'Method not allowed' });
     }
-});
+};

package/template/app.html

@@ -28,31 +28,27 @@
     <!-- Footer is always visible -->
     <div id="footer"></div>
 
-    <!-- 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>
-    <script type="text/babel" src="api/users.js"></script>
-
-    <!-- Load shared components -->
-    <script type="text/babel" src="components/Counter.jsx"></script>
-    <script type="text/babel" src="components/Footer.jsx"></script>
-    <script type="text/babel" src="components/Navbar.jsx"></script>
-
-    <!-- Load pages -->
-    <script type="text/babel" src="pages/About.jsx"></script>
-    <script type="text/babel" src="pages/ApiDemo.jsx"></script>
-    <script type="text/babel" src="pages/Contact.jsx"></script>
-    <script type="text/babel" src="pages/Example.jsx"></script>
-    <script type="text/babel" src="pages/Home.jsx"></script>
-    <script type="text/babel" src="pages/test.jsx"></script>
-
-    <!-- Start the app -->
-    <script type="text/babel">
-        startApp();
+    <!-- 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 shared components -->
+    <script type="text/babel" src="components/Counter.jsx"></script>
+    <script type="text/babel" src="components/Footer.jsx"></script>
+    <script type="text/babel" src="components/Navbar.jsx"></script>
+
+    <!-- Load pages -->
+    <script type="text/babel" src="pages/About.jsx"></script>
+    <script type="text/babel" src="pages/ApiDemo.jsx"></script>
+    <script type="text/babel" src="pages/Contact.jsx"></script>
+    <script type="text/babel" src="pages/Example.jsx"></script>
+    <script type="text/babel" src="pages/Home.jsx"></script>
+    <script type="text/babel" src="pages/test.jsx"></script>
+
+    <!-- Start the app -->
+    <script type="text/babel">
+        startApp();
     </script>
 
 </body>

package/template/docs/API-ROUTES.md

@@ -0,0 +1,538 @@
+# API Routes Guide
+
+## Overview
+
+API routes run on the **SERVER** (Node.js), just like Next.js! They're real backend endpoints, not client-side mocks.
+
+## How It Works
+
+```
+Browser                    Dev Server (Node.js)
+   │                              │
+   │  GET /api/users              │
+   ├─────────────────────────────►│
+   │                              │ Loads api/users.js
+   │                              │ Executes handler()
+   │                              │
+   │  { users: [...] }            │
+   │◄─────────────────────────────┤
+   │                              │
+```
+
+## Creating an API Route
+
+### File Structure
+
+```
+api/
+├── hello.js       → /api/hello
+├── users.js       → /api/users
+└── posts.js       → /api/posts
+```
+
+Each file in `api/` becomes an endpoint!
+
+### Basic Example
+
+```javascript
+// api/hello.js
+
+module.exports = async function handler(req, res) {
+    return res.status(200).json({
+        message: 'Hello from the server!'
+    });
+};
+```
+
+### Request Object
+
+The `req` object contains:
+
+```javascript
+{
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+    body: {},           // Parsed JSON body
+    query: {},          // URL query parameters
+    headers: {},        // Request headers
+    url: '/api/users?id=1'
+}
+```
+
+### Response Object
+
+The `res` object has these methods:
+
+```javascript
+// Set status code
+res.status(200)
+
+// Send JSON response
+res.json({ data: 'value' })
+
+// Send text response
+res.send('Hello')
+
+// Set custom header
+res.setHeader('X-Custom', 'value')
+
+// Chain methods
+res.status(201).json({ created: true })
+```
+
+## Examples
+
+### GET Request
+
+```javascript
+// api/users.js
+
+const users = [
+    { id: 1, name: 'Aziz' },
+    { id: 2, name: 'John' }
+];
+
+module.exports = async function handler(req, res) {
+    if (req.method === 'GET') {
+        // Get specific user
+        if (req.query.id) {
+            const user = users.find(u => u.id === parseInt(req.query.id));
+            if (user) {
+                return res.status(200).json(user);
+            }
+            return res.status(404).json({ error: 'User not found' });
+        }
+        
+        // Get all users
+        return res.status(200).json(users);
+    }
+    
+    return res.status(405).json({ error: 'Method not allowed' });
+};
+```
+
+**Usage:**
+```javascript
+// Get all users
+const response = await fetchApi('/api/users');
+const users = await response.json();
+
+// Get specific user
+const response = await fetchApi('/api/users?id=1');
+const user = await response.json();
+```
+
+### POST Request
+
+```javascript
+// api/users.js
+
+module.exports = async function handler(req, res) {
+    if (req.method === 'POST') {
+        const { name, email } = req.body;
+        
+        // Validate
+        if (!name || !email) {
+            return res.status(400).json({ 
+                error: 'Name and email are required' 
+            });
+        }
+        
+        // Create user
+        const newUser = {
+            id: Date.now(),
+            name,
+            email
+        };
+        
+        return res.status(201).json(newUser);
+    }
+};
+```
+
+**Usage:**
+```javascript
+const response = await fetchApi('/api/users', {
+    method: 'POST',
+    body: JSON.stringify({
+        name: 'Aziz',
+        email: 'aziz@example.com'
+    })
+});
+const user = await response.json();
+```
+
+### PUT Request
+
+```javascript
+// api/users.js
+
+module.exports = async function handler(req, res) {
+    if (req.method === 'PUT') {
+        const userId = req.query.id;
+        const updates = req.body;
+        
+        // Update user logic here
+        
+        return res.status(200).json({ 
+            message: 'User updated',
+            user: updatedUser 
+        });
+    }
+};
+```
+
+**Usage:**
+```javascript
+const response = await fetchApi('/api/users?id=1', {
+    method: 'PUT',
+    body: JSON.stringify({
+        name: 'New Name'
+    })
+});
+```
+
+### DELETE Request
+
+```javascript
+// api/users.js
+
+module.exports = async function handler(req, res) {
+    if (req.method === 'DELETE') {
+        const userId = req.query.id;
+        
+        // Delete user logic here
+        
+        return res.status(200).json({ 
+            message: 'User deleted' 
+        });
+    }
+};
+```
+
+**Usage:**
+```javascript
+const response = await fetchApi('/api/users?id=1', {
+    method: 'DELETE'
+});
+```
+
+### Multiple Methods
+
+```javascript
+// api/users.js
+
+module.exports = async function handler(req, res) {
+    switch (req.method) {
+        case 'GET':
+            // Handle GET
+            return res.status(200).json({ method: 'GET' });
+            
+        case 'POST':
+            // Handle POST
+            return res.status(201).json({ method: 'POST' });
+            
+        case 'PUT':
+            // Handle PUT
+            return res.status(200).json({ method: 'PUT' });
+            
+        case 'DELETE':
+            // Handle DELETE
+            return res.status(200).json({ method: 'DELETE' });
+            
+        default:
+            return res.status(405).json({ 
+                error: 'Method not allowed' 
+            });
+    }
+};
+```
+
+## Using in Components
+
+### Basic Fetch
+
+```jsx
+function MyComponent() {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(false);
+    
+    const loadData = async () => {
+        setLoading(true);
+        try {
+            const response = await fetchApi('/api/users');
+            const users = await response.json();
+            setData(users);
+        } catch (error) {
+            console.error('Error:', error);
+        }
+        setLoading(false);
+    };
+    
+    return (
+        <div>
+            <button onClick={loadData}>Load Users</button>
+            {loading && <p>Loading...</p>}
+            {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+        </div>
+    );
+}
+```
+
+### With Error Handling
+
+```jsx
+const [error, setError] = useState(null);
+
+const loadData = async () => {
+    try {
+        const response = await fetchApi('/api/users');
+        
+        if (!response.ok) {
+            throw new Error('Failed to fetch');
+        }
+        
+        const users = await response.json();
+        setData(users);
+        setError(null);
+    } catch (err) {
+        setError(err.message);
+        setData(null);
+    }
+};
+```
+
+## Database Integration
+
+### Using a Real Database
+
+```javascript
+// api/users.js
+
+// Example with a database (you need to install the package)
+// npm install better-sqlite3
+
+const Database = require('better-sqlite3');
+const db = new Database('mydb.sqlite');
+
+module.exports = async function handler(req, res) {
+    if (req.method === 'GET') {
+        const users = db.prepare('SELECT * FROM users').all();
+        return res.status(200).json(users);
+    }
+    
+    if (req.method === 'POST') {
+        const { name, email } = req.body;
+        const result = db.prepare(
+            'INSERT INTO users (name, email) VALUES (?, ?)'
+        ).run(name, email);
+        
+        return res.status(201).json({ 
+            id: result.lastInsertRowid,
+            name,
+            email
+        });
+    }
+};
+```
+
+### Using External APIs
+
+```javascript
+// api/weather.js
+
+module.exports = async function handler(req, res) {
+    const city = req.query.city || 'London';
+    
+    try {
+        const response = await fetch(
+            `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_KEY`
+        );
+        const data = await response.json();
+        
+        return res.status(200).json(data);
+    } catch (error) {
+        return res.status(500).json({ 
+            error: 'Failed to fetch weather' 
+        });
+    }
+};
+```
+
+## Environment Variables
+
+```javascript
+// api/config.js
+
+module.exports = async function handler(req, res) {
+    // Access environment variables
+    const apiKey = process.env.API_KEY;
+    const dbUrl = process.env.DATABASE_URL;
+    
+    return res.status(200).json({
+        hasApiKey: !!apiKey,
+        hasDbUrl: !!dbUrl
+    });
+};
+```
+
+Set environment variables:
+```bash
+# Windows
+set API_KEY=your_key
+npm run dev
+
+# Mac/Linux
+API_KEY=your_key npm run dev
+```
+
+## Hot Reload
+
+API routes support hot reload! When you save an API file:
+
+1. Dev server detects the change
+2. Reloads the API handler
+3. Next request uses the new code
+4. No server restart needed!
+
+## CORS
+
+CORS is automatically enabled for all API routes:
+```
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
+Access-Control-Allow-Headers: Content-Type
+```
+
+## Error Handling
+
+### Server Errors
+
+```javascript
+module.exports = async function handler(req, res) {
+    try {
+        // Your code here
+        const data = await someAsyncOperation();
+        return res.status(200).json(data);
+    } catch (error) {
+        console.error('API Error:', error);
+        return res.status(500).json({ 
+            error: 'Internal server error',
+            message: error.message
+        });
+    }
+};
+```
+
+### Validation Errors
+
+```javascript
+module.exports = async function handler(req, res) {
+    if (req.method === 'POST') {
+        const { name, email } = req.body;
+        
+        if (!name) {
+            return res.status(400).json({ 
+                error: 'Name is required' 
+            });
+        }
+        
+        if (!email || !email.includes('@')) {
+            return res.status(400).json({ 
+                error: 'Valid email is required' 
+            });
+        }
+        
+        // Process valid data
+    }
+};
+```
+
+## Status Codes
+
+Common HTTP status codes:
+
+- `200` - OK (successful GET, PUT, DELETE)
+- `201` - Created (successful POST)
+- `400` - Bad Request (validation error)
+- `401` - Unauthorized (authentication required)
+- `403` - Forbidden (no permission)
+- `404` - Not Found (resource doesn't exist)
+- `405` - Method Not Allowed (wrong HTTP method)
+- `500` - Internal Server Error (server error)
+
+## Best Practices
+
+### 1. Always Handle Methods
+
+```javascript
+module.exports = async function handler(req, res) {
+    if (req.method === 'GET') {
+        // Handle GET
+    } else {
+        return res.status(405).json({ 
+            error: 'Method not allowed' 
+        });
+    }
+};
+```
+
+### 2. Validate Input
+
+```javascript
+if (!req.body.name || typeof req.body.name !== 'string') {
+    return res.status(400).json({ error: 'Invalid name' });
+}
+```
+
+### 3. Use Try-Catch
+
+```javascript
+try {
+    const data = await database.query();
+    return res.status(200).json(data);
+} catch (error) {
+    return res.status(500).json({ error: error.message });
+}
+```
+
+### 4. Return Early
+
+```javascript
+if (!user) {
+    return res.status(404).json({ error: 'Not found' });
+}
+
+// Continue with logic
+```
+
+### 5. Use Async/Await
+
+```javascript
+module.exports = async function handler(req, res) {
+    const data = await fetchData();
+    return res.status(200).json(data);
+};
+```
+
+## Comparison with Next.js
+
+| Feature | Aziz App | Next.js |
+|---------|----------|---------|
+| File-based routing | ✅ | ✅ |
+| Server-side execution | ✅ | ✅ |
+| Hot reload | ✅ | ✅ |
+| Request/Response API | ✅ | ✅ |
+| Dynamic routes | ❌ | ✅ |
+| Middleware | ❌ | ✅ |
+| Edge runtime | ❌ | ✅ |
+
+## Summary
+
+- API routes run on the **server** (Node.js)
+- Each file in `api/` becomes an endpoint
+- Use `module.exports` to export the handler
+- Access via `fetchApi('/api/routename')`
+- Supports GET, POST, PUT, DELETE
+- Hot reload enabled
+- CORS enabled by default
+- Just like Next.js API routes!

package/template/modules/api.js

@@ -1,96 +1,12 @@
 /** @jsx h */
 
 // ============================================================
-//  API ROUTE SYSTEM
-//  Next.js-like API routes for client-side
-//  Can be easily replaced with real backend calls
+//  API CLIENT
+//  Fetch-like API for making requests to backend API routes
+//  API routes run on the SERVER (Node.js), not in the browser
 // ============================================================
 
-// API routes registry
-const apiRoutes = {};
-
-// Register an API route
-function registerApiRoute(path, handler) {
-    apiRoutes[path] = handler;
-    console.log(`Registered API route: /api/${path}`);
-}
-
-// API request/response helpers
-class ApiRequest {
-    constructor(method, body, query, params) {
-        this.method = method;
-        this.body = body;
-        this.query = query;
-        this.params = params;
-    }
-}
-
-class ApiResponse {
-    constructor() {
-        this.statusCode = 200;
-        this.headers = {};
-        this.data = null;
-    }
-
-    status(code) {
-        this.statusCode = code;
-        return this;
-    }
-
-    json(data) {
-        this.data = data;
-        this.headers['Content-Type'] = 'application/json';
-        return this;
-    }
-
-    send(data) {
-        this.data = data;
-        return this;
-    }
-}
-
-// Execute an API route
-async function callApi(path, options = {}) {
-    const {
-        method = 'GET',
-        body = null,
-        query = {},
-        params = {}
-    } = options;
-
-    // Find the route handler
-    const handler = apiRoutes[path];
-    
-    if (!handler) {
-        return {
-            status: 404,
-            data: { error: 'API route not found' }
-        };
-    }
-
-    // Create request and response objects
-    const req = new ApiRequest(method, body, query, params);
-    const res = new ApiResponse();
-
-    try {
-        // Call the handler
-        await handler(req, res);
-
-        return {
-            status: res.statusCode,
-            data: res.data,
-            headers: res.headers
-        };
-    } catch (error) {
-        console.error(`API Error on ${path}:`, error);
-        return {
-            status: 500,
-            data: { error: error.message }
-        };
-    }
-}
-
-// Fetch-like API for making requests
+// Fetch-like API for making requests to backend
 async function fetchApi(path, options = {}) {
     const {
         method = 'GET',
@@ -98,51 +14,31 @@ async function fetchApi(path, options = {}) {
         headers = {}
     } = options;
 
-    // Parse query params from path
-    const [routePath, queryString] = path.split('?');
-    const query = {};
-    if (queryString) {
-        queryString.split('&').forEach(param => {
-            const [key, value] = param.split('=');
-            query[decodeURIComponent(key)] = decodeURIComponent(value);
-        });
-    }
-
-    // Parse body if it's JSON
-    let parsedBody = body;
-    if (body && typeof body === 'string') {
-        try {
-            parsedBody = JSON.parse(body);
-        } catch (e) {
-            parsedBody = body;
+    const fetchOptions = {
+        method,
+        headers: {
+            'Content-Type': 'application/json',
+            ...headers
         }
-    }
+    };
 
-    const result = await callApi(routePath.replace('/api/', ''), {
-        method,
-        body: parsedBody,
-        query
-    });
+    if (body) {
+        fetchOptions.body = typeof body === 'string' ? body : JSON.stringify(body);
+    }
 
-    // Return a fetch-like response
-    return {
-        ok: result.status >= 200 && result.status < 300,
-        status: result.status,
-        statusText: result.status === 200 ? 'OK' : 'Error',
-        headers: result.headers,
-        json: async () => result.data,
-        text: async () => JSON.stringify(result.data)
-    };
+    try {
+        const response = await fetch(path, fetchOptions);
+        return response;
+    } catch (error) {
+        console.error('API Error:', error);
+        throw error;
+    }
 }
 
 // Export to global scope
-window.registerApiRoute = registerApiRoute;
 window.fetchApi = fetchApi;
-window.callApi = callApi;
 
 // Also make available without window prefix
 if (typeof globalThis !== 'undefined') {
-    globalThis.registerApiRoute = registerApiRoute;
     globalThis.fetchApi = fetchApi;
-    globalThis.callApi = callApi;
 }

package/template/scripts/dev-server.js

@@ -7,9 +7,152 @@ const { exec } = require('child_process');
 
 const PORT = process.env.PORT || 3000;
 const clients = new Set();
+const apiHandlers = {};
 
 console.log('🚀 Dev server starting...\n');
 
+// Load API routes from api/ folder
+function loadApiRoutes() {
+    const apiDir = path.join(process.cwd(), 'api');
+    if (!fs.existsSync(apiDir)) {
+        console.log('⚠️  No api/ folder found\n');
+        return;
+    }
+
+    const files = fs.readdirSync(apiDir).filter(f => f.endsWith('.js'));
+    console.log(`📡 Loading ${files.length} API routes...\n`);
+
+    files.forEach(file => {
+        const routeName = path.basename(file, '.js');
+        const filePath = path.join(apiDir, file);
+        
+        try {
+            // Clear require cache to allow hot reload
+            delete require.cache[require.resolve(filePath)];
+            
+            // Load the API handler
+            const handler = require(filePath);
+            
+            if (typeof handler === 'function') {
+                apiHandlers[routeName] = handler;
+                console.log(`   ✅ /api/${routeName}`);
+            } else if (handler.default && typeof handler.default === 'function') {
+                apiHandlers[routeName] = handler.default;
+                console.log(`   ✅ /api/${routeName}`);
+            } else {
+                console.log(`   ⚠️  /api/${routeName} - No default export`);
+            }
+        } catch (error) {
+            console.error(`   ❌ /api/${routeName} - ${error.message}`);
+        }
+    });
+    
+    console.log('');
+}
+
+// Parse request body
+function parseBody(req) {
+    return new Promise((resolve, reject) => {
+        let body = '';
+        req.on('data', chunk => {
+            body += chunk.toString();
+        });
+        req.on('end', () => {
+            try {
+                if (body && req.headers['content-type']?.includes('application/json')) {
+                    resolve(JSON.parse(body));
+                } else {
+                    resolve(body);
+                }
+            } catch (e) {
+                resolve(body);
+            }
+        });
+        req.on('error', reject);
+    });
+}
+
+// Parse query string
+function parseQuery(url) {
+    const query = {};
+    const queryString = url.split('?')[1];
+    if (queryString) {
+        queryString.split('&').forEach(param => {
+            const [key, value] = param.split('=');
+            query[decodeURIComponent(key)] = decodeURIComponent(value || '');
+        });
+    }
+    return query;
+}
+
+// Handle API requests
+async function handleApiRequest(req, res) {
+    const urlPath = req.url.split('?')[0];
+    const routeName = urlPath.replace('/api/', '');
+    
+    const handler = apiHandlers[routeName];
+    
+    if (!handler) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'API route not found' }));
+        return;
+    }
+
+    try {
+        // Parse request
+        const body = await parseBody(req);
+        const query = parseQuery(req.url);
+        
+        // Create Next.js-like req/res objects
+        const apiReq = {
+            method: req.method,
+            body: body,
+            query: query,
+            headers: req.headers,
+            url: req.url
+        };
+
+        const apiRes = {
+            statusCode: 200,
+            headers: {},
+            status(code) {
+                this.statusCode = code;
+                return this;
+            },
+            json(data) {
+                res.writeHead(this.statusCode, {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': '*',
+                    ...this.headers
+                });
+                res.end(JSON.stringify(data));
+                return this;
+            },
+            send(data) {
+                res.writeHead(this.statusCode, {
+                    'Content-Type': 'text/plain',
+                    'Access-Control-Allow-Origin': '*',
+                    ...this.headers
+                });
+                res.end(data);
+                return this;
+            },
+            setHeader(key, value) {
+                this.headers[key] = value;
+                return this;
+            }
+        };
+
+        // Call the handler
+        await handler(apiReq, apiRes);
+        
+    } catch (error) {
+        console.error(`❌ API Error on /api/${routeName}:`, error);
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: error.message }));
+    }
+}
+
 // Function to generate imports
 function generateImports() {
     console.log('🔄 Regenerating imports...');
@@ -38,7 +181,24 @@ function notifyClients() {
 }
 
 // Create HTTP server
-const server = http.createServer((req, res) => {
+const server = http.createServer(async (req, res) => {
+    // Handle API routes
+    if (req.url.startsWith('/api/')) {
+        await handleApiRequest(req, res);
+        return;
+    }
+
+    // Handle CORS preflight
+    if (req.method === 'OPTIONS') {
+        res.writeHead(200, {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type'
+        });
+        res.end();
+        return;
+    }
+
     // Strip query parameters for file serving (cache busting)
     let filePath = '.' + req.url.split('?')[0];
     if (filePath === './') {
@@ -170,6 +330,12 @@ watchDirs.forEach(dir => {
                     clearTimeout(reloadTimeout);
                 }
                 
+                // Reload API routes if api/ folder changed
+                if (dir === 'api' && filename.endsWith('.js')) {
+                    console.log('🔄 Reloading API routes...');
+                    loadApiRoutes();
+                }
+                
                 // For CSS changes, just reload without regenerating imports
                 if (filename.endsWith('.css')) {
                     reloadTimeout = setTimeout(() => {
@@ -190,6 +356,9 @@ console.log('\n✅ Dev server running with live reload!');
 console.log('💡 Create/modify files and browser will auto-refresh');
 console.log('⏹️  Press Ctrl+C to stop\n');
 
+// Load API routes
+loadApiRoutes();
+
 // Start server
 startServer(PORT);
 

package/template/scripts/generate-imports.js

@@ -31,11 +31,9 @@ function scanDirectory(dir, extensions = []) {
 }
 
 // Scan for files
-const apiRoutes = scanDirectory('api', ['.js']);
 const components = scanDirectory('components', ['.jsx', '.js']);
 const pages = scanDirectory('pages', ['.jsx', '.js']);
 
-console.log(`📡 Found ${apiRoutes.length} API routes`);
 console.log(`🧩 Found ${components.length} components`);
 console.log(`📄 Found ${pages.length} pages\n`);
 
@@ -48,14 +46,6 @@ scriptTags += '    <script type="text/babel" src="modules/router.js"></script>\n
 scriptTags += '    <script type="text/babel" src="modules/state.js"></script>\n';
 scriptTags += '    <script type="text/babel" src="modules/api.js"></script>\n\n';
 
-if (apiRoutes.length > 0) {
-    scriptTags += '    <!-- Load API routes -->\n';
-    apiRoutes.forEach(route => {
-        scriptTags += `    <script type="text/babel" src="${route}"></script>\n`;
-    });
-    scriptTags += '\n';
-}
-
 if (components.length > 0) {
     scriptTags += '    <!-- Load shared components -->\n';
     components.forEach(component => {