feat(live-preview): supports relative urls for dynamic preview deployments

docs/live-preview/overview.mdx

@@ -54,6 +54,8 @@ _\* An asterisk denotes that a property is required._
 
 The `url` property is a string that points to your front-end application. This value is used as the `src` attribute of the iframe rendering your front-end. Once loaded, the Admin Panel will communicate directly with your app through `window.postMessage` events.
 
+This can be an absolute URL or a relative path. If you are using a relative path, Payload will resolve it relative to the application's origin URL. This is useful for Vercel preview deployments, for example, where URLs are not known ahead of time.
+
 To set the URL, use the `admin.livePreview.url` property in your [Payload Config](../configuration/overview):
 
 ```ts

packages/next/src/views/LivePreview/index.tsx

@@ -36,7 +36,7 @@ export const LivePreviewView: PayloadServerReactComponent<EditViewComponent> = a
     },
   ]
 
-  const url =
+  let url =
     typeof livePreviewConfig?.url === 'function'
       ? await livePreviewConfig.url({
           collectionConfig,
@@ -47,5 +47,10 @@ export const LivePreviewView: PayloadServerReactComponent<EditViewComponent> = a
         })
       : livePreviewConfig?.url
 
+  // Support relative URLs by prepending the origin, if necessary
+  if (url && url.startsWith('/')) {
+    url = `${initPageResult.req.protocol}//${initPageResult.req.host}${url}`
+  }
+
   return <LivePreviewClient breakpoints={breakpoints} initialData={doc} url={url} />
 }

test/live-preview/app/live-preview/(pages)/[slug]/page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-exports */
 import { notFound } from 'next/navigation.js'
 import React from 'react'
 
@@ -32,10 +33,11 @@ export default async function Page({ params: paramsPromise }: Args) {
 
 export async function generateStaticParams() {
   process.env.PAYLOAD_DROP_DATABASE = 'false'
+
   try {
     const pages = await getDocs<Page>('pages')
     return pages?.map(({ slug }) => slug)
-  } catch (error) {
+  } catch (_err) {
     return []
   }
 }

test/live-preview/app/live-preview/_api/getDoc.ts

@@ -32,8 +32,8 @@ export const getDoc = async <T>(args: {
       return docs[0] as T
     }
   } catch (err) {
-    console.log('Error getting doc', err)
+    throw new Error(`Error getting doc: ${err.message}`)
   }
 
-  throw new Error('Error getting doc')
+  throw new Error('No doc found')
 }

test/live-preview/app/live-preview/_api/getDocs.ts

@@ -1,7 +1,7 @@
 import config from '@payload-config'
-import { getPayload } from 'payload'
+import { type CollectionSlug, getPayload } from 'payload'
 
-export const getDocs = async <T>(collection: string): Promise<T[]> => {
+export const getDocs = async <T>(collection: CollectionSlug): Promise<T[]> => {
   const payload = await getPayload({ config })
 
   try {
@@ -11,10 +11,12 @@ export const getDocs = async <T>(collection: string): Promise<T[]> => {
       limit: 100,
     })
 
-    return docs as T[]
+    if (docs) {
+      return docs as T[]
+    }
   } catch (err) {
-    console.error(err)
+    throw new Error(`Error getting docs: ${err.message}`)
   }
 
-  throw new Error('Error getting docs')
+  throw new Error('No docs found')
 }

test/live-preview/app/live-preview/_components/Footer/index.tsx

@@ -21,7 +21,7 @@ export async function Footer() {
             <img
               alt="Payload Logo"
               className={classes.logo}
-              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
+              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-logo-light.svg"
             />
           </picture>
         </Link>
@@ -30,7 +30,7 @@ export async function Footer() {
             return <CMSLink key={i} {...link} />
           })}
           <Link href="/admin">Admin</Link>
-          <Link href="https://github.com/payloadcms/payload/tree/main/templates/ecommerce">
+          <Link href="https://github.com/payloadcms/payload/tree/main/test/live-preview">
             Source Code
           </Link>
           <Link href="https://github.com/payloadcms/payload">Payload</Link>

test/live-preview/app/live-preview/_components/Link/index.tsx

@@ -1,12 +1,12 @@
-import LinkWithDefault from 'next/link.js'
+import NextLinkImport from 'next/link.js'
 import React from 'react'
 
 import type { Page, Post } from '../../../../payload-types.js'
 import type { Props as ButtonProps } from '../Button/index.js'
 
 import { Button } from '../Button/index.js'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const NextLink = (NextLinkImport.default || NextLinkImport) as typeof NextLinkImport.default
 
 type CMSLinkType = {
   appearance?: ButtonProps['appearance']
@@ -36,20 +36,22 @@ export const CMSLink: React.FC<CMSLinkType> = ({
 }) => {
   const href =
     type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
-      ? `/${reference.value.slug}`
+      ? `/live-preview/${reference.value.slug}`
       : url
 
-  if (!href) return null
+  if (!href) {
+    return null
+  }
 
   if (!appearance) {
     const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
 
     if (href || url) {
       return (
-        <Link {...newTabProps} className={className} href={href || url || ''}>
+        <NextLink {...newTabProps} className={className} href={href || url || ''}>
           {label && label}
-          {children && children}
-        </Link>
+          {children || null}
+        </NextLink>
       )
     }
   }

test/live-preview/prod/app/live-preview/(pages)/[slug]/page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-exports */
 import { notFound } from 'next/navigation.js'
 import React from 'react'
 
@@ -32,10 +33,11 @@ export default async function Page({ params: paramsPromise }: Args) {
 
 export async function generateStaticParams() {
   process.env.PAYLOAD_DROP_DATABASE = 'false'
+
   try {
     const pages = await getDocs<Page>('pages')
     return pages?.map(({ slug }) => slug)
-  } catch (error) {
+  } catch (_err) {
     return []
   }
 }

test/live-preview/prod/app/live-preview/_api/getDoc.ts

@@ -32,8 +32,8 @@ export const getDoc = async <T>(args: {
       return docs[0] as T
     }
   } catch (err) {
-    console.log('Error getting doc', err)
+    throw new Error(`Error getting doc: ${err.message}`)
   }
 
-  throw new Error('Error getting doc')
+  throw new Error('No doc found')
 }

test/live-preview/prod/app/live-preview/_api/getDocs.ts

@@ -1,7 +1,7 @@
 import config from '@payload-config'
-import { getPayload } from 'payload'
+import { type CollectionSlug, getPayload } from 'payload'
 
-export const getDocs = async <T>(collection: string): Promise<T[]> => {
+export const getDocs = async <T>(collection: CollectionSlug): Promise<T[]> => {
   const payload = await getPayload({ config })
 
   try {
@@ -11,10 +11,12 @@ export const getDocs = async <T>(collection: string): Promise<T[]> => {
       limit: 100,
     })
 
-    return docs as T[]
+    if (docs) {
+      return docs as T[]
+    }
   } catch (err) {
-    console.error(err)
+    throw new Error(`Error getting docs: ${err.message}`)
   }
 
-  throw new Error('Error getting docs')
+  throw new Error('No docs found')
 }

test/live-preview/prod/app/live-preview/_components/Footer/index.tsx

@@ -21,7 +21,7 @@ export async function Footer() {
             <img
               alt="Payload Logo"
               className={classes.logo}
-              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
+              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-logo-light.svg"
             />
           </picture>
         </Link>
@@ -30,7 +30,7 @@ export async function Footer() {
             return <CMSLink key={i} {...link} />
           })}
           <Link href="/admin">Admin</Link>
-          <Link href="https://github.com/payloadcms/payload/tree/main/templates/ecommerce">
+          <Link href="https://github.com/payloadcms/payload/tree/main/test/live-preview">
             Source Code
           </Link>
           <Link href="https://github.com/payloadcms/payload">Payload</Link>

test/live-preview/prod/app/live-preview/_components/Link/index.tsx

@@ -1,12 +1,12 @@
-import LinkWithDefault from 'next/link.js'
+import NextLinkImport from 'next/link.js'
 import React from 'react'
 
 import type { Page, Post } from '../../../../../payload-types.js'
 import type { Props as ButtonProps } from '../Button/index.js'
 
 import { Button } from '../Button/index.js'
 
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
+const NextLink = (NextLinkImport.default || NextLinkImport) as typeof NextLinkImport.default
 
 type CMSLinkType = {
   appearance?: ButtonProps['appearance']
@@ -36,20 +36,22 @@ export const CMSLink: React.FC<CMSLinkType> = ({
 }) => {
   const href =
     type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
-      ? `/${reference.value.slug}`
+      ? `/live-preview/${reference.value.slug}`
       : url
 
-  if (!href) return null
+  if (!href) {
+    return null
+  }
 
   if (!appearance) {
     const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
 
     if (href || url) {
       return (
-        <Link {...newTabProps} className={className} href={href || url || ''}>
+        <NextLink {...newTabProps} className={className} href={href || url || ''}>
           {label && label}
-          {children && children}
-        </Link>
+          {children || null}
+        </NextLink>
       )
     }
   }

test/live-preview/seed/posts-page.ts

@@ -4,7 +4,7 @@ import { postsSlug } from '../shared.js'
 
 export const postsPage: Partial<Page> = {
   title: 'Posts',
-  slug: 'live-preview/posts',
+  slug: 'posts',
   meta: {
     title: 'Payload Website Template',
     description: 'An open-source website built with Payload and Next.js.',

test/live-preview/utilities/formatLivePreviewURL.ts

@@ -5,7 +5,7 @@ export const formatLivePreviewURL: LivePreviewConfig['url'] = async ({
   collectionConfig,
   payload,
 }) => {
-  let baseURL = 'http://localhost:3000/live-preview'
+  let baseURL = '/live-preview'
 
   // You can run async requests here, if needed
   // For example, multi-tenant apps may need to lookup additional data
@@ -25,6 +25,7 @@ export const formatLivePreviewURL: LivePreviewConfig['url'] = async ({
         .then((res) => res?.docs?.[0])
 
       if (fullTenant?.clientURL) {
+        // Note: appending a fully-qualified URL here won't work for preview deployments on Vercel
         baseURL = `${fullTenant.clientURL}/live-preview`
       }
     } catch (e) {