frontend-hamroun 1.2.27 → 1.2.29

package/templates/fullstack-app/public/tailwind.css

@@ -0,0 +1,15 @@
+/* All Tailwind directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.6;
+}
+
+/* Any custom utility classes can go here */
+.custom-container {
+  @apply max-w-4xl mx-auto px-4 py-8;
+}

package/templates/fullstack-app/server.js

@@ -65,7 +65,7 @@ const store = {
   ]
 };
 
-// API endpoints - Core data
+// Core API routes (available without file-based routing)
 app.get('/api/hello', (req, res) => {
   res.json({
     message: "Hello from the API!",
@@ -82,61 +82,87 @@ app.get('/api/hello', (req, res) => {
   });
 });
 
-// Dynamic API route loading
+// REST API endpoints for store data
+app.get('/api/users', (req, res) => {
+  res.json(store.users);
+});
+
+app.get('/api/users/:id', (req, res) => {
+  const user = store.users.find(u => u.id === parseInt(req.params.id));
+  if (user) {
+    res.json(user);
+  } else {
+    res.status(404).json({ error: 'User not found' });
+  }
+});
+
+app.get('/api/posts', (req, res) => {
+  const { authorId } = req.query;
+  
+  if (authorId) {
+    const filteredPosts = store.posts.filter(p => p.authorId === parseInt(authorId));
+    return res.json(filteredPosts);
+  }
+  
+  res.json(store.posts);
+});
+
+// Improved dynamic API route loading with better error handling
 const apiDir = path.join(__dirname, 'api');
 if (fs.existsSync(apiDir)) {
   console.log('Loading API routes from directory...');
   
   // Function to map file paths to API routes
   const registerApiRoutes = async (dir, routePrefix = '') => {
-    const entries = fs.readdirSync(dir, { withFileTypes: true });
-    
-    for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
       
-      if (entry.isDirectory()) {
-        // Process directories recursively
-        await registerApiRoutes(fullPath, `${routePrefix}/${entry.name}`);
-      } else if (entry.name.endsWith('.js') || entry.name.endsWith('.ts')) {
-        // Process API file
-        try {
-          const fileName = entry.name.replace(/\.[^/.]+$/, ""); // Remove extension
-          const routePath = fileName === 'index' 
-            ? routePrefix 
-            : fileName.startsWith('[') && fileName.endsWith(']')
-              ? `${routePrefix}/:${fileName.slice(1, -1)}` // Convert [param] to :param
-              : `${routePrefix}/${fileName}`;
-              
-          // Import the route module
-          const module = await import(`file://${fullPath}`);
-          
-          // Register handlers for HTTP methods
-          ['get', 'post', 'put', 'delete', 'patch'].forEach(method => {
-            if (typeof module[method] === 'function') {
-              console.log(`  Registered ${method.toUpperCase()} ${routePath}`);
-              app[method](`/api${routePath}`, module[method]);
+      for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        
+        if (entry.isDirectory()) {
+          // Process directories recursively
+          await registerApiRoutes(fullPath, `${routePrefix}/${entry.name}`);
+        } else if (entry.name.endsWith('.js') || entry.name.endsWith('.ts')) {
+          // Process API file
+          try {
+            const fileName = entry.name.replace(/\.[^/.]+$/, ""); // Remove extension
+            const routePath = fileName === 'index' 
+              ? routePrefix 
+              : fileName.startsWith('[') && fileName.endsWith(']')
+                ? `${routePrefix}/:${fileName.slice(1, -1)}` // Convert [param] to :param
+                : `${routePrefix}/${fileName}`;
+                
+            // Import the route module
+            const module = await import(`file://${fullPath}`);
+            
+            // Register handlers for HTTP methods
+            ['get', 'post', 'put', 'delete', 'patch'].forEach(method => {
+              if (typeof module[method] === 'function') {
+                console.log(`  Registered ${method.toUpperCase()} ${routePath}`);
+                app[method](`/api${routePath}`, module[method]);
+              }
+            });
+            
+            // Special case for 'delete' which might be named 'delete_' in some files
+            if (typeof module['delete_'] === 'function') {
+              console.log(`  Registered DELETE ${routePath}`);
+              app.delete(`/api${routePath}`, module['delete_']);
             }
-          });
-          
-          // Special case for 'delete' which might be named 'delete_' in some files
-          if (typeof module['delete_'] === 'function') {
-            console.log(`  Registered DELETE ${routePath}`);
-            app.delete(`/api${routePath}`, module['delete_']);
+          } catch (err) {
+            console.error(`Error loading API route ${fullPath}:`, err);
           }
-        } catch (err) {
-          console.error(`Error loading API route ${fullPath}:`, err);
         }
       }
+    } catch (err) {
+      console.error(`Error reading directory ${dir}:`, err);
     }
   };
   
   // Start registering API routes
-  try {
-    await registerApiRoutes(apiDir);
-    console.log('API routes loaded successfully');
-  } catch (err) {
+  registerApiRoutes(apiDir).catch(err => {
     console.error('Error loading API routes:', err);
-  }
+  });
 } else {
   console.log('API directory not found, skipping API route loading');
 }
@@ -168,7 +194,7 @@ io.on('connection', (socket) => {
   });
 });
 
-// In production or if using SSR, handle all requests
+// In production or if using SSR, handle all routes
 app.get('*', (req, res, next) => {
   // Skip API routes
   if (req.path.startsWith('/api/')) {
@@ -179,13 +205,44 @@ app.get('*', (req, res, next) => {
   if (process.env.NODE_ENV === 'production') {
     const indexPath = path.join(__dirname, 'dist', 'index.html');
     if (fs.existsSync(indexPath)) {
-      res.sendFile(indexPath);
+      try {
+        // Read the index.html file
+        let html = fs.readFileSync(indexPath, 'utf8');
+        
+        // Create initial state for client hydration
+        const initialState = {
+          route: req.path,
+          timestamp: new Date().toISOString()
+        };
+        
+        // Inject initial state for hydration
+        html = html.replace(
+          '</head>',
+          `<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};</script></head>`
+        );
+        
+        res.send(html);
+      } catch (error) {
+        console.error('Error serving HTML:', error);
+        res.status(500).send('Server Error');
+      }
     } else {
       res.status(404).send('Not found');
     }
   } else {
-    // In development, redirect to Vite dev server
-    res.redirect(`http://localhost:5173${req.path}`);
+    // In development, use Vite's dev server
+    // Instead of redirecting, proxy the request to maintain the URL path
+    // This allows Vite to handle the route properly
+    const viteDevServerUrl = 'http://localhost:5173';
+    
+    // Tell the client which route to handle via response headers
+    res.setHeader('x-original-route', req.path);
+    
+    // Forward the request to the Vite dev server with the original path
+    res.redirect(302, `${viteDevServerUrl}${req.path}`);
+    
+    // Note: If the above still causes 404s, you can try this alternative
+    // res.redirect(302, `${viteDevServerUrl}/?_path=${encodeURIComponent(req.path)}`);
   }
 });
 

package/templates/fullstack-app/server.ts

@@ -1,77 +1,440 @@
-import express from 'express';
+import express, { Request, Response, NextFunction } from 'express';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import fs from 'fs';
+import fs from 'fs/promises';
+import { existsSync } from 'fs';
+import dotenv from 'dotenv';
+import { createServer } from 'http';
+import { Server as SocketServer } from 'socket.io';
+import compression from 'compression';
+import cors from 'cors';
+import * as esbuild from 'esbuild';
 
-// Get __dirname equivalent in ESM
+// Setup environment
+dotenv.config();
 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;
+const httpServer = createServer(app);
 
-// Serve static files from current directory
-app.use(express.static(__dirname));
+// Set development mode
+if (process.env.NODE_ENV === undefined) {
+  process.env.NODE_ENV = 'development';
+}
+const isDev = process.env.NODE_ENV !== 'production';
 
-// Parse JSON and URL-encoded data
+// Create socket.io server
+const io = new SocketServer(httpServer, {
+  cors: {
+    origin: isDev ? '*' : false,
+    methods: ['GET', 'POST']
+  }
+});
+
+// Middleware setup
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
+app.use(compression());
+app.use(cors());
+if (isDev) {
+  app.use((req, res, next) => {
+    console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+    next();
+  });
+}
+
+// Sample data store
+const store = {
+  users: [
+    { id: 1, name: 'User 1', email: 'user1@example.com' },
+    { id: 2, name: 'User 2', email: 'user2@example.com' },
+    { id: 3, name: 'User 3', email: 'user3@example.com' }
+  ],
+  posts: [
+    { id: 1, title: 'Post 1', content: 'Content for post 1', authorId: 1 },
+    { id: 2, title: 'Post 2', content: 'Content for post 2', authorId: 2 },
+    { id: 3, title: 'Post 3', content: 'Content for post 3', authorId: 1 }
+  ]
+};
 
-// Basic API endpoint
+// API Routes
 app.get('/api/hello', (req, res) => {
   res.json({
     message: 'Hello from the API!',
-    time: new Date().toISOString(),
-    environment: process.env.NODE_ENV || 'development'
+    time: new Date().toISOString()
   });
 });
 
-// Serve index.html for all other routes
-app.get('*', (req, res) => {
+app.get('/api/users', (req, res) => {
+  res.json(store.users);
+});
+
+app.get('/api/users/:id', (req, res) => {
+  const user = store.users.find(u => u.id === parseInt(req.params.id));
+  if (user) {
+    res.json(user);
+  } else {
+    res.status(404).json({ error: 'User not found' });
+  }
+});
+
+// Setup esbuild
+let esbuildContext;
+
+async function setupEsbuild() {
+  const buildDir = path.join(__dirname, 'build');
+  if (!existsSync(buildDir)) {
+    await fs.mkdir(buildDir, { recursive: true });
+  }
+
+  // Import PostCSS, Tailwind and Autoprefixer when in development mode
+  let postcssPlugin = null;
+  if (isDev) {
+    try {
+      const postcss = (await import('postcss')).default;
+      const tailwindcss = (await import('tailwindcss')).default;
+      const autoprefixer = (await import('autoprefixer')).default;
+      
+      // Create a plugin to process CSS with Tailwind
+      postcssPlugin = {
+        name: 'postcss-tailwind',
+        setup(build) {
+          build.onLoad({ filter: /\.css$/ }, async (args) => {
+            const css = await fs.readFile(args.path, 'utf8');
+            try {
+              // Process CSS with PostCSS + Tailwind
+              const result = await postcss([
+                tailwindcss,
+                autoprefixer
+              ]).process(css, { 
+                from: args.path,
+                to: path.join(buildDir, 'styles.css')
+              });
+              
+              return {
+                contents: result.css,
+                loader: 'css'
+              };
+            } catch (error) {
+              console.error('Error processing CSS with Tailwind:', error);
+              return { contents: css, loader: 'css' };
+            }
+          });
+        }
+      };
+    } catch (error) {
+      console.warn('PostCSS plugins not available, CSS will not be processed with Tailwind:', error);
+    }
+  }
+
+  esbuildContext = await esbuild.context({
+    entryPoints: [
+      path.join(__dirname, 'src', 'main.tsx'),
+    ],
+    bundle: true,
+    format: 'esm',
+    outdir: buildDir,
+    sourcemap: isDev,
+    minify: !isDev,
+    jsx: 'transform',
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment',
+    external: ['react', 'react/jsx-runtime', 'react-dom'],
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+    },
+    loader: {
+      '.tsx': 'tsx',
+      '.ts': 'ts',
+      '.jsx': 'jsx',
+      '.js': 'js',
+      '.css': 'css',
+      '.json': 'json',
+      '.png': 'file',
+      '.jpg': 'file',
+      '.svg': 'file'
+    },
+    plugins: [
+      {
+        name: 'jsx-runtime-import',
+        setup(build) {
+          build.onLoad({ filter: /\.(tsx|jsx)$/ }, async (args) => {
+            const source = await fs.readFile(args.path, 'utf8');
+            const content = `import { jsx, Fragment } from 'frontend-hamroun';\n${source}`;
+            return { contents: content, loader: args.path.endsWith('tsx') ? 'tsx' : 'jsx' };
+          });
+        }
+      },
+      ...(postcssPlugin ? [postcssPlugin] : [])
+    ]
+  });
+
+  if (isDev) {
+    await esbuildContext.rebuild();
+    console.log('esbuild: Initial build complete');
+  } else {
+    await esbuildContext.rebuild();
+    await esbuildContext.dispose();
+    console.log('esbuild: Production build complete');
+  }
+}
+
+// Initialize esbuild
+setupEsbuild().catch(err => {
+  console.error('Failed to setup esbuild:', err);
+  process.exit(1);
+});
+
+// Serve static files
+app.use('/build', express.static(path.join(__dirname, 'build')));
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Development mode file serving
+if (isDev) {
+  app.get('/src/*', async (req, res, next) => {
+    try {
+      const filePath = path.join(__dirname, req.path);
+      
+      // Check if file exists
+      if (!existsSync(filePath)) {
+        return next();
+      }
+      
+      // Read the file
+      const source = await fs.readFile(filePath, 'utf8');
+      
+      // Determine content type based on file extension
+      const ext = path.extname(filePath);
+      let contentType = 'application/javascript';
+      let loader: esbuild.Loader = 'js';
+      
+      switch (ext) {
+        case '.ts':
+          loader = 'ts';
+          break;
+        case '.tsx':
+          loader = 'tsx';
+          break;
+        case '.jsx':
+          loader = 'jsx';
+          break;
+        case '.css':
+          contentType = 'text/css';
+          loader = 'css';
+          break;
+        case '.json':
+          contentType = 'application/json';
+          loader = 'json';
+          break;
+      }
+      
+      // Transform the file with esbuild
+      const result = await esbuild.transform(source, {
+        loader,
+        sourcemap: 'inline',
+        jsxFactory: 'jsx',
+        jsxFragment: 'Fragment'
+      });
+      
+      res.setHeader('Content-Type', contentType);
+      res.send(result.code);
+    } catch (error) {
+      console.error(`Error serving ${req.path}:`, error);
+      next(error);
+    }
+  });
+}
+
+// Helper function to check if file exists
+async function fileExists(filepath: string): Promise<boolean> {
   try {
-    // Read index.html
-    const indexPath = path.join(__dirname, 'index.html');
-    const html = fs.readFileSync(indexPath, 'utf8');
+    await fs.access(filepath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// SSR handler for all routes except /api and static files
+app.get('*', async (req: Request, res: Response, next: NextFunction) => {
+  // Skip API routes, static assets, and build/src files
+  if (req.path.startsWith('/api/') || 
+      req.path.startsWith('/build/') || 
+      req.path.startsWith('/src/') ||
+      req.path.match(/\.(js|css|ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/)) {
+    return next();
+  }
+  
+  console.log(`[SSR] Processing request for: ${req.path}`);
+  
+  try {
+    // Normalize the path
+    const pagePath = req.path === '/' ? 'index' : req.path.slice(1);
+    
+    // Create initial state
+    const initialState = {
+      route: req.path,
+      timestamp: new Date().toISOString(),
+      serverRendered: true,
+      data: {
+        users: store.users || [],
+        posts: store.posts || []
+      }
+    };
     
-    // 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>
+    // Generate HTML content directly as a string instead of JSX
+    const rootContent = `
+      <div style="padding: 20px; max-width: 800px; margin: 0 auto;">
+        <h1>Loading Application...</h1>
+        <p>The application is initializing. If you continue to see this message, please ensure JavaScript is enabled in your browser.</p>
       </div>
     `;
     
-    // Replace placeholder with server content
-    const modifiedHtml = html.replace(
-      /<div class="placeholder">[\s\S]*?<\/div>/,
-      serverContent
-    );
+    // Create HTML template with properly structured content
+    const html = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Frontend Hamroun App</title>
+        <!-- Include the processed Tailwind CSS file -->
+        <link rel="stylesheet" href="/styles.css">
+        <style>
+          body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            line-height: 1.6;
+            color: #333;
+            margin: 0;
+            padding: 0;
+          }
+          a {
+            color: #0066cc;
+            text-decoration: none;
+          }
+          a:hover {
+            text-decoration: underline;
+          }
+          pre {
+            white-space: pre-wrap;
+            word-break: break-word;
+          }
+        </style>
+        <script>
+          window.__INITIAL_STATE__ = ` + JSON.stringify(initialState) + `;
+        </script>
+      </head>
+      <body>
+        <div id="root">${rootContent}</div>
+        <script src="/build/main.js" type="module"></script>
+        <script src="/socket.io/socket.io.js"></script>
+      </body>
+      </html>`;
     
-    res.send(modifiedHtml);
+    // Send the rendered HTML
+    res.send(html);
   } catch (error) {
-    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>
-    `);
+    console.error('[SSR] Server error:', error);
+    next(error);
   }
 });
 
+// Error handler
+app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
+  console.error('Server error:', err);
+  res.status(500).send(`
+    <!DOCTYPE html>
+    <html>
+      <head><title>Server Error</title></head>
+      <body>
+        <h1>500 - Server Error</h1>
+        <p>${err.message}</p>
+        ${isDev ? `<pre>${err.stack}</pre>` : ''}
+      </body>
+    </html>
+  `);
+});
+
+// WebSocket setup
+io.on('connection', (socket) => {
+  console.log('Client connected:', socket.id);
+  
+  // Send welcome message
+  socket.emit('welcome', { 
+    message: 'Connected to WebSocket server',
+    time: new Date().toISOString()
+  });
+  
+  // Handle client messages
+  socket.on('message', (data) => {
+    console.log('Received message:', data);
+    // Broadcast to all clients
+    io.emit('broadcast', {
+      from: socket.id,
+      data,
+      time: new Date().toISOString()
+    });
+  });
+  
+  // Handle disconnect
+  socket.on('disconnect', () => {
+    console.log('Client disconnected:', socket.id);
+  });
+});
+
+// Handle file changes for live reload in development
+if (isDev) {
+  const chokidar = await import('chokidar');
+  const watcher = chokidar.watch([
+    path.join(__dirname, 'src/**/*'),
+    path.join(__dirname, 'public/**/*')
+  ]);
+  
+  watcher.on('change', async (changedPath) => {
+    console.log(`[Watcher] File changed: ${changedPath}`);
+    
+    // Rebuild if source files changed
+    if (changedPath.startsWith(path.join(__dirname, 'src'))) {
+      try {
+        await esbuildContext.rebuild();
+        console.log('[Watcher] Rebuild complete');
+        
+        // Notify clients to reload
+        io.emit('reload');
+      } catch (error) {
+        console.error('[Watcher] Rebuild failed:', error);
+      }
+    }
+    
+    // Notify clients of public file changes without rebuild
+    if (changedPath.startsWith(path.join(__dirname, 'public'))) {
+      io.emit('reload');
+    }
+  });
+  
+  console.log('[Watcher] File watching enabled for development');
+}
+
 // Start the server
-app.listen(PORT, () => {
+httpServer.listen(PORT, () => {
   console.log(`Server running at http://localhost:${PORT}`);
+  console.log(`Server-side rendering enabled with direct esbuild compilation`);
+  
+  if (isDev) {
+    console.log(`Development mode with live reload active`);
+  }
 });
 
 // Handle graceful shutdown
-process.on('SIGINT', () => {
+process.on('SIGINT', async () => {
   console.log('Shutting down server...');
+  
+  // Dispose esbuild context if active
+  if (esbuildContext) {
+    await esbuildContext.dispose();
+  }
+  
   process.exit(0);
 });