Skip to content

Commit

Permalink
feat(next): supports relative preview URLs (payloadcms#9755)
Browse files Browse the repository at this point in the history
Similar to payloadcms#9746. When deploying to Vercel, preview deployment URLs are
dynamically generated. This breaks `admin.preview` within those
deployments because there is no mechanism by which we can detect and set
that URL within Payload. Although Vercel provides various environment
variables at our disposal, they provide no concrete identifier for
exactly which URL is being currently previewed (you can access the same
deployment from a number of different URLs).

The fix is to support relative `admin.preview` URLs, that way Payload
can prepend the application's top-level domain dynamically at
render-time in order to create a fully qualified URL. So when you visit
a Vercel preview deployment, for example, that deployment's unique URL
is used as the preview redirect, instead of the application's
root/production domain. Note: this does not fix multi-tenancy
single-domain setups, as those still require a static top-level domain
for each tenant.
  • Loading branch information
jacobsfletch authored Dec 4, 2024
1 parent 61a4656 commit 1fc9c47
Show file tree
Hide file tree
Showing 14 changed files with 13 additions and 11 deletions.
2 changes: 2 additions & 0 deletions docs/admin/collections.mdx
Original file line number Diff 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
4 changes: 2 additions & 2 deletions docs/live-preview/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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):

Expand Down
5 changes: 5 additions & 0 deletions packages/next/src/routes/rest/collections/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions test/live-preview/collections/Pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const Pages: CollectionConfig = {
},
},
},
preview: (doc) => `/live-preview/${doc?.slug}`,
},
fields: [
{
Expand Down
1 change: 1 addition & 0 deletions test/live-preview/collections/Posts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const Posts: CollectionConfig = {
admin: {
useAsTitle: 'title',
defaultColumns: ['id', 'title', 'slug', 'createdAt'],
preview: (doc) => `/live-preview/posts/${doc?.slug}`,
},
fields: [
{
Expand Down
1 change: 1 addition & 0 deletions test/live-preview/collections/SSR.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const SSR: CollectionConfig = {
admin: {
useAsTitle: 'title',
defaultColumns: ['id', 'title', 'slug', 'createdAt'],
preview: (doc) => `/live-preview/ssr/${doc?.slug}`,
},
fields: [
{
Expand Down
1 change: 1 addition & 0 deletions test/live-preview/collections/SSRAutosave.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand Down
1 change: 0 additions & 1 deletion test/versions/collections/Autosave.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const AutosavePosts: CollectionConfig = {
admin: {
useAsTitle: 'title',
defaultColumns: ['title', 'description', 'createdAt', '_status'],
preview: () => 'https://payloadcms.com',
},
versions: {
maxPerDoc: 35,
Expand Down
1 change: 0 additions & 1 deletion test/versions/collections/CustomIDs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const CustomIDs: CollectionConfig = {
slug: customIDSlug,
admin: {
defaultColumns: ['id', 'title', 'createdAt'],
preview: () => 'https://payloadcms.com',
useAsTitle: 'id',
},
fields: [
Expand Down
1 change: 0 additions & 1 deletion test/versions/collections/Drafts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ const DraftPosts: CollectionConfig = {
},
},
defaultColumns: ['title', 'description', 'createdAt', '_status'],
preview: () => 'https://payloadcms.com',
useAsTitle: 'title',
},
fields: [
Expand Down
1 change: 0 additions & 1 deletion test/versions/collections/DraftsWithMax.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ const DraftWithMaxPosts: CollectionConfig = {
},
},
defaultColumns: ['title', 'description', 'createdAt', '_status'],
preview: () => 'https://payloadcms.com',
useAsTitle: 'title',
},
fields: [
Expand Down
1 change: 0 additions & 1 deletion test/versions/collections/Versions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ const VersionPosts: CollectionConfig = {
},
admin: {
defaultColumns: ['title', 'description', 'createdAt'],
preview: () => 'https://payloadcms.com',
useAsTitle: 'title',
},
fields: [
Expand Down
3 changes: 0 additions & 3 deletions test/versions/globals/Autosave.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@ const AutosaveGlobal: GlobalConfig = {
}
},
},
admin: {
preview: () => 'https://payloadcms.com',
},
fields: [
{
name: 'title',
Expand Down
1 change: 0 additions & 1 deletion test/versions/globals/DraftWithMax.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const DraftWithMaxGlobal: GlobalConfig = {
slug: draftWithMaxGlobalSlug,
label: 'Draft Global',
admin: {
preview: () => 'https://payloadcms.com',
components: {
views: {
edit: {
Expand Down

0 comments on commit 1fc9c47

Please sign in to comment.