frontend-hamroun 1.2.24 → 1.2.25

package/templates/fullstack-app/package.json

@@ -3,29 +3,18 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "dev": "node --loader ts-node/esm server.ts",
-    "build": "vite build && tsc --emitDeclarationOnly",
-    "start": "node dist/server.js"
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:server": "node server.js",
+    "dev:client": "vite",
+    "build": "vite build",
+    "start": "node server.js"
   },
   "dependencies": {
-    "bcryptjs": "^2.4.3",
-    "cors": "^2.8.5",
     "express": "^4.18.2",
-    "frontend-hamroun": "latest",
-    "jsonwebtoken": "^9.0.2",
-    "mongodb": "^5.7.0"
+    "frontend-hamroun": "latest"
   },
   "devDependencies": {
-    "@types/bcryptjs": "^2.4.4",
-    "@types/cors": "^2.8.14",
-    "@types/express": "^4.17.18",
-    "@types/jsonwebtoken": "^9.0.3",
-    "@types/node": "^18.16.19",
-    "autoprefixer": "^10.4.15",
-    "postcss": "^8.4.29",
-    "tailwindcss": "^3.3.3",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "concurrently": "^8.0.1",
+    "vite": "^4.3.9"
   }
 }

package/templates/fullstack-app/server.js

@@ -0,0 +1,68 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Create Express app
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// Middleware
+app.use(express.json());
+
+// For production, serve the built files
+if (process.env.NODE_ENV === 'production') {
+  app.use(express.static(path.join(__dirname, 'dist')));
+} else {
+  // In development, we'll let Vite handle the frontend
+  console.log('Running in development mode - Vite handles the frontend');
+}
+
+// API endpoints
+app.get('/api/hello', (req, res) => {
+  res.json({
+    message: "Hello from the API!",
+    time: new Date().toISOString(),
+    features: [
+      "Server-side rendering",
+      "API routes",
+      "Component-based UI",
+      "React-like development experience"
+    ]
+  });
+});
+
+// In production or if using SSR, handle all requests
+app.get('*', (req, res, next) => {
+  // Skip API routes
+  if (req.path.startsWith('/api/')) {
+    return next();
+  }
+  
+  // In production, serve the index.html
+  if (process.env.NODE_ENV === 'production') {
+    const indexPath = path.join(__dirname, 'dist', 'index.html');
+    if (fs.existsSync(indexPath)) {
+      res.sendFile(indexPath);
+    } else {
+      res.status(404).send('Not found');
+    }
+  } else {
+    // In development, redirect to Vite dev server
+    res.redirect(`http://localhost:5173${req.path}`);
+  }
+});
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`API Server running on http://localhost:${PORT}`);
+  
+  if (process.env.NODE_ENV !== 'production') {
+    console.log(`Frontend development server will run on http://localhost:5173`);
+    console.log(`Run 'npm run dev' to start both servers`);
+  }
+});

package/templates/fullstack-app/server.ts

@@ -1,38 +1,77 @@
-import { Server, Database, AuthService } from 'frontend-hamroun/server';
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
 
-async function startServer() {
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Create Express app
+const app = express();
+const PORT = process.env.PORT ? parseInt(process.env.PORT) : 3000;
+
+// Serve static files from current directory
+app.use(express.static(__dirname));
+
+// Parse JSON and URL-encoded data
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Basic API endpoint
+app.get('/api/hello', (req, res) => {
+  res.json({
+    message: 'Hello from the API!',
+    time: new Date().toISOString(),
+    environment: process.env.NODE_ENV || 'development'
+  });
+});
+
+// Serve index.html for all other routes
+app.get('*', (req, res) => {
   try {
-    // Create and configure the server
-    const app = new Server({
-      port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
-      apiDir: './api',
-      staticDir: './public',
-      
-      // Enable CORS
-      enableCors: true,
-      corsOptions: {
-        origin: process.env.CORS_ORIGIN || '*',
-        methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
-        allowedHeaders: ['Content-Type', 'Authorization']
-      }
-    });
+    // Read index.html
+    const indexPath = path.join(__dirname, 'index.html');
+    const html = fs.readFileSync(indexPath, 'utf8');
+    
+    // Add server-rendered content
+    const serverContent = `
+      <div class="server-content">
+        <h1>Frontend Hamroun Fullstack</h1>
+        <p>Server-side rendered content</p>
+        <div class="timestamp">Rendered at: ${new Date().toISOString()}</div>
+        <div class="api-container"></div>
+      </div>
+    `;
     
-    // Start the server
-    await app.start();
+    // Replace placeholder with server content
+    const modifiedHtml = html.replace(
+      /<div class="placeholder">[\s\S]*?<\/div>/,
+      serverContent
+    );
     
-    console.log('Server running at http://localhost:' + 
-      (process.env.PORT || 3000));
-      
-    // Handle graceful shutdown
-    process.on('SIGINT', async () => {
-      console.log('Shutting down server...');
-      await app.stop();
-      process.exit(0);
-    });
+    res.send(modifiedHtml);
   } catch (error) {
-    console.error('Failed to start server:', error);
-    process.exit(1);
+    console.error('Error serving HTML:', error);
+    res.status(500).send(`
+      <html>
+        <head><title>Server Error</title></head>
+        <body>
+          <h1>500 - Server Error</h1>
+          <p>${error.message}</p>
+        </body>
+      </html>
+    `);
   }
-}
+});
+
+// Start the server
+app.listen(PORT, () => {
+  console.log(`Server running at http://localhost:${PORT}`);
+});
 
