feat: implement subdomain-based bundle preview (#1362)

* feat: implement subdomain-based bundle preview for assets to work correctly

Add wildcard subdomain routes (*.preview.capgo.app) to serve bundle previews
from root path, allowing all assets (JS, CSS, etc.) to work correctly without
path rewriting. New preview_subdomain handler uses cookie-based auth to persist
tokens across asset requests. Format: {app_id}-{version_id}.preview.capgo.app

🤖 Generated with Claude Code

Co-Authored-By: Claude Haiku 4.5 <[email protected]>

* refactor: consolidate preview handlers into single subdomain-based file

Remove redundant path-based preview handler and keep only the subdomain
approach. Rename preview_subdomain.ts to preview.ts for simplicity.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

* fix: correct import order in preview.ts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

---------

Co-authored-by: Claude Haiku 4.5 <[email protected]>

Author: riderx

cloudflare_workers/files/index.ts

@@ -12,10 +12,24 @@ export { AttachmentUploadHandler, UploadHandler } from '../../supabase/functions
 const functionName = 'files'
 const app = createHono(functionName, version, env.SENTRY_DSN)
 
+// Check if request is from a preview subdomain (*.preview[.env].capgo.app)
+function isPreviewSubdomain(hostname: string): boolean {
+  return /^[^.]+\.preview(?:\.[^.]+)?\.(?:capgo\.app|usecapgo\.com)$/.test(hostname)
+}
+
+// Middleware to route preview subdomain requests
+app.use('/*', async (c, next) => {
+  const hostname = c.req.header('host') || ''
+  if (isPreviewSubdomain(hostname)) {
+    // Route all requests from preview subdomains to the subdomain handler
+    return preview.fetch(c.req.raw, c.env, c.executionCtx)
+  }
+  return next()
+})
+
 // Files API
 app.route('/files', files)
 app.route('/ok', ok)
-app.route('/preview', preview)
 
 // TODO: remove deprecated path when all users have been migrated
 app.route('/private/download_link', download_link)

cloudflare_workers/files/wrangler.jsonc

@@ -48,6 +48,12 @@
           "pattern": "files.capgo.app",
           "custom_domain": true
         },
+        // Wildcard subdomain for bundle preview - serves files from root so assets work
+        // Format: {app_id}-{version_id}.preview.capgo.app
+        {
+          "pattern": "*.preview.capgo.app",
+          "zone_name": "capgo.app"
+        },
         // No special domain to ease clients who allow specific domains only
         {
           "pattern": "api.capgo.app/files*",
@@ -140,6 +146,10 @@
         }
       ],
       "routes": [
+        {
+          "pattern": "*.preview.preprod.capgo.app",
+          "zone_name": "capgo.app"
+        },
         {
           "pattern": "api.preprod.capgo.app/files*",
           "zone_name": "capgo.app"
@@ -188,6 +198,10 @@
         "enabled": true
       },
       "routes": [
+        {
+          "pattern": "*.preview.dev.capgo.app",
+          "zone_name": "capgo.app"
+        },
         {
           "pattern": "api.dev.capgo.app/files*",
           "zone_name": "capgo.app"

supabase/functions/_backend/files/preview.ts

@@ -1,6 +1,7 @@
 import type { Context } from 'hono'
 import type { MiddlewareKeyVariables } from '../utils/hono.ts'
 import { getRuntimeKey } from 'hono/adapter'
+import { getCookie, setCookie } from 'hono/cookie'
 import { Hono } from 'hono/tiny'
 import { simpleError, useCors } from '../utils/hono.ts'
 import { cloudlog } from '../utils/logging.ts'
@@ -39,32 +40,72 @@ function getContentType(filePath: string): string {
   return MIME_TYPES[ext] || 'application/octet-stream'
 }
 
+// Cookie name for storing the auth token
+const TOKEN_COOKIE_NAME = 'capgo_preview_token'
+
+// Parse subdomain format: {app_id_with_dots_as_underscores}-{version_id}.preview[.env].capgo.app
+// Example: ee__forgr__capacitor_go-222063.preview.capgo.app
+function parsePreviewSubdomain(hostname: string): { appId: string, versionId: number } | null {
+  // Match pattern: {something}.preview[.optional-env].capgo.app or usecapgo.com
+  const match = hostname.match(/^([^.]+)\.preview(?:\.[^.]+)?\.(?:capgo\.app|usecapgo\.com)$/)
+  if (!match)
+    return null
+
+  const subdomain = match[1]
+  // Split by last hyphen to get app_id and version_id
+  // app_id has dots replaced with double underscores
+  const lastHyphen = subdomain.lastIndexOf('-')
+  if (lastHyphen === -1)
+    return null
+
+  const appIdEncoded = subdomain.substring(0, lastHyphen)
+  const versionIdStr = subdomain.substring(lastHyphen + 1)
+
+  // Decode app_id: replace __ with .
+  const appId = appIdEncoded.replace(/__/g, '.')
+  const versionId = Number.parseInt(versionIdStr, 10)
+
+  if (!appId || Number.isNaN(versionId))
+    return null
+
+  return { appId, versionId }
+}
+
 export const app = new Hono<MiddlewareKeyVariables>()
 
 app.use('/*', useCors)
 
-// GET /preview/:app_id/:version_id or GET /preview/:app_id/:version_id/*filepath
-// Note: We don't use middlewareAuth here because iframes can't send headers
-// Instead, we accept the token from either Authorization header or query param
-app.get('/:app_id/:version_id', handlePreview)
-app.get('/:app_id/:version_id/*', handlePreview)
+// Handle all requests from subdomain - files are served from root
+app.get('/*', handlePreviewSubdomain)
+
+async function handlePreviewSubdomain(c: Context<MiddlewareKeyVariables>) {
+  const hostname = c.req.header('host') || ''
+  const parsed = parsePreviewSubdomain(hostname)
 
-async function handlePreview(c: Context<MiddlewareKeyVariables>) {
-  const appId = c.req.param('app_id')
-  const versionId = Number(c.req.param('version_id'))
-  // Get the file path from the wildcard - default to index.html
-  const rawFilePath = c.req.path.split(`/${appId}/${versionId}/`)[1] || 'index.html'
-  const filePath = decodeURIComponent(rawFilePath)
+  if (!parsed) {
+    cloudlog({ requestId: c.get('requestId'), message: 'invalid preview subdomain', hostname })
+    return simpleError('invalid_subdomain', 'Invalid preview subdomain format. Expected: {app_id}-{version_id}.preview.capgo.app')
+  }
+
+  const { appId, versionId } = parsed
+
+  // Get the file path from the request path - default to index.html
+  let filePath = c.req.path.slice(1) || 'index.html' // Remove leading slash
+  filePath = decodeURIComponent(filePath)
+  // Remove query string if present
+  if (filePath.includes('?'))
+    filePath = filePath.split('?')[0]
 
-  cloudlog({ requestId: c.get('requestId'), message: 'preview request', appId, versionId, filePath })
+  cloudlog({ requestId: c.get('requestId'), message: 'preview subdomain request', hostname, appId, versionId, filePath })
 
-  // Accept token from Authorization header OR query param (for iframe support)
+  // Accept token from: query param (first request), cookie (subsequent requests), or Authorization header
   const authorization = c.req.header('authorization')
   const tokenFromQuery = c.req.query('token')
-  const token = authorization?.split('Bearer ')[1] || tokenFromQuery
+  const tokenFromCookie = getCookie(c, TOKEN_COOKIE_NAME)
+  const token = authorization?.split('Bearer ')[1] || tokenFromQuery || tokenFromCookie
 
   if (!token)
-    return simpleError('cannot_find_authorization', 'Cannot find authorization. Pass token as query param or Authorization header.')
+    return simpleError('cannot_find_authorization', 'Cannot find authorization. Pass token as query param on first request.')
 
   const { data: auth, error: authError } = await supabaseAdmin(c).auth.getUser(token)
   if (authError || !auth?.user?.id)
@@ -156,7 +197,6 @@ async function handlePreview(c: Context<MiddlewareKeyVariables>) {
   }
 
   // Preview only works on Cloudflare Workers where the R2 bucket is available.
-  // Supabase Edge Functions cannot serve HTML files properly due to platform limitations.
   if (getRuntimeKey() !== 'workerd') {
     cloudlog({ requestId: c.get('requestId'), message: 'preview not supported on Supabase Edge Functions' })
     return simpleError('preview_not_supported', 'Preview is not supported on Supabase Edge Functions. This feature requires Cloudflare Workers with R2 bucket access.')
@@ -183,11 +223,36 @@ async function handlePreview(c: Context<MiddlewareKeyVariables>) {
     headers.set('Cache-Control', 'private, max-age=3600')
     headers.set('X-Content-Type-Options', 'nosniff')
 
-    cloudlog({ requestId: c.get('requestId'), message: 'serving preview file from R2', filePath, contentType })
+    cloudlog({ requestId: c.get('requestId'), message: 'serving preview file from R2 (subdomain)', filePath, contentType })
+
+    // If token came from query param, set it in a cookie for subsequent requests
+    // This allows assets to load without needing the token in every URL
+    if (tokenFromQuery && !tokenFromCookie) {
+      // Set cookie with same-site strict for security, httpOnly to prevent JS access
+      // Path=/ so it works for all paths in this subdomain
+      setCookie(c, TOKEN_COOKIE_NAME, token, {
+        path: '/',
+        httpOnly: true,
+        secure: true,
+        sameSite: 'Strict',
+        maxAge: 3600, // 1 hour, matches cache control
+      })
+    }
+
     return new Response(object.body, { headers })
   }
   catch (error) {
     cloudlog({ requestId: c.get('requestId'), message: 'failed to serve preview file', error, s3_path: manifestEntry.s3_path })
     return simpleError('preview_failed', 'Failed to serve preview file')
   }
 }
+
+// Export helper for generating preview URLs
+export function generatePreviewUrl(appId: string, versionId: number, env: 'prod' | 'preprod' | 'dev' = 'prod'): string {
+  // Encode app_id: replace . with __
+  const encodedAppId = appId.replace(/\./g, '__')
+  const subdomain = `${encodedAppId}-${versionId}`
+
+  const envPrefix = env === 'prod' ? '' : `.${env}`
+  return `https://${subdomain}.preview${envPrefix}.capgo.app`
+}