frontend-hamroun 1.2.24 → 1.2.25

package/templates/ssr-template/server.js

@@ -1,577 +1,392 @@
-import { server } from 'frontend-hamroun';
+import express from 'express';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import fetch from 'node-fetch';
+import dotenv from 'dotenv';
+
+// Load environment variables
+dotenv.config();
 
 // Get __dirname equivalent in ESM
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-async function startServer() {
-  try {
-    // Import server components dynamically
-    const { Server, AuthService, Database, renderToString } = await server.getServer();
+// Initialize express app
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// Simple API endpoint
+app.get('/api/hello', (req, res) => {
+  res.json({
+    message: 'Hello from Server-Side API',
+    time: new Date().toISOString()
+  });
+});
+
+// Function to generate meta tags locally without requiring OpenAI
+function generateMetaTagsLocally(pageContent) {
+  // Simple keyword extraction - get common meaningful words
+  const keywordExtraction = (text) => {
+    // Remove common words and extract potential keywords
+    const commonWords = ['a', 'an', 'the', 'and', 'or', 'but', 'is', 'are', 'was', 'were', 
+      'has', 'have', 'had', 'be', 'been', 'being', 'to', 'of', 'for', 'with', 'about', 'at'];
     
-    // Create the server instance
-    const app = new Server({
-      port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
-      apiDir: './api',
-      staticDir: './public',
-      
-      // Enable CORS for API endpoints
-      enableCors: true,
-      
-      // Setup authentication
-      auth: {
-        secret: process.env.JWT_SECRET || 'your-development-secret-key',
-        expiresIn: '7d'
-      },
-      
-      // Optional database configuration
-      /*
-      db: {
-        url: process.env.DATABASE_URL || 'mongodb://localhost:27017/my_app',
-        type: 'mongodb'
-      }
-      */
+    const words = text.toLowerCase()
+      .replace(/[^\w\s]/g, '') // Remove punctuation
+      .split(/\s+/) // Split by whitespace
+      .filter(word => word.length > 3 && !commonWords.includes(word)); // Filter short and common words
+    
+    // Count word frequency
+    const wordCount = {};
+    words.forEach(word => {
+      wordCount[word] = (wordCount[word] || 0) + 1;
     });
     
-    // Get the Express app instance to add custom routes
-    const expressApp = app.getExpressApp();
+    // Sort by frequency and get top keywords
+    return Object.entries(wordCount)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 5)
+      .map(entry => entry[0])
+      .join(', ');
+  };
+  
+  // Extract main topic (first heading or first sentence)
+  const getMainTopic = (text) => {
+    const headingMatch = text.match(/<h1[^>]*>(.*?)<\/h1>/i) || 
+                        text.match(/<h2[^>]*>(.*?)<\/h2>/i);
     
-    // Get the auth service
-    const auth = app.getAuth();
+    if (headingMatch) {
+      return headingMatch[1].trim();
+    }
     
-    // Add authentication routes
-    expressApp.post('/api/auth/login', (req, res) => {
-      // Mock users for demonstration
-      const users = [
-        { id: 1, username: 'admin', password: '$2a$10$eBMQ3PFvX0G5a.U/zOA8Y.3JHZ5Ktq0hTjh4n2mjvXcOt6CvTxAZ2', roles: ['admin'] }, // password: admin123
-        { id: 2, username: 'user', password: '$2a$10$h6y7r0WSRO.BT9WBnTJj1udTI5OtMBdHcQ3/xNW7UQ1WXzMpYvNHe', roles: ['user'] }  // password: user123
-      ];
-      
-      const { username, password } = req.body;
-      
-      if (!username || !password) {
-        return res.status(400).json({ message: 'Username and password are required' });
-      }
-      
-      // Find user
-      const user = users.find(u => u.username === username);
-      
-      if (!user) {
-        return res.status(401).json({ message: 'Invalid credentials' });
-      }
-      
-      // Authenticate user
-      auth.comparePasswords(password, user.password)
-        .then(isMatch => {
-          if (!isMatch) {
-            return res.status(401).json({ message: 'Invalid credentials' });
-          }
-          
-          // Generate token
-          const token = auth.generateToken({
-            id: user.id,
-            username: user.username,
-            roles: user.roles
-          });
-          
-          // Return token
-          res.json({
-            token,
-            user: {
-              id: user.id,
-              username: user.username,
-              roles: user.roles
-            }
-          });
-        })
-        .catch(err => {
-          console.error('Auth error:', err);
-          res.status(500).json({ message: 'Authentication error' });
-        });
-    });
+    // If no heading, use first sentence
+    const firstSentence = text.split(/[.!?]/).filter(s => s.trim().length > 0)[0];
+    return firstSentence ? firstSentence.trim() : "Frontend Hamroun SSR Page";
+  };
+  
+  // Generate description (first few sentences, truncated)
+  const getDescription = (text) => {
+    const plainText = text.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
+    const sentences = plainText.split(/[.!?]/).filter(s => s.trim().length > 0);
+    const description = sentences.slice(0, 2).join('. ');
     
-    // Protected API route example
-    expressApp.get('/api/protected', auth.requireAuth(), (req, res) => {
-      res.json({
-        message: 'This is protected data',
-        user: req.user,
-        timestamp: new Date().toISOString()
-      });
-    });
+    return description.length > 160 
+      ? description.substring(0, 157) + '...' 
+      : description;
+  };
+  
+  // Generate the meta tags
+  const title = getMainTopic(pageContent);
+  const description = getDescription(pageContent);
+  const keywords = keywordExtraction(pageContent);
+  
+  return {
+    title: title || 'Frontend Hamroun SSR App',
+    description: description || 'A server-side rendered application using Frontend Hamroun framework',
+    keywords: keywords || 'ssr, javascript, frontend, hamroun, web development'
+  };
+}
+
+// Function to generate meta tags - using Gemini with local fallback
+async function generateMetaTags(pageContent) {
+  // Remove forcing local generation
+  process.env.USE_LOCAL_GENERATION = 'false';
+  
+  // Check if local generation is forced
+  if (process.env.USE_LOCAL_GENERATION === 'true') {
+    console.log('Using local meta tag generation (forced by config)');
+    return generateMetaTagsLocally(pageContent);
+  }
+  
+  try {
+    console.log('Attempting to generate meta tags with Gemini AI...');
+    return await generateMetaTagsWithGemini(pageContent);
+  } catch (error) {
+    console.error('Error generating meta tags with Gemini, falling back to local generation:', error);
+    return generateMetaTagsLocally(pageContent);
+  }
+}
+
+// Function to generate meta tags using Google's Gemini API
+async function generateMetaTagsWithGemini(pageContent) {
+  if (!process.env.GEMINI_API_KEY) {
+    console.log('Gemini API key not found. Using local meta tag generation.');
+    return generateMetaTagsLocally(pageContent);
+  }
+
+  try {
+    console.log('Connecting to Gemini AI...');
+    // Use the correct model as indicated in the working curl example
+    const endpoints = [
+      'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent'
+    ];
     
-    // Admin-only route example
-    expressApp.get('/api/admin', auth.requireRoles(['admin']), (req, res) => {
-      res.json({
-        message: 'Admin-only data',
-        user: req.user,
-        timestamp: new Date().toISOString()
-      });
-    });
+    let response = null;
+    let responseData = null;
     
-    // Override the default route handler with our SSR implementation
-    expressApp.get('/', async (req, res) => {
+    // Try the endpoint
+    for (const url of endpoints) {
       try {
-        // Create a virtual DOM tree with more complex structure
-        const vnode = {
-          type: 'div',
-          props: {
-            id: 'app',
-            children: [
-              {
-                type: 'header',
-                props: {
-                  className: 'header',
-                  children: [
-                    {
-                      type: 'h1',
-                      props: { children: 'Frontend Hamroun Full-Stack App' }
-                    },
-                    {
-                      type: 'nav',
-                      props: {
-                        children: [
-                          { type: 'a', props: { href: '/', children: 'Home' } },
-                          { type: 'span', props: { children: ' | ' } },
-                          { type: 'a', props: { href: '/about', children: 'About' } },
-                          { type: 'span', props: { children: ' | ' } },
-                          { type: 'a', props: { href: '#login', id: 'login-link', children: 'Login' } }
-                        ]
-                      }
-                    }
-                  ]
-                }
-              },
-              {
-                type: 'main',
-                props: {
-                  children: [
-                    {
-                      type: 'section',
-                      props: {
-                        className: 'hero',
-                        children: [
-                          {
-                            type: 'h2',
-                            props: { children: 'Server-Side Rendering with Authentication' }
-                          },
-                          {
-                            type: 'p',
-                            props: { children: `This page was rendered on the server at ${new Date().toISOString()}` }
-                          }
-                        ]
-                      }
-                    },
-                    {
-                      type: 'section',
-                      props: {
-                        id: 'login-form',
-                        className: 'login-form hidden',
-                        children: [
-                          {
-                            type: 'h3',
-                            props: { children: 'Login' }
-                          },
-                          {
-                            type: 'div',
-                            props: {
-                              className: 'form-group',
-                              children: [
-                                {
-                                  type: 'label',
-                                  props: { htmlFor: 'username', children: 'Username:' }
-                                },
-                                {
-                                  type: 'input',
-                                  props: { id: 'username', type: 'text', placeholder: 'admin or user' }
-                                }
-                              ]
-                            }
-                          },
-                          {
-                            type: 'div',
-                            props: {
-                              className: 'form-group',
-                              children: [
-                                {
-                                  type: 'label',
-                                  props: { htmlFor: 'password', children: 'Password:' }
-                                },
-                                {
-                                  type: 'input',
-                                  props: { id: 'password', type: 'password', placeholder: 'admin123 or user123' }
-                                }
-                              ]
-                            }
-                          },
-                          {
-                            type: 'button',
-                            props: { id: 'login-button', className: 'btn', children: 'Login' }
-                          },
-                          {
-                            type: 'div',
-                            props: { id: 'login-message', className: 'message' }
-                          }
-                        ]
-                      }
-                    },
-                    {
-                      type: 'section',
-                      props: {
-                        id: 'protected-content',
-                        className: 'protected-content hidden',
-                        children: [
-                          {
-                            type: 'h3',
-                            props: { children: 'Protected Content' }
-                          },
-                          {
-                            type: 'div',
-                            props: { id: 'protected-data', className: 'data-container' }
-                          },
-                          {
-                            type: 'button',
-                            props: { id: 'load-protected', className: 'btn', children: 'Load Protected Data' }
-                          }
-                        ]
-                      }
-                    },
-                    {
-                      type: 'section',
-                      props: {
-                        id: 'admin-content',
-                        className: 'admin-content hidden',
-                        children: [
-                          {
-                            type: 'h3',
-                            props: { children: 'Admin Content' }
-                          },
-                          {
-                            type: 'div',
-                            props: { id: 'admin-data', className: 'data-container' }
-                          },
-                          {
-                            type: 'button',
-                            props: { id: 'load-admin', className: 'btn', children: 'Load Admin Data' }
-                          }
-                        ]
-                      }
-                    }
-                  ]
-                }
-              },
+        console.log(`Trying Gemini endpoint: ${url}`);
+        
+        const requestBody = {
+          contents: [{
+            parts: [{
+              text: `Generate SEO-friendly meta tags as JSON with the following format: 
               {
-                type: 'footer',
-                props: {
-                  children: [
-                    {
-                      type: 'p',
-                      props: { children: '© 2023 Frontend Hamroun' }
-                    }
-                  ]
-                }
+                "title": "A concise and engaging title",
+                "description": "A compelling description under 160 characters",
+                "keywords": "keyword1, keyword2, keyword3, keyword4, keyword5"
               }
-            ]
-          }
+              
+              The meta tags should be based on this content: ${pageContent}`
+            }]
+          }]
         };
-
-        // Generate HTML from our virtual node
-        const content = await renderToString(vnode);
         
-        // Send complete HTML document
-        res.send(`
-          <!DOCTYPE html>
-          <html>
-            <head>
-              <meta charset="UTF-8">
-              <meta name="viewport" content="width=device-width, initial-scale=1.0">
-              <title>Frontend Hamroun Full-Stack</title>
-              <style>
-                body {
-                  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-                  line-height: 1.6;
-                  color: #333;
-                  max-width: 1200px;
-                  margin: 0 auto;
-                  padding: 0 1rem;
-                }
-                .header {
-                  display: flex;
-                  justify-content: space-between;
-                  align-items: center;
-                  padding: 1rem 0;
-                  border-bottom: 1px solid #eee;
-                }
-                .hero {
-                  padding: 2rem 0;
-                }
-                .btn {
-                  background-color: #4CAF50;
-                  border: none;
-                  color: white;
-                  padding: 10px 20px;
-                  cursor: pointer;
-                  border-radius: 4px;
-                  margin-top: 1rem;
-                }
-                .hidden {
-                  display: none;
-                }
-                .form-group {
-                  margin-bottom: 1rem;
-                }
-                .form-group label {
-                  display: block;
-                  margin-bottom: 0.5rem;
-                }
-                .form-group input {
-                  padding: 0.5rem;
-                  width: 100%;
-                  max-width: 300px;
-                  border: 1px solid #ddd;
-                  border-radius: 4px;
-                }
-                .message {
-                  margin-top: 1rem;
-                  padding: 0.5rem;
-                }
-                .success {
-                  color: green;
-                  background-color: #e8f5e9;
-                }
-                .error {
-                  color: red;
-                  background-color: #ffebee;
-                }
-                .data-container {
-                  background-color: #f5f5f5;
-                  padding: 1rem;
-                  border-radius: 4px;
-                  margin: 1rem 0;
-                  min-height: 100px;
-                }
-                footer {
-                  margin-top: 2rem;
-                  padding: 1rem 0;
-                  border-top: 1px solid #eee;
-                  text-align: center;
-                }
-              </style>
-              <script>
-                // Client-side JavaScript for interactivity
-                document.addEventListener('DOMContentLoaded', () => {
-                  let token = localStorage.getItem('token');
-                  const user = JSON.parse(localStorage.getItem('user') || 'null');
-                  
-                  // Elements
-                  const loginLink = document.getElementById('login-link');
-                  const loginForm = document.getElementById('login-form');
-                  const loginButton = document.getElementById('login-button');
-                  const loginMessage = document.getElementById('login-message');
-                  const usernameInput = document.getElementById('username');
-                  const passwordInput = document.getElementById('password');
-                  const protectedContent = document.getElementById('protected-content');
-                  const adminContent = document.getElementById('admin-content');
-                  const loadProtectedBtn = document.getElementById('load-protected');
-                  const loadAdminBtn = document.getElementById('load-admin');
-                  const protectedData = document.getElementById('protected-data');
-                  const adminData = document.getElementById('admin-data');
-                  
-                  // Check if user is logged in
-                  if (token && user) {
-                    loginLink.textContent = \`Logout (\${user.username})\`;
-                    protectedContent.classList.remove('hidden');
-                    
-                    // Show admin content if user has admin role
-                    if (user.roles && user.roles.includes('admin')) {
-                      adminContent.classList.remove('hidden');
-                    }
-                  }
-                  
-                  // Toggle login form
-                  loginLink.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    
-                    if (token) {
-                      // Logout
-                      localStorage.removeItem('token');
-                      localStorage.removeItem('user');
-                      token = null;
-                      loginLink.textContent = 'Login';
-                      protectedContent.classList.add('hidden');
-                      adminContent.classList.add('hidden');
-                      loginMessage.textContent = '';
-                      loginMessage.className = 'message';
-                    } else {
-                      // Show login form
-                      loginForm.classList.toggle('hidden');
-                    }
-                  });
-                  
-                  // Login form submission
-                  loginButton.addEventListener('click', async () => {
-                    const username = usernameInput.value.trim();
-                    const password = passwordInput.value.trim();
-                    
-                    if (!username || !password) {
-                      loginMessage.textContent = 'Please enter both username and password';
-                      loginMessage.className = 'message error';
-                      return;
-                    }
-                    
-                    try {
-                      const response = await fetch('/api/auth/login', {
-                        method: 'POST',
-                        headers: {
-                          'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({ username, password })
-                      });
-                      
-                      const data = await response.json();
-                      
-                      if (response.ok) {
-                        token = data.token;
-                        localStorage.setItem('token', token);
-                        localStorage.setItem('user', JSON.stringify(data.user));
-                        
-                        loginMessage.textContent = 'Login successful';
-                        loginMessage.className = 'message success';
-                        
-                        // Update UI
-                        loginLink.textContent = \`Logout (\${data.user.username})\`;
-                        protectedContent.classList.remove('hidden');
-                        
-                        // Show admin content if user has admin role
-                        if (data.user.roles && data.user.roles.includes('admin')) {
-                          adminContent.classList.remove('hidden');
-                        }
-                        
-                        // Clear form
-                        usernameInput.value = '';
-                        passwordInput.value = '';
-                        
-                        // Hide login form after successful login
-                        setTimeout(() => {
-                          loginForm.classList.add('hidden');
-                        }, 1500);
-                      } else {
-                        loginMessage.textContent = data.message || 'Login failed';
-                        loginMessage.className = 'message error';
-                      }
-                    } catch (error) {
-                      console.error('Login error:', error);
-                      loginMessage.textContent = 'An error occurred while logging in';
-                      loginMessage.className = 'message error';
-                    }
-                  });
-                  
-                  // Load protected data
-                  loadProtectedBtn.addEventListener('click', async () => {
-                    if (!token) {
-                      protectedData.textContent = 'You must be logged in to view this data';
-                      return;
-                    }
-                    
-                    try {
-                      const response = await fetch('/api/protected', {
-                        headers: {
-                          'Authorization': \`Bearer \${token}\`
-                        }
-                      });
-                      
-                      if (response.ok) {
-                        const data = await response.json();
-                        protectedData.textContent = JSON.stringify(data, null, 2);
-                      } else {
-                        protectedData.textContent = 'Failed to load protected data. Your session may have expired.';
-                        
-                        if (response.status === 401) {
-                          // Session expired, clear localStorage
-                          localStorage.removeItem('token');
-                          localStorage.removeItem('user');
-                          token = null;
-                        }
-                      }
-                    } catch (error) {
-                      console.error('API error:', error);
-                      protectedData.textContent = 'An error occurred while fetching data';
-                    }
-                  });
-                  
-                  // Load admin data
-                  loadAdminBtn.addEventListener('click', async () => {
-                    if (!token) {
-                      adminData.textContent = 'You must be logged in to view this data';
-                      return;
-                    }
-                    
-                    try {
-                      const response = await fetch('/api/admin', {
-                        headers: {
-                          'Authorization': \`Bearer \${token}\`
-                        }
-                      });
-                      
-                      if (response.ok) {
-                        const data = await response.json();
-                        adminData.textContent = JSON.stringify(data, null, 2);
-                      } else if (response.status === 403) {
-                        adminData.textContent = 'You do not have permission to access this data. Admin role required.';
-                      } else {
-                        adminData.textContent = 'Failed to load admin data. Your session may have expired.';
-                      }
-                    } catch (error) {
-                      console.error('API error:', error);
-                      adminData.textContent = 'An error occurred while fetching data';
-                    }
-                  });
-                });
-              </script>
-            </head>
-            <body>${content}</body>
-          </html>
-        `);
-      } catch (error) {
-        console.error('SSR Error:', error);
-        res.status(500).send(`
-          <!DOCTYPE html>
-          <html>
-            <head>
-              <title>Server Error</title>
-              <style>body { font-family: sans-serif; padding: 2rem; }</style>
-            </head>
-            <body>
-              <h1>Server Error</h1>
-              <p>An error occurred while rendering the page.</p>
-              <pre>${error.stack}</pre>
-            </body>
-          </html>
-        `);
+        // Log the exact request for debugging
+        console.log('Sending request to Gemini:', JSON.stringify(requestBody, null, 2).substring(0, 150) + '...');
+        
+        response = await fetch(`${url}?key=${process.env.GEMINI_API_KEY}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(requestBody)
+        });
+        
+        // Get the response data
+        responseData = await response.text();
+        
+        // Try to parse it as JSON
+        try {
+          responseData = JSON.parse(responseData);
+          
+          if (response.ok) {
+            console.log('Successfully received response from Gemini');
+            break;
+          } else {
+            console.error('Gemini API error response:', responseData);
+          }
+        } catch (parseError) {
+          console.error('Failed to parse Gemini response as JSON:', responseData.substring(0, 150));
+          throw parseError;
+        }
+      } catch (err) {
+        console.log(`Endpoint ${url} failed:`, err.message);
       }
-    });
+    }
     
-    // Start the server
-    await app.start();
+    if (!response || !response.ok) {
+      throw new Error('Failed to get valid response from Gemini API');
+    }
+
+    // Extract the text response - using the correct response format for gemini-2.0-flash
+    const textResponse = responseData.candidates[0].content.parts[0].text;
     
-    console.log(`Server running at http://localhost:${app.config.port}`);
-    console.log('Available routes:');
-    console.log('- / (Home page with SSR)');
-    console.log('- /api/auth/login (POST: Login endpoint)');
-    console.log('- /api/protected (GET: Protected data, requires authentication)');
-    console.log('- /api/admin (GET: Admin data, requires admin role)');
+    // Extract the JSON object from the text response
+    const jsonMatch = textResponse.match(/\{[\s\S]*\}/);
+    if (!jsonMatch) {
+      console.error('Could not find JSON in response:', textResponse);
+      throw new Error('Could not parse JSON from Gemini response');
+    }
     
-    // Handle graceful shutdown
-    process.on('SIGINT', async () => {
-      console.log('Shutting down server...');
-      await app.stop();
-      process.exit(0);
-    });
+    try {
+      const metaTagsJson = jsonMatch[0];
+      const metaTags = JSON.parse(metaTagsJson);
+      console.log('Generated meta tags using Gemini:', metaTags);
+      
+      return metaTags;
+    } catch (jsonError) {
+      console.error('Failed to parse extracted JSON:', jsonMatch[0]);
+      throw jsonError;
+    }
   } catch (error) {
-    console.error('Failed to start server:', error);
-    process.exit(1);
+    console.error('Error generating meta tags with Gemini:', error);
+    throw error;
   }
 }
 
-startServer();
+// Basic server-side rendering implementation
+app.get('/', async (req, res) => {
+  console.log('Handling root route for SSR');
+  try {
+    // Import the renderToString function
+    const frontendLib = await import('frontend-hamroun');
+    
+    // Create a simple virtual DOM tree
+    const vnode = {
+      type: 'div',
+      props: {
+        id: 'app',
+        children: [
+          {
+            type: 'h1',
+            props: {
+              children: 'Hello from Server-Side Rendering!'
+            }
+          },
+          {
+            type: 'p',
+            props: {
+              children: `This page was rendered at ${new Date().toISOString()}`
+            }
+          },
+          {
+            type: 'button',
+            props: {
+              id: 'counter-btn',
+              className: 'btn',
+              children: 'Click me (0)'
+            }
+          }
+        ]
+      }
+    };
+
+    // Generate content for meta tag creation
+    const contentForMetaTags = 'Server-side rendered page using Frontend Hamroun framework. ' +
+      'This demonstrates SSR capabilities with dynamic content generation and client-side hydration.';
+    
+    console.log('Fetching meta tags for the page using Gemini 2.0 Flash...');
+    const metaTags = await generateMetaTags(contentForMetaTags);
+    
+    // The renderToString function exists and works properly
+    console.log('renderToString type:', typeof frontendLib.renderToString);
+    
+    // Generate HTML from our virtual node
+    let content;
+    if (typeof frontendLib.renderToString === 'function') {
+      // Call the function
+      const renderResult = frontendLib.renderToString(vnode);
+      
+      // If it returns a promise, await it
+      if (renderResult instanceof Promise) {
+        console.log('renderToString returned a Promise, awaiting it');
+        content = await renderResult;
+      } else {
+        console.log('renderToString returned directly:', typeof renderResult);
+        content = renderResult;
+      }
+    } else {
+      throw new Error('renderToString is not a function');
+    }
+    
+    // Log the content to verify it's not empty or still a Promise
+    console.log('Final content type:', typeof content);
+    console.log('Content preview:', content ? content.substring(0, 100) : 'empty');
+    
+    // Send complete HTML document with explicit content type
+    res.setHeader('Content-Type', 'text/html');
+    res.send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          
+          <!-- AI Generated Meta Tags -->
+          <title>${metaTags.title}</title>
+          <meta name="description" content="${metaTags.description}">
+          <meta name="keywords" content="${metaTags.keywords}">
+          
+          <!-- Open Graph tags -->
+          <meta property="og:title" content="${metaTags.title}">
+          <meta property="og:description" content="${metaTags.description}">
+          <meta property="og:type" content="website">
+          <meta property="og:url" content="${req.protocol}://${req.get('host')}${req.originalUrl}">
+          
+          <!-- Twitter Card tags -->
+          <meta name="twitter:card" content="summary_large_image">
+          <meta name="twitter:title" content="${metaTags.title}">
+          <meta name="twitter:description" content="${metaTags.description}">
+          
+          <style>
+            body {
+              font-family: sans-serif;
+              max-width: 800px;
+              margin: 0 auto;
+              padding: 2rem;
+            }
+            .btn {
+              background-color: #4CAF50;
+              border: none;
+              color: white;
+              padding: 10px 20px;
+              cursor: pointer;
+              border-radius: 4px;
+              margin-top: 1rem;
+            }
+          </style>
+          <script>
+            // Simple client-side interactivity
+            document.addEventListener('DOMContentLoaded', () => {
+              const btn = document.getElementById('counter-btn');
+              if (btn) {
+                let count = 0;
+                btn.addEventListener('click', () => {
+                  count++;
+                  btn.textContent = \`Click me (\${count})\`;
+                });
+                console.log('Button click handler attached');
+              }
+            });
+          </script>
+        </head>
+        <body>${content || '<div>Error: No content generated</div>'}</body>
+      </html>
+    `);
+  } catch (error) {
+    console.error('SSR Error:', error);
+    
+    // Fallback HTML with error details
+    res.status(500).send(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>SSR Error</title>
+          <style>
+            body { font-family: sans-serif; padding: 2rem; }
+            pre { background: #f5f5f5; padding: 1rem; overflow: auto; }
+          </style>
+        </head>
+        <body>
+          <h1>Server-Side Rendering Error</h1>
+          <p>There was a problem rendering the page.</p>
+          <pre>${error.stack}</pre>
+          <p>Try refreshing the page or contact the administrator if the problem persists.</p>
+        </body>
+      </html>
+    `);
+  }
+});
+
+// Serve static files AFTER routes that need SSR
+app.use(express.static(path.join(__dirname, 'public')));
+
+// A catch-all route for any other requests
+app.get('*', (req, res) => {
+  console.log(`Handling catch-all route: ${req.path}`);
+  res.status(404).send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>Page Not Found</title>
+        <style>
+          body { font-family: sans-serif; padding: 2rem; }
+        </style>
+      </head>
+      <body>
+        <h1>Page Not Found</h1>
+        <p>The page you requested does not exist.</p>
+        <p><a href="/">Go to home page</a></p>
+      </body>
+    </html>
+  `);
+});
+
+// Start the server
+app.listen(PORT, () => {
+  console.log(`Server running at http://localhost:${PORT}`);
+  console.log(`Open your browser and navigate to http://localhost:${PORT}`);
+});