payloadcms/payload

Live preview does not work with domains and docker builds

Closed this issue · 2 comments

Thijmen commented

Describe the Bug

More context, see Discord; https://discord.com/channels/967097582721572934/1301603163329265718

The main issue that I have, is that while having NEXT_PUBLIC_SERVER_URL=http://localhost:3001, the live preview functionality works fine. However, when changing it to NEXT_PUBLIC_SERVER_URL=http://test.127.0.0.1.sslip.io:3001, it does not work anymore.

*.127.0.0.1.sslip.io is a wildcard DNS for - in this case - 127.0.01.

Most of the code are 1-1 of the website template, when it comes to live preview.

Branch: https://github.com/Thijmen/thijmen.dev/tree/payload-livepreview-issue

Link to the code that reproduces this issue

https://github.com/Thijmen/thijmen.dev/tree/payload-livepreview-issue

Reproduction Steps

  1. Clone my repository and check out branch payload-livepreview-issue.
  2. Copy .env.example to .env
  3. Toggle the NEXT_PUBLIC_SERVER_URL to the second one (so value should be http://localhost:3001.
  4. Run docker compose up -d to start the Postgres database container.
  5. Build the image with the provided ./build.sh script. You may need to run chmod +x build.sh
    5.1. Seeing how I structured my initial seeding, you need to run this twice. The first build should fail on some email field.
  6. Once build, start the container with executing ./start.sh. You may need to run chmod +x start.sh first.
  7. Go to the backend to http://localhost:3001/admin with thijmen@thijmen.dev as email, password as password (as per .env).
    7.1. Edit the first project (http://localhost:3001/admin/collections/projects/1) and press "Live Preview".
    7.2. Make changes in the "Detail" tab (content editor) and see that it will be reflected in the preview.
  8. Now, stop the start.sh script and make changes to .env. Ensure that NEXT_PUBLIC_SERVER_URL=http://test.127.0.0.1.sslip.io:3001 is now uncommented.
  9. Build the docker image again with ./build.sh.
  10. Run the container with ./start.sh
  11. Run the same steps as step 7, but then with http://test.127.0.0.1.sslip.io:3001/admin (and the same credentials)
  12. Notice that the live preview wont update.

Which area(s) are affected? (Select all that apply)

area: core, area: templates

Environment Info

Binaries:
Node: 20.12.2
npm: 10.5.0
Yarn: 1.22.22
pnpm: 9.12.2
Relevant Packages:
payload: 3.0.0-beta.118
next: 15.0.1
@payloadcms/db-postgres: 3.0.0-beta.118
@payloadcms/email-nodemailer: 3.0.0-beta.118
@payloadcms/graphql: 3.0.0-beta.118
@payloadcms/live-preview: 3.0.0-beta.118
@payloadcms/live-preview-react: 3.0.0-beta.118
@payloadcms/next/utilities: 3.0.0-beta.118
@payloadcms/plugin-cloud: 3.0.0-beta.118
@payloadcms/plugin-cloud-storage: 3.0.0-beta.118
@payloadcms/plugin-form-builder: 3.0.0-beta.118
@payloadcms/plugin-nested-docs: 3.0.0-beta.118
@payloadcms/plugin-redirects: 3.0.0-beta.118
@payloadcms/plugin-seo: 3.0.0-beta.118
@payloadcms/richtext-lexical: 3.0.0-beta.118
@payloadcms/translations: 3.0.0-beta.118
@payloadcms/ui/shared: 3.0.0-beta.118
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:37:25 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6030
Available memory (MB): 36864
Available CPU cores: 12

Thijmen commented

Closed; it appears that once you leave "localhost" as domain, you need to provide a valid SSL connection as NextJS sends some secure cookies when entering live-preview/draft modus.

  • 👍1
github-actions commented

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.