Like what we’re doing? Star us on GitHub!

Issue with preview

samtietjen
2 months ago
10

Lets say you have Payload on port 8000 and a NextJS site on port 3000. The end goal is to get preview working for a "pages" collection. What would you add for the preview function? I know that the docs outline a function here:

https://payloadcms.com/docs/configuration/collections#preview

but it doesn't work for me in this case. How do you handle preview when Payload's backend on a separate server from it's frontend?

  • jesschow
    Payload Team
    2 months ago

    Hi @samtietjen, the payload website does exactly what you're looking for (has the backend / frontend on different servers and uses the preview feature) and would be a good example for you. Take a look at how we do it here:

    https://github.com/payloadcms/website-cms/blob/f44cc077dfd85d3e3941df39b6ce13f4baee7fb4/src/utilities/formatPreviewURL.ts#L3
  • samtietjen
    2 months ago

    Thanks for the reply! This is exactly what I was referencing. process.env.PAYLOAD_PUBLIC_APP_URL would be localhost:8000 right? If I do that then I get a "cannot get". If I do 3000 (Next) it 404s me. I did notice the following commits

    https://github.com/payloadcms/website/search?q=preview&type=commits

    . This made sense because I didn't have anything configured in Next for preview; however, looking at the site's current front end all of this was removed and the word preview isn't found anywhere in the source code.



    Still a newbie to Payload, so I appreciate your help!

  • jesschow
    Payload Team
    2 months ago

    Wow that is because it is broken on our site oh dear 😂



    You definitely need a preview API route (pages/api/preview.tsx) that should be your missing piece. The nextjs docs will help here:

    https://nextjs.org/docs/advanced-features/preview-mode
  • samtietjen
    2 months ago

    Ahhhh, that makes me feel less crazy! Thank you! I'm guessing those old commits I sent you probably work for reference. Think this'll be documented in the future?

  • jacobsfletch
    Payload Team
    2 months ago

    @samtietjen the "preview" button in Payload is just meant to point to your front-end, whatever it might be. In our case we tied it into Next's preview so we could view drafts—but this is all extra. We've since migrated to Next 13's

    app

    directory which did not support preview or ISR at the time although we left our code in place.

  • samtietjen
    2 months ago

    Was just chatting on GitHub discussions about this. Makes more sense now. So preview is really just the ability to add a button to your admin UI that can generate a URL. It’s up to you to do the rest. In the case of the Payload website it’s more of a “draft view”.

  • jacobsfletch
    Payload Team
    2 months ago

    Spot on



    https://github.com/payloadcms/payload/tree/master/examples/preview


    Just merged in a preview example if you wanna take a look! It includes an example Next.js app running on the

    pages

    directory.

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More