fix: configure frontend for Cloudflare Pages deployment

FlowEvolve · claude · FlowEvolve · commit b34dfb3ea16b · 2025-08-13T12:49:16.000-04:00
Configuration Changes: - Updated deployment workflow from Vercel to Cloudflare Pages - Configured Next.js for static export with Cloudflare Pages - Connected frontend to existing Cloudflare Workers backend API - Added JSON API endpoint to workers for frontend consumption Technical Details: - Next.js static export mode with trailingSlash and unoptimized images - Frontend API client points to existing workers backend - New /api/generate endpoint in workers returns JSON instead of HTML - Maintains backward compatibility with original HTML endpoints Deployment Strategy: - Frontend: Cloudflare Pages (static export) - Backend API: Existing Cloudflare Workers (modularized) - Uses same CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID secrets 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/.github/workflows/deploy-frontend.yml b/.github/workflows/deploy-frontend.yml
@@ -1,4 +1,4 @@
-name: Deploy Frontend to Vercel
+name: Deploy Frontend to Cloudflare Pages
 
 on:
   push:
@@ -22,6 +22,9 @@ jobs:
     runs-on: ubuntu-latest
     name: Deploy Frontend to Staging
     environment: staging
+    env:
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -33,24 +36,31 @@ jobs:
           cache: 'npm'
           cache-dependency-path: frontend/package-lock.json
 
+      - name: "Preflight: verify Cloudflare secrets (staging)"
+        run: |
+          if [ -z "${CLOUDFLARE_API_TOKEN}" ] || [ -z "${CLOUDFLARE_ACCOUNT_ID}" ]; then
+            echo "::error::Missing Cloudflare secrets. Ensure CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID are set in repository or environment secrets."
+            exit 1
+          fi
+
       - name: Install frontend dependencies
         run: npm ci
         working-directory: frontend
 
-      - name: Build frontend
+      - name: Build frontend for Cloudflare Pages
         run: npm run build
         working-directory: frontend
         env:
           NODE_ENV: production
 
-      - name: Deploy to Vercel (Staging)
-        uses: amondnet/vercel-action@v25
+      - name: Deploy to Cloudflare Pages (Staging)
+        uses: cloudflare/pages-action@v1
         with:
-          vercel-token: ${{ secrets.VERCEL_TOKEN }}
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
-          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
-          working-directory: frontend
-          scope: ${{ secrets.VERCEL_ORG_ID }}
+          apiToken: ${{ env.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ env.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: supabase-configurator-staging
+          directory: frontend/out
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Comment PR with staging URL
         if: github.event_name == 'pull_request'
@@ -61,7 +71,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: '🚀 Frontend staging deployment complete!\\n\\n**Preview URL:** Available in Vercel deployment logs\\n\\nTest your changes before merging to production.'
+              body: '🚀 Frontend staging deployment complete!\\n\\n**Preview URL:** https://supabase-configurator-staging.pages.dev\\n\\nTest your changes before merging to production.'
             })
 
   # Deploy to production on main branch
@@ -70,6 +80,9 @@ jobs:
     runs-on: ubuntu-latest
     name: Deploy Frontend to Production
     environment: production
+    env:
+      CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+      CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -81,6 +94,13 @@ jobs:
           cache: 'npm'
           cache-dependency-path: frontend/package-lock.json
 
+      - name: "Preflight: verify Cloudflare secrets (production)"
+        run: |
+          if [ -z "${CLOUDFLARE_API_TOKEN}" ] || [ -z "${CLOUDFLARE_ACCOUNT_ID}" ]; then
+            echo "::error::Missing Cloudflare secrets. Ensure CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID are set in repository or environment secrets."
+            exit 1
+          fi
+
       - name: Install frontend dependencies
         run: npm ci
         working-directory: frontend
@@ -89,35 +109,35 @@ jobs:
         run: npm run typecheck
         working-directory: frontend
 
-      - name: Run linting  
+      - name: Run linting
         run: npm run lint
         working-directory: frontend
 
-      - name: Build frontend
+      - name: Build frontend for Cloudflare Pages
         run: npm run build
         working-directory: frontend
         env:
           NODE_ENV: production
 
-      - name: Deploy to Vercel (Production)
+      - name: Deploy to Cloudflare Pages (Production)
         id: deploy
-        uses: amondnet/vercel-action@v25
+        uses: cloudflare/pages-action@v1
         with:
-          vercel-token: ${{ secrets.VERCEL_TOKEN }}
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
-          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
-          vercel-args: '--prod'
-          working-directory: frontend
-          scope: ${{ secrets.VERCEL_ORG_ID }}
+          apiToken: ${{ env.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ env.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: supabase-configurator
+          directory: frontend/out
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Show deployment URL
         run: |
-          echo "🚀 Frontend deployed successfully to Vercel!"
-          echo "📍 Production URL: https://supabase-configurator.vercel.app (or your custom domain)"
+          echo "🚀 Frontend deployed successfully to Cloudflare Pages!"
+          echo "📍 Production URL: https://supabase-configurator.pages.dev"
+          echo "📍 Custom domain can be configured in Cloudflare Pages dashboard"
           echo ""
           echo "🔧 Next steps:"
-          echo "   1. Configure custom domain in Vercel dashboard"
-          echo "   2. Update DNS records if using custom domain"
+          echo "   1. Configure custom domain in Cloudflare Pages dashboard"
+          echo "   2. Update DNS records to point to Cloudflare Pages"
           echo "   3. Enable Lighthouse testing with confirmed URL"
 
   # Health check after deployment
@@ -128,20 +148,20 @@ jobs:
     name: Production Health Check
     steps:
       - name: Wait for deployment
-        run: sleep 30
+        run: sleep 45
 
       - name: Health Check
         run: |
           echo "Checking production health..."
-          # Test the deployment - update with your actual Vercel URL
-          URL="https://supabase-configurator.vercel.app"
+          # Test the Cloudflare Pages deployment
+          URL="https://supabase-configurator.pages.dev"
           
           if curl -f -s --max-time 10 "$URL" > /dev/null; then
             echo "✅ Frontend is accessible at $URL"
           else
             echo "❌ Frontend health check failed"
             echo "🔍 Manual check required at $URL"
-            # Don't fail the workflow since URL might be different
+            # Don't fail workflow since URL might be different initially
           fi
 
       - name: Notify on failure
@@ -156,7 +176,7 @@ jobs:
               body: `Production frontend deployment failed for commit ${context.sha}.\\n\\nPlease investigate immediately.\\n\\n**Commit:** ${context.sha}\\n**Workflow:** ${context.workflow}\\n**Run:** ${context.runId}`
             })
 
-  # Optional: Lighthouse performance test
+  # Lighthouse performance test
   lighthouse:
     needs: [deploy-production]
     if: false # Enable once URL is confirmed: github.ref == 'refs/heads/main' && github.event_name == 'push'
@@ -167,13 +187,13 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Wait for deployment
-        run: sleep 45
+        run: sleep 60
 
       - name: Lighthouse CI
         uses: treosh/lighthouse-ci-action@v10
         with:
           urls: |
-            https://supabase-configurator.vercel.app
+            https://supabase-configurator.pages.dev
           configPath: './.lighthouserc.json'
           uploadArtifacts: true
           temporaryPublicStorage: true
diff --git a/frontend/.deploy-trigger-frontend b/frontend/.deploy-trigger-frontend
@@ -1,10 +1,11 @@
-Frontend deployment trigger - Modularized code ready for deployment
+Frontend deployment trigger - Modularized Next.js ready for Cloudflare Pages
 
 Modularization completed:
 - DeploymentModal split into 3 modules (271 lines total)  
 - config-generator split into 3 modules (60 + 343 + 157 + 51 lines)
 - All files now under 500 line limit
-- Ready for Vercel deployment
+- Configured for Cloudflare Pages static export
+- Using existing Cloudflare Workers backend for API calls
 
-Created at: 2025-08-13T15:58:00Z
+Updated at: 2025-08-13T16:44:00Z
 
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
@@ -1,6 +1,12 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  // Configure for Cloudflare Pages static export
+  output: 'export',
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   eslint: {
     // Disable ESLint during builds for development
     ignoreDuringBuilds: true,
diff --git a/workers/index.mjs b/workers/index.mjs
@@ -59,6 +59,91 @@ async function handleRequest(request) {
             }
         }
 
+        // JSON API endpoint for frontend
+        if (path === '/api/generate' && request.method === 'POST') {
+            const formData = await request.formData();
+            const data = Object.fromEntries(formData.entries());
+
+            // Validate input
+            const validationErrors = validateInput(data);
+            if (validationErrors.length > 0) {
+                return new Response(JSON.stringify({ 
+                    error: 'Validation failed', 
+                    details: validationErrors 
+                }), {
+                    status: 400,
+                    headers: { 
+                        'Content-Type': 'application/json',
+                        ...corsHeaders 
+                    }
+                });
+            }
+
+            // Generate secure credentials if not provided
+            const config = {
+                project_name: data.project_name,
+                domain: data.domain,
+                email: data.email,
+                db_password: data.db_password || generatePassword(32),
+                jwt_secret: data.jwt_secret || generateSecureSecret(64)
+            };
+
+            // Generate JWT keys if not provided
+            if (!data.anon_key || !data.service_key) {
+                try {
+                    const anonPayload = { role: 'anon', iss: 'supabase' };
+                    const servicePayload = { role: 'service_role', iss: 'supabase' };
+                    
+                    config.anon_key = data.anon_key || await generateJWT(config.jwt_secret, anonPayload);
+                    config.service_key = data.service_key || await generateJWT(config.jwt_secret, servicePayload);
+                } catch (error) {
+                    console.error('JWT generation error:', error);
+                    return new Response(JSON.stringify({ 
+                        error: 'Failed to generate JWT keys: ' + error.message 
+                    }), {
+                        status: 500,
+                        headers: { 
+                            'Content-Type': 'application/json',
+                            ...corsHeaders 
+                        }
+                    });
+                }
+            } else {
+                config.anon_key = data.anon_key;
+                config.service_key = data.service_key;
+            }
+
+            // Generate configuration files and return JSON
+            try {
+                const envContent = generateEnvFile(config);
+                const composeContent = generateDockerCompose(config);
+                
+                return new Response(JSON.stringify({
+                    envContent,
+                    composeContent,
+                    overrideContent: '', // Add override if needed
+                    config
+                }), {
+                    headers: { 
+                        'Content-Type': 'application/json',
+                        ...corsHeaders 
+                    }
+                });
+
+            } catch (error) {
+                console.error('Configuration generation error:', error);
+                return new Response(JSON.stringify({ 
+                    error: 'Configuration generation failed: ' + error.message 
+                }), {
+                    status: 500,
+                    headers: { 
+                        'Content-Type': 'application/json',
+                        ...corsHeaders 
+                    }
+                });
+            }
+        }
+
         if (path === '/generate' && request.method === 'POST') {
             const formData = await request.formData();
             const data = Object.fromEntries(formData.entries());
