Implement SPA routing and remove .html extensions from navigation links

Author: ralyodio

.github/workflows/deploy.yml

@@ -84,52 +84,30 @@ jobs:
           # Print confirmation (without showing the content for security)
           echo "Created .env file with $(grep -c '' .env) lines"
           
-      - name: Install Supabase CLI and setup project
+      - name: Prepare for deployment
         run: |
           # Make scripts executable
           chmod +x ./bin/supabase-db.sh
+          chmod +x ./bin/deploy.sh
+          chmod +x ./bin/deploy-with-migrations.sh
           
           # Debug: Check .env file existence
           echo "Checking .env file..."
           if [ -f .env ]; then
             echo ".env file exists with $(grep -c '' .env) lines"
-            # Check if required variables are in .env (without showing values)
-            grep -q "SUPABASE_URL" .env && echo "SUPABASE_URL is set" || echo "SUPABASE_URL is missing"
-            grep -q "SUPABASE_KEY" .env && echo "SUPABASE_KEY is set" || echo "SUPABASE_KEY is missing"
-            grep -q "SUPABASE_DB_PASSWORD" .env && echo "SUPABASE_DB_PASSWORD is set" || echo "SUPABASE_DB_PASSWORD is missing"
-            grep -q "SUPABASE_ACCESS_TOKEN" .env && echo "SUPABASE_ACCESS_TOKEN is set" || echo "SUPABASE_ACCESS_TOKEN is missing"
           else
             echo ".env file does not exist"
           fi
-          
-          # Setup Supabase project
-          ./bin/supabase-db.sh setup
-          
-          # Add to PATH
-          export PATH="$HOME/.local/bin:$PATH"
-          
-          # Verify installation
-          supabase --version
-        env:
-          SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
-          SUPABASE_KEY: ${{ secrets.SUPABASE_KEY }}
-          SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
-          SUPABASE_DB_PASSWORD: ${{ secrets.SUPABASE_DB_PASSWORD }}
-          SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
       
       - name: Deploy to server with migrations
         run: |
-          # Make deploy scripts executable
-          chmod +x ./bin/deploy.sh
-          chmod +x ./bin/deploy-with-migrations.sh
-          
           # Print debug info
           echo "Current directory: $(pwd)"
           echo "Files in bin directory:"
           ls -la ./bin
           
           # Run deploy script with migrations
-          DEPLOY_REMOTE_HOST=104.36.23.197 DEPLOY_REMOTE_PORT=2048 DEPLOY_REMOTE_USER=ubuntu ./bin/deploy-with-migrations.sh
+          ./bin/deploy-with-migrations.sh
           
           # Run test script to verify deployment
           echo "Running test script on remote server..."
@@ -139,8 +117,4 @@ jobs:
           DEPLOY_REMOTE_PORT: 2048
           DEPLOY_REMOTE_USER: ubuntu
           DEPLOY_REMOTE_DIR: www/profullstack.com/pdf
-          INSTALL_SERVICE: true
-          SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
-          SUPABASE_KEY: ${{ secrets.SUPABASE_KEY }}
-          SUPABASE_DB_PASSWORD: ${{ secrets.SUPABASE_DB_PASSWORD }}
-          SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
+          INSTALL_SERVICE: true

bin/deploy-with-migrations.sh

@@ -9,38 +9,45 @@ NC='\033[0m' # No Color
 
 echo -e "${YELLOW}Starting deployment with migrations...${NC}"
 
+# Load environment variables from .env file
+if [ -f .env ]; then
+    echo "Loading environment variables from .env file..."
+    export $(grep -v '^#' .env | xargs)
+else
+    echo "No .env file found. Using default values."
+fi
+
+# Define variables with fallbacks
+REMOTE_HOST="${DEPLOY_REMOTE_HOST:-104.36.23.197}"
+REMOTE_PORT="${DEPLOY_REMOTE_PORT:-2048}"
+REMOTE_USER="${DEPLOY_REMOTE_USER:-ubuntu}"
+REMOTE_DIR="${DEPLOY_REMOTE_DIR:-www/profullstack.com/pdf}"
+
+# Create SSH options
+SSH_OPTS="-p $REMOTE_PORT"
+
 # Deploy the code first
 echo -e "${YELLOW}Running deployment script...${NC}"
 ./bin/deploy.sh
 
 echo -e "${GREEN}Deployment successful!${NC}"
 
-# Debug: Print environment variables (masked for security)
-echo -e "${YELLOW}Checking environment variables...${NC}"
-echo "SUPABASE_URL is ${SUPABASE_URL:+set}${SUPABASE_URL:-not set}"
-echo "SUPABASE_KEY is ${SUPABASE_KEY:+set}${SUPABASE_KEY:-not set}"
-echo "SUPABASE_DB_PASSWORD is ${SUPABASE_DB_PASSWORD:+set}${SUPABASE_DB_PASSWORD:-not set}"
-echo "SUPABASE_ACCESS_TOKEN is ${SUPABASE_ACCESS_TOKEN:+set}${SUPABASE_ACCESS_TOKEN:-not set}"
+# Run migrations on the remote server
+echo -e "${YELLOW}Running database migrations on remote server...${NC}"
+ssh $SSH_OPTS $REMOTE_USER@$REMOTE_HOST "cd $REMOTE_DIR && ./bin/supabase-db.sh migrate"
 
-# Run migrations using Supabase CLI
-echo -e "${YELLOW}Running database migrations with Supabase CLI...${NC}"
-
-# Check if required environment variables are set
-if [ -z "$SUPABASE_URL" ] || [ -z "$SUPABASE_KEY" ] || [ -z "$SUPABASE_DB_PASSWORD" ] || [ -z "$SUPABASE_ACCESS_TOKEN" ]; then
-  echo -e "${RED}Error: Required Supabase environment variables are not set.${NC}"
-  echo -e "${YELLOW}Make sure SUPABASE_URL, SUPABASE_KEY, SUPABASE_DB_PASSWORD, and SUPABASE_ACCESS_TOKEN are set.${NC}"
+if [ $? -eq 0 ]; then
+  echo -e "${GREEN}Migrations successful!${NC}"
+else
+  echo -e "${RED}Migrations failed. Please check the error messages above.${NC}"
+  echo -e "${YELLOW}You can try running migrations manually by connecting to the remote server and running:${NC}"
+  echo -e "  ssh $SSH_OPTS $REMOTE_USER@$REMOTE_HOST \"cd $REMOTE_DIR && ./bin/supabase-db.sh migrate\""
   exit 1
 fi
 
-# Run migrations directly
-echo -e "${YELLOW}Running migrations...${NC}"
-./bin/supabase-db.sh migrate
-
-echo -e "${GREEN}Migrations successful!${NC}"
-
 # Restart the service
 echo -e "${YELLOW}Restarting service...${NC}"
-ssh -p 2048 [email protected] "sudo systemctl restart profullstack-pdf.service"
+ssh $SSH_OPTS $REMOTE_USER@$REMOTE_HOST "sudo systemctl restart profullstack-pdf.service"
 
 echo -e "${GREEN}Service restarted successfully!${NC}"
 echo -e "${GREEN}Deployment with migrations completed successfully!${NC}"

index.js

@@ -5,6 +5,7 @@ import puppeteer from 'puppeteer';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import dotenvFlow from 'dotenv-flow';
+import fs from 'fs/promises';
 import { marked } from 'marked';
 import * as XLSX from 'xlsx';
 import { JSDOM } from 'jsdom';
@@ -17,9 +18,65 @@ dotenvFlow.config();
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const app = new Hono();
 
+// SPA routing middleware
+app.use('*', async (c, next) => {
+  const url = new URL(c.req.url);
+  const pathname = url.pathname;
+  
+  // Skip API routes
+  if (pathname.startsWith('/api/')) {
+    return next();
+  }
+  
+  // If the path has no extension, it might be an SPA route
+  if (pathname !== '/' && !pathname.includes('.')) {
+    // Try to serve the HTML file with the same name
+    const htmlPath = path.join(__dirname, 'public', `${pathname}.html`);
+    const viewsPath = path.join(__dirname, 'public', 'views', `${pathname}.html`);
+    
+    try {
+      // Check if the HTML file exists in public directory
+      await fs.access(htmlPath);
+      // If it exists, rewrite the URL to the HTML file
+      c.req.url = new URL(`${pathname}.html`, c.req.url).toString();
+      return next();
+    } catch (e) {
+      try {
+        // Check if the HTML file exists in views directory
+        await fs.access(viewsPath);
+        // If it exists, rewrite the URL to the views HTML file
+        c.req.url = new URL(`/views${pathname}.html`, c.req.url).toString();
+        return next();
+      } catch (e) {
+        // If neither exists, let it fall through to the SPA handler
+      }
+    }
+  }
+  
+  return next();
+});
+
 // Serve static files from the public directory
 app.use('/*', serveStatic({ root: './public' }));
 
+// SPA fallback for routes that don't match any static files
+app.get('*', async (c, next) => {
+  const url = new URL(c.req.url);
+  const pathname = url.pathname;
+  
+  // Skip API routes and files with extensions
+  if (pathname.startsWith('/api/') || pathname.includes('.')) {
+    return next();
+  }
+  
+  // If we got here, it's a client-side route, serve the index.html
+  // This allows the client-side router to handle the route
+  console.log(`Serving index.html for SPA route: ${pathname}`);
+  const indexPath = path.join(__dirname, 'public', 'index.html');
+  const indexContent = await fs.readFile(indexPath, 'utf-8');
+  return c.html(indexContent);
+});
+
 // Health check endpoint
 app.get('/', (c) => {
   // If the request accepts HTML, the static file middleware will handle it

public/index.html

@@ -97,8 +97,8 @@ <h2>Generate Documents from HTML with Ease</h2>
       <p>Convert HTML content to PDF, Word, Excel, PowerPoint, and EPUB formats with a simple API call. Perfect for reports, invoices, presentations, and more.</p>
 
       <div class="cta-buttons">
-        <a href="/register.html" class="cta-primary">Get Started</a>
-        <a href="/login.html" class="cta-secondary">Login</a>
+        <a href="/register" class="cta-primary">Get Started</a>
+        <a href="/login" class="cta-secondary">Login</a>
       </div>
     </div>
   </div>

public/js/components/pf-footer.js

@@ -86,15 +86,15 @@ class PfFooter extends HTMLElement {
             <h3>Document Generation API</h3>
             <ul class="footer-links">
               <li><a href="/">Home</a></li>
-              <li><a href="/api-docs.html">API Documentation</a></li>
-              <li><a href="/subscription.html">Pricing</a></li>
+              <li><a href="/api-docs">API Documentation</a></li>
+              <li><a href="/subscription">Pricing</a></li>
             </ul>
           </div>
           
           <div class="footer-section">
             <h3>Resources</h3>
             <ul class="footer-links">
-              <li><a href="/api-keys.html">API Keys</a></li>
+              <li><a href="/api-keys">API Keys</a></li>
               <li><a href="https://github.com/profullstack/pdf" target="_blank">GitHub</a></li>
               <li><a href="mailto:[email protected]">Support</a></li>
             </ul>
@@ -103,8 +103,8 @@ class PfFooter extends HTMLElement {
           <div class="footer-section">
             <h3>Legal</h3>
             <ul class="footer-links">
-              <li><a href="/terms.html">Terms of Service</a></li>
-              <li><a href="/privacy.html">Privacy Policy</a></li>
+              <li><a href="/terms">Terms of Service</a></li>
+              <li><a href="/privacy">Privacy Policy</a></li>
             </ul>
           </div>
         </div>

public/js/components/pf-header.js

@@ -137,10 +137,10 @@ class PfHeader extends HTMLElement {
         
         <div class="nav-links">
           <a href="/" class="nav-link">Home</a>
-          <a href="/api-docs.html" class="nav-link">API Docs</a>
-          <a href="/api-keys.html" class="nav-link">API Keys</a>
-          <a href="/login.html" class="nav-link login-link">Login</a>
-          <a href="/register.html" class="subscription-link register-link">Register</a>
+          <a href="/api-docs" class="nav-link">API Docs</a>
+          <a href="/api-keys" class="nav-link">API Keys</a>
+          <a href="/login" class="nav-link login-link">Login</a>
+          <a href="/register" class="subscription-link register-link">Register</a>
         </div>
       </div>
     `;
@@ -189,7 +189,7 @@ class PfHeader extends HTMLElement {
             </svg>
           </button>
           <div class="dropdown-menu">
-            <a href="/settings.html" class="dropdown-item">Settings</a>
+            <a href="/settings" class="dropdown-item">Settings</a>
             <a href="#" class="dropdown-item logout-button">Logout</a>
           </div>
         </div>
@@ -241,7 +241,7 @@ class PfHeader extends HTMLElement {
 
     // Redirect to home page if on a protected page
     const currentPath = window.location.pathname;
-    const protectedPages = ['/api-keys.html', '/settings.html'];
+    const protectedPages = ['/api-keys', '/settings'];
 
     if (protectedPages.includes(currentPath)) {
       window.location.href = '/';