payload
payload copied to clipboard
payloadcms
Live preview doesn't work with relative path
Link to reproduction
No response
Describe the Bug
I have my live preview configured as follows:
url: '/admin/preview-screen',
For some reason I get a blank screen on the preview, but I can confirm the path it's loading is localhost:3000/admin/preview-screen
If I switch the config to:
url: 'http://localhost:3000/admin/preview-screen',
It works...
Network tab shows a 200 on the page either way, but not getting any preview on relative implementation. I'd like to use a relative path so that the url will match wherever the endpoint is deployed and I don't have to track different configs.
To Reproduce
Set preview endpoint to a relative path on the server
Payload Version
2.0.5
Adapters and Plugins
No response
A common issue I've run in to when working with NextJS is that relative paths only work client-side. For server-side routing, the fully qualified path is required. With payload moving to NextJS, it may be best practice (and included in the documentation) to set an ENV variable for the host and use something like ${process.env.PAYLOAD_PUBLIC_HOST}/admin/preview-screen. This way you can change your host for each dev/prod environment without changing your code.
Hey @ericuldall - @revnelson's comment about using an ENV variable is the approach we use and recommend. What do you think?
@ericuldall Here is an example of how using an ENV would work with a live-preview configuration:
livePreview: {
url: ({ data }) => `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/posts/${data?.slug}`,
},
This is the approach we recommend. Going to close this for now, if you have any other questions - let me know!
That env var is undefined for me. Using vite bundler is the issue maybe?
ah I guess I have to define the env var, I've seen lots of examples of people calling that but never mentioned it's not built in.