-startServer();
+// Handle graceful shutdown
+process.on('SIGINT', () => {
+  console.log('Shutting down server...');
+  process.exit(0);
+});

package/templates/fullstack-app/src/client.js

@@ -0,0 +1,20 @@
+import { hydrate, createElement } from 'frontend-hamroun';
+
+// Simple component for testing
+function App() {
+  return createElement('div', null, [
+    createElement('h1', null, 'Hello from Frontend Hamroun'),
+    createElement('p', null, 'This is a fullstack app with SSR')
+  ]);
+}
+
+// Wait for DOM to be ready
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.getElementById('root');
+  
+  // Hydrate the application
+  if (root) {
+    hydrate(createElement(App), root);
+    console.log('App hydrated successfully');
+  }
+});

package/templates/fullstack-app/src/main.tsx

@@ -0,0 +1,9 @@
+import { jsx, render } from 'frontend-hamroun';
+import HomePage from './pages/index.tsx';
+
+// Add global jsx for Vite to use
+window.jsx = jsx;
+
+// Fix: Pass the component properly to render
+// Don't call HomePage() directly - pass it as a component
+render(jsx(HomePage, {}, null), document.getElementById('root'));

package/templates/fullstack-app/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'frontend-hamroun';
+import { jsx, useState, useEffect } from 'frontend-hamroun';
 
 export default function HomePage() {
   const [apiData, setApiData] = useState(null);
@@ -21,39 +21,43 @@ export default function HomePage() {
     fetchData();
   }, []);
 
-  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-3xl font-bold mb-4">Frontend Hamroun Full Stack</h1>
-      
-      <div className="mb-6">
-        <h2 className="text-xl font-semibold mb-2">API Response:</h2>
-        {loading ? (
-          <p>Loading...</p>
-        ) : error ? (
-          <p className="text-red-500">Error: {error}</p>
-        ) : (
-          <pre className="bg-gray-100 p-4 rounded">
-            {JSON.stringify(apiData, null, 2)}
-          </pre>
-        )}
-      </div>
-      
-      <div className="mb-6">
-        <h2 className="text-xl font-semibold mb-2">Features:</h2>
-        <ul className="list-disc pl-6">
-          <li>Server-side rendering</li>
-          <li>API routes with Express</li>
-          <li>Database integration</li>
-          <li>Authentication and authorization</li>
-          <li>File-based routing</li>
-        </ul>
-      </div>
-      
-      <div>
-        <h2 className="text-xl font-semibold mb-2">Get Started:</h2>
-        <p>Edit <code className="bg-gray-100 px-2 py-1 rounded">src/pages/index.tsx</code> to customize this page</p>
-        <p>API routes are in the <code className="bg-gray-100 px-2 py-1 rounded">api</code> directory</p>
-      </div>
-    </div>
-  );
+  return jsx('div', { className: "container mx-auto p-4" }, [
+    jsx('h1', { className: "text-3xl font-bold mb-4" }, "Frontend Hamroun Full Stack"),
+    
+    jsx('div', { className: "mb-6" }, [
+      jsx('h2', { className: "text-xl font-semibold mb-2" }, "API Response:"),
+      loading 
+        ? jsx('p', {}, "Loading...")
+        : error 
+          ? jsx('p', { className: "text-red-500" }, `Error: ${error}`)
+          : jsx('pre', { className: "bg-gray-100 p-4 rounded" }, 
+              JSON.stringify(apiData, null, 2)
+            )
+    ]),
+    
+    jsx('div', { className: "mb-6" }, [
+      jsx('h2', { className: "text-xl font-semibold mb-2" }, "Features:"),
+      jsx('ul', { className: "list-disc pl-6" }, [
+        jsx('li', {}, "Server-side rendering"),
+        jsx('li', {}, "API routes with Express"),
+        jsx('li', {}, "Database integration"),
+        jsx('li', {}, "Authentication and authorization"),
+        jsx('li', {}, "File-based routing")
+      ])
+    ]),
+    
+    jsx('div', {}, [
+      jsx('h2', { className: "text-xl font-semibold mb-2" }, "Get Started:"),
+      jsx('p', {}, [
+        "Edit ",
+        jsx('code', { className: "bg-gray-100 px-2 py-1 rounded" }, "src/pages/index.tsx"),
+        " to customize this page"
+      ]),
+      jsx('p', {}, [
+        "API routes are in the ",
+        jsx('code', { className: "bg-gray-100 px-2 py-1 rounded" }, "api"),
+        " directory"
+      ])
+    ])
+  ]);
 }

package/templates/fullstack-app/vite.config.js

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  // Server configuration
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
+  },
+  
+  // Using jsx transform with a different configuration
+  esbuild: {
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment' 
+  },
+  
+  // Build configuration
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html')
+      }
+    }
+  },
+  
+  // Resolve aliases
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  
+  // Optimize dependencies
+  optimizeDeps: {
+    include: ['frontend-hamroun']
+  }
+});