create-aziz-app 2.0.10 → 2.0.12

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.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

@@ -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>
@@ -25,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>