payloadcms · jacobsfletch · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024
diff --git a/docs/admin/collections.mdx b/docs/admin/collections.mdx
@@ -108,6 +108,8 @@ export const Posts: CollectionConfig = {
 }
 ```
 
+The `preview` property resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path. If you are using a relative path, Payload will prepend the application's origin onto it, creating a fully qualified URL.
+
 The preview function receives two arguments:
 
 | Argument | Description |

diff --git a/docs/live-preview/overview.mdx b/docs/live-preview/overview.mdx
@@ -52,9 +52,9 @@ _\* An asterisk denotes that a property is required._
 
 ### URL
 
-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.
+The `url` property resolves to 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.
+This can be an absolute URL or a relative path. If you are using a relative path, Payload will prepend the application's origin onto it, creating a fully qualified 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):
 

diff --git a/packages/next/src/routes/rest/collections/preview.ts b/packages/next/src/routes/rest/collections/preview.ts
@@ -34,6 +34,11 @@ export const preview: CollectionRouteHandlerWithID = async ({ id, collection, re
         req,
         token,
       })
+
+      // Support relative URLs by prepending the origin, if necessary
+      if (previewURL && previewURL.startsWith('/')) {
+        previewURL = `${req.protocol}//${req.host}${previewURL}`
+      }
     } catch (err) {
       return routeError({
         collection,

diff --git a/test/live-preview/collections/Pages.ts b/test/live-preview/collections/Pages.ts
@@ -32,6 +32,7 @@ export const Pages: CollectionConfig = {
         },
       },
     },
+    preview: (doc) => `/live-preview/${doc?.slug}`,
   },
   fields: [
     {

diff --git a/test/live-preview/collections/Posts.ts b/test/live-preview/collections/Posts.ts
@@ -18,6 +18,7 @@ export const Posts: CollectionConfig = {
   admin: {
     useAsTitle: 'title',
     defaultColumns: ['id', 'title', 'slug', 'createdAt'],
+    preview: (doc) => `/live-preview/posts/${doc?.slug}`,
   },
   fields: [
     {

diff --git a/test/live-preview/collections/SSR.ts b/test/live-preview/collections/SSR.ts
@@ -22,6 +22,7 @@ export const SSR: CollectionConfig = {
   admin: {
     useAsTitle: 'title',
     defaultColumns: ['id', 'title', 'slug', 'createdAt'],
+    preview: (doc) => `/live-preview/ssr/${doc?.slug}`,
   },
   fields: [
     {

diff --git a/test/live-preview/collections/SSRAutosave.ts b/test/live-preview/collections/SSRAutosave.ts
@@ -29,6 +29,7 @@ export const SSRAutosave: CollectionConfig = {
   admin: {
     useAsTitle: 'title',
     defaultColumns: ['id', 'title', 'slug', 'createdAt'],
+    preview: (doc) => `/live-preview/ssr-autosave/${doc?.slug}`,
   },
   fields: [
     {

diff --git a/test/versions/collections/Autosave.ts b/test/versions/collections/Autosave.ts
@@ -11,7 +11,6 @@ const AutosavePosts: CollectionConfig = {
   admin: {
     useAsTitle: 'title',
     defaultColumns: ['title', 'description', 'createdAt', '_status'],
-    preview: () => 'https://payloadcms.com',
   },
   versions: {
     maxPerDoc: 35,

diff --git a/test/versions/collections/CustomIDs.ts b/test/versions/collections/CustomIDs.ts
@@ -6,7 +6,6 @@ const CustomIDs: CollectionConfig = {
   slug: customIDSlug,
   admin: {
     defaultColumns: ['id', 'title', 'createdAt'],
-    preview: () => 'https://payloadcms.com',
     useAsTitle: 'id',
   },
   fields: [

diff --git a/test/versions/collections/Drafts.ts b/test/versions/collections/Drafts.ts
@@ -44,7 +44,6 @@ const DraftPosts: CollectionConfig = {
       },
     },
     defaultColumns: ['title', 'description', 'createdAt', '_status'],
-    preview: () => 'https://payloadcms.com',
     useAsTitle: 'title',
   },
   fields: [

diff --git a/test/versions/collections/DraftsWithMax.ts b/test/versions/collections/DraftsWithMax.ts
@@ -44,7 +44,6 @@ const DraftWithMaxPosts: CollectionConfig = {
       },
     },
     defaultColumns: ['title', 'description', 'createdAt', '_status'],
-    preview: () => 'https://payloadcms.com',
     useAsTitle: 'title',
   },
   fields: [

diff --git a/test/versions/collections/Versions.ts b/test/versions/collections/Versions.ts
@@ -29,7 +29,6 @@ const VersionPosts: CollectionConfig = {
   },
   admin: {
     defaultColumns: ['title', 'description', 'createdAt'],
-    preview: () => 'https://payloadcms.com',
     useAsTitle: 'title',
   },
   fields: [

diff --git a/test/versions/globals/Autosave.ts b/test/versions/globals/Autosave.ts
@@ -26,9 +26,6 @@ const AutosaveGlobal: GlobalConfig = {
       }
     },
   },
-  admin: {
-    preview: () => 'https://payloadcms.com',
-  },
   fields: [
     {
       name: 'title',

diff --git a/test/versions/globals/DraftWithMax.ts b/test/versions/globals/DraftWithMax.ts
@@ -6,7 +6,6 @@ const DraftWithMaxGlobal: GlobalConfig = {
   slug: draftWithMaxGlobalSlug,
   label: 'Draft Global',
   admin: {
-    preview: () => 'https://payloadcms.com',
     components: {
       views: {
         edit: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -108,6 +108,8 @@ export const Posts: CollectionConfig = { @@
     }
     ```
+    The `preview` property resolves to a string that points to your front-end application with additional URL parameters. This can be an absolute URL or a relative path. If you are using a relative path, Payload will prepend the application's origin onto it, creating a fully qualified URL.
     The preview function receives two arguments:
     | Argument | Description |
@@ Expand Down @@