Fix bundle preview URLs to serve through Cloudflare Workers (#1359)

* fix: fix bundle preview URLs to serve through Cloudflare Workers

- Move preview endpoint to Cloudflare Workers API instead of Supabase Edge Functions for proper HTML serving
- Add getObject function to S3 utility for fetching file content via presigned URL
- Implement MIME type detection to ensure correct Content-Type headers (fixes R2 text/html → text/plain rewrite issue)
- Support common file path prefixes (www/, public/, dist/) for manifest lookups
- Update frontend to use defaultApiHost (Cloudflare Workers) instead of Supabase URL
- Both Cloudflare Workers and Supabase paths now proxy file content instead of redirecting, preserving relative URLs

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

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

* fix: add ATTACHMENT_BUCKET to Bindings type for TypeScript

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

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

* fix: resolve R2Bucket type incompatibility

Remove explicit R2Bucket type import from @cloudflare/workers-types
to use global R2Bucket type which is compatible with RetryBucket.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

Author: riderx

cloudflare_workers/api/index.ts

@@ -8,6 +8,7 @@ import { app as devices_priv } from '../../supabase/functions/_backend/private/d
 import { app as events } from '../../supabase/functions/_backend/private/events.ts'
 import { app as log_as } from '../../supabase/functions/_backend/private/log_as.ts'
 import { app as plans } from '../../supabase/functions/_backend/private/plans.ts'
+import { app as preview } from '../../supabase/functions/_backend/private/preview.ts'
 import { app as publicStats } from '../../supabase/functions/_backend/private/public_stats.ts'
 import { app as stats_priv } from '../../supabase/functions/_backend/private/stats.ts'
 import { app as storeTop } from '../../supabase/functions/_backend/private/store_top.ts'
@@ -77,6 +78,7 @@ appPrivate.route('/stripe_portal', stripe_portal)
 appPrivate.route('/delete_failed_version', deleted_failed_version)
 appPrivate.route('/create_device', create_device)
 appPrivate.route('/events', events)
+appPrivate.route('/preview', preview)
 
 // Triggers
 const functionNameTriggers = 'triggers'

src/components/BundlePreviewFrame.vue

@@ -6,7 +6,7 @@ import { useRoute } from 'vue-router'
 import IconExpand from '~icons/lucide/expand'
 import IconMinimize from '~icons/lucide/minimize-2'
 import IconSmartphone from '~icons/lucide/smartphone'
-import { useSupabase } from '~/services/supabase'
+import { defaultApiHost, useSupabase } from '~/services/supabase'
 
 const props = defineProps<{
   appId: string
@@ -75,11 +75,10 @@ const currentDevice = computed(() => devices[selectedDevice.value])
 
 // Build the preview URL with auth token
 const previewUrl = computed(() => {
-  const baseUrl = import.meta.env.VITE_SUPABASE_URL || ''
-  // The preview endpoint is at /functions/v1/private/preview/:app_id/:version_id/
+  // Use Cloudflare Workers API for preview (supports streaming and proper file serving)
   // Pass token as query param since iframes can't send headers
   const tokenParam = accessToken.value ? `?token=${accessToken.value}` : ''
-  return `${baseUrl}/functions/v1/private/preview/${props.appId}/${props.versionId}/${tokenParam}`
+  return `${defaultApiHost}/private/preview/${props.appId}/${props.versionId}/${tokenParam}`
 })
 
 // Build URL for QR code (includes fullscreen param)

supabase/functions/_backend/private/preview.ts

@@ -1,11 +1,45 @@
 import type { Context } from 'hono'
 import type { MiddlewareKeyVariables } from '../utils/hono.ts'
+import { getRuntimeKey } from 'hono/adapter'
 import { Hono } from 'hono/tiny'
+import { DEFAULT_RETRY_PARAMS, RetryBucket } from '../tus/retry.ts'
 import { simpleError, useCors } from '../utils/hono.ts'
 import { cloudlog } from '../utils/logging.ts'
 import { s3 } from '../utils/s3.ts'
 import { hasAppRight, supabaseAdmin } from '../utils/supabase.ts'
 
+// MIME type mapping for common file extensions
+const MIME_TYPES: Record<string, string> = {
+  html: 'text/html',
+  htm: 'text/html',
+  css: 'text/css',
+  js: 'application/javascript',
+  mjs: 'application/javascript',
+  json: 'application/json',
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  svg: 'image/svg+xml',
+  ico: 'image/x-icon',
+  webp: 'image/webp',
+  woff: 'font/woff',
+  woff2: 'font/woff2',
+  ttf: 'font/ttf',
+  eot: 'application/vnd.ms-fontobject',
+  otf: 'font/otf',
+  map: 'application/json',
+  txt: 'text/plain',
+  xml: 'application/xml',
+  webmanifest: 'application/manifest+json',
+  wasm: 'application/wasm',
+}
+
+function getContentType(filePath: string): string {
+  const ext = filePath.split('.').pop()?.toLowerCase() || ''
+  return MIME_TYPES[ext] || 'application/octet-stream'
+}
+
 export const app = new Hono<MiddlewareKeyVariables>()
 
 app.use('/*', useCors)
@@ -80,29 +114,99 @@ async function handlePreview(c: Context<MiddlewareKeyVariables>) {
     return simpleError('no_manifest', 'Bundle has no manifest and cannot be previewed')
   }
 
-  // Look up the file in manifest
-  const { data: manifestEntry, error: manifestError } = await supabaseAdmin(c)
+  // Look up the file in manifest - try exact match first, then with common prefixes
+  let manifestEntry: { s3_path: string, file_name: string } | null = null
+
+  // Try exact match first
+  const { data: exactMatch, error: exactError } = await supabaseAdmin(c)
     .from('manifest')
     .select('s3_path, file_name')
     .eq('app_version_id', versionId)
     .eq('file_name', filePath)
     .single()
 
-  if (manifestError || !manifestEntry) {
+  if (!exactError && exactMatch) {
+    manifestEntry = exactMatch
+  }
+  else {
+    // Try with common prefixes (www/, public/, dist/)
+    const prefixesToTry = ['www/', 'public/', 'dist/', '']
+    for (const prefix of prefixesToTry) {
+      const tryPath = prefix + filePath
+      if (tryPath === filePath)
+        continue // Already tried exact match
+
+      const { data: prefixMatch, error: prefixError } = await supabaseAdmin(c)
+        .from('manifest')
+        .select('s3_path, file_name')
+        .eq('app_version_id', versionId)
+        .eq('file_name', tryPath)
+        .single()
+
+      if (!prefixError && prefixMatch) {
+        manifestEntry = prefixMatch
+        cloudlog({ requestId: c.get('requestId'), message: 'found file with prefix', originalPath: filePath, foundPath: tryPath })
+        break
+      }
+    }
+  }
+
+  if (!manifestEntry) {
     cloudlog({ requestId: c.get('requestId'), message: 'file not found in manifest', filePath, versionId })
     return simpleError('file_not_found', 'File not found in bundle', { filePath })
   }
 
-  // Generate a time-limited signed URL for this file (expires in 1 hour)
-  // This is more secure than redirecting to the unauthenticated files endpoint
-  const PREVIEW_URL_EXPIRY_SECONDS = 3600
+  // Serve the file - use R2 bucket directly in Cloudflare Workers, or fetch via presigned URL in Supabase
   try {
-    const signedUrl = await s3.getSignedUrl(c, manifestEntry.s3_path, PREVIEW_URL_EXPIRY_SECONDS)
-    cloudlog({ requestId: c.get('requestId'), message: 'generated signed preview URL', filePath })
-    return c.redirect(signedUrl, 302)
+    if (getRuntimeKey() === 'workerd') {
+      // Cloudflare Workers - use R2 bucket directly
+      const bucket = c.env.ATTACHMENT_BUCKET
+      if (!bucket) {
+        cloudlog({ requestId: c.get('requestId'), message: 'preview bucket is null' })
+        return simpleError('bucket_not_configured', 'Storage bucket not configured')
+      }
+
+      const object = await new RetryBucket(bucket, DEFAULT_RETRY_PARAMS).get(manifestEntry.s3_path)
+      if (!object) {
+        cloudlog({ requestId: c.get('requestId'), message: 'file not found in R2', s3_path: manifestEntry.s3_path })
+        return simpleError('file_not_found', 'File not found in storage', { filePath })
+      }
+
+      // Use our own MIME type detection - R2 rewrites text/html to text/plain without custom domains
+      const contentType = getContentType(filePath)
+      const headers = new Headers()
+      headers.set('Content-Type', contentType)
+      headers.set('etag', object.httpEtag)
+      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 })
+      return new Response(object.body, { headers })
+    }
+    else {
+      // Supabase Edge Functions - fetch via presigned URL
+      const response = await s3.getObject(c, manifestEntry.s3_path)
+      if (!response) {
+        cloudlog({ requestId: c.get('requestId'), message: 'failed to fetch file from S3', s3_path: manifestEntry.s3_path })
+        return simpleError('file_fetch_failed', 'Failed to fetch file')
+      }
+
+      // Use our MIME type detection based on file extension
+      const contentType = getContentType(filePath)
+      cloudlog({ requestId: c.get('requestId'), message: 'serving preview file via S3', filePath, contentType })
+
+      return new Response(response.body, {
+        status: 200,
+        headers: {
+          'Content-Type': contentType,
+          'Cache-Control': 'private, max-age=3600',
+          'X-Content-Type-Options': 'nosniff',
+        },
+      })
+    }
   }
   catch (error) {
-    cloudlog({ requestId: c.get('requestId'), message: 'failed to generate signed URL', error, s3_path: manifestEntry.s3_path })
-    return simpleError('signed_url_failed', 'Failed to generate preview URL')
+    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')
   }
 }

supabase/functions/_backend/utils/cloudflare.ts

@@ -24,6 +24,7 @@ export type Bindings = {
   HYPERDRIVE_CAPGO_PS_AS: Hyperdrive // Add Hyperdrive binding
   HYPERDRIVE_CAPGO_PS_NA: Hyperdrive // Add Hyperdrive binding
   ATTACHMENT_UPLOAD_HANDLER: DurableObjectNamespace
+  ATTACHMENT_BUCKET: R2Bucket
 }
 
 const TRACK_DEVICE_USAGE_CACHE_PATH = '/.track-device-usage-cache'

supabase/functions/_backend/utils/s3.ts

@@ -124,10 +124,30 @@ async function getSize(c: Context, fileId: string) {
   }
 }
 
+async function getObject(c: Context, fileId: string): Promise<Response | null> {
+  const client = initS3(c)
+  try {
+    const url = await client.getPresignedUrl('GET', fileId, {
+      expirySeconds: 60,
+    })
+    const response = await fetch(url)
+    if (!response.ok) {
+      cloudlog({ requestId: c.get('requestId'), message: 'getObject failed', fileId, status: response.status })
+      return null
+    }
+    return response
+  }
+  catch (error) {
+    cloudlog({ requestId: c.get('requestId'), message: 'getObject error', fileId, error })
+    return null
+  }
+}
+
 export const s3 = {
   getSize,
   deleteObject,
   checkIfExist,
   getSignedUrl,
   getUploadUrl,
+  getObject,
 }