🧑‍💻 Automatically guess env URLs for Vercel preview deploy… (#1076)

…ments

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced new URL processing logic to enhance compatibility with
Vercel preview environments.
- Improved handling of environment-specific URLs for authentication and
viewer services.

- **Enhancements**
- Streamlined environment variable management for more reliable
deployment configurations.

- **Documentation**
- Updated documentation to reflect new environment variable processing
functions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/builder/next.config.mjs

@@ -8,6 +8,23 @@ const __filename = fileURLToPath(import.meta.url)
 
 const __dirname = dirname(__filename)
 
+const injectViewerUrlIfVercelPreview = (val) => {
+  if (
+    (val && typeof val === 'string' && val.length > 0) ||
+    process.env.VERCEL_ENV !== 'preview' ||
+    !process.env.VERCEL_BUILDER_PROJECT_NAME ||
+    !process.env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME
+  )
+    return
+  process.env.NEXT_PUBLIC_VIEWER_URL =
+    `https://${process.env.VERCEL_BRANCH_URL}`.replace(
+      process.env.VERCEL_BUILDER_PROJECT_NAME,
+      process.env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME
+    )
+}
+
+injectViewerUrlIfVercelPreview(process.env.NEXT_PUBLIC_VIEWER_URL)
+
 configureRuntimeEnv()
 
 /** @type {import('next').NextConfig} */

apps/viewer/next.config.mjs

@@ -8,6 +8,19 @@ const __filename = fileURLToPath(import.meta.url)
 
 const __dirname = dirname(__filename)
 
+const injectViewerUrlIfVercelPreview = (val) => {
+  if (
+    (val && typeof val === 'string' && val.length > 0) ||
+    process.env.VERCEL_ENV !== 'preview' ||
+    !process.env.VERCEL_BUILDER_PROJECT_NAME ||
+    !process.env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME
+  )
+    return
+  process.env.NEXT_PUBLIC_VIEWER_URL = `https://${process.env.VERCEL_BRANCH_URL}`
+}
+
+injectViewerUrlIfVercelPreview(process.env.NEXT_PUBLIC_VIEWER_URL)
+
 configureRuntimeEnv()
 
 const landingPagePaths = [

packages/env/env.ts

@@ -6,6 +6,42 @@ declare const window: {
   __ENV?: any
 }
 
+const guessNextAuthUrlForVercelPreview = (val: unknown) => {
+  if (
+    (val && typeof val === 'string' && val.length > 0) ||
+    process.env.VERCEL_ENV !== 'preview' ||
+    !process.env.VERCEL_BUILDER_PROJECT_NAME ||
+    !process.env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME
+  )
+    return val
+  const isBuilder = (process.env.VERCEL_BRANCH_URL as string).includes(
+    process.env.VERCEL_BUILDER_PROJECT_NAME
+  )
+  if (isBuilder) return `https://${process.env.VERCEL_BRANCH_URL}`
+  return `https://${process.env.VERCEL_BRANCH_URL}`.replace(
+    process.env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME,
+    process.env.VERCEL_BUILDER_PROJECT_NAME
+  )
+}
+
+const guessViewerUrlForVercelPreview = (val: unknown) => {
+  if (
+    (val && typeof val === 'string' && val.length > 0) ||
+    process.env.VERCEL_ENV !== 'preview' ||
+    !process.env.VERCEL_BUILDER_PROJECT_NAME ||
+    !process.env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME
+  )
+    return val
+  const isViewer = (process.env.VERCEL_BRANCH_URL as string).includes(
+    process.env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME
+  )
+  if (isViewer) return `https://${process.env.VERCEL_BRANCH_URL}`
+  return `https://${process.env.VERCEL_BRANCH_URL}`.replace(
+    process.env.VERCEL_BUILDER_PROJECT_NAME,
+    process.env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME
+  )
+}
+
 const boolean = z.enum(['true', 'false']).transform((value) => value === 'true')
 
 const baseEnv = {
@@ -16,7 +52,10 @@ const baseEnv = {
       .url()
       .refine((url) => url.startsWith('postgres') || url.startsWith('mysql')),
     ENCRYPTION_SECRET: z.string().length(32),
-    NEXTAUTH_URL: z.string().url(),
+    NEXTAUTH_URL: z.preprocess(
+      guessNextAuthUrlForVercelPreview,
+      z.string().url()
+    ),
     DISABLE_SIGNUP: boolean.optional().default('false'),
     ADMIN_EMAIL: z.string().email().optional(),
     DEFAULT_WORKSPACE_PLAN: z
@@ -29,10 +68,13 @@ const baseEnv = {
   },
   client: {
     NEXT_PUBLIC_E2E_TEST: boolean.optional(),
-    NEXT_PUBLIC_VIEWER_URL: z
+    NEXT_PUBLIC_VIEWER_URL: z.preprocess(
-      .string()
+      guessViewerUrlForVercelPreview,
-      .min(1)
+      z
-      .transform((string) => string.split(',')),
+        .string()
+        .min(1)
+        .transform((val) => val.split(','))
+    ),
     NEXT_PUBLIC_ONBOARDING_TYPEBOT_ID: z.string().min(1).optional(),
     NEXT_PUBLIC_BOT_FILE_UPLOAD_MAX_SIZE: z.coerce.number().optional(),
   },
@@ -178,6 +220,7 @@ const vercelEnv = {
     VERCEL_TOKEN: z.string().min(1).optional(),
     VERCEL_TEAM_ID: z.string().min(1).optional(),
     VERCEL_GIT_COMMIT_SHA: z.string().min(1).optional(),
+    VERCEL_BUILDER_PROJECT_NAME: z.string().min(1).optional(),
   },
   client: {
     NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME: z.string().min(1).optional(),