Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Issue with preview

default discord avatar
samtietjen2 years ago
7

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?

  • default discord avatar
    jessrynkar2 years ago

    Hi

    @1055071772585771178

    , 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
  • default discord avatar
    samtietjen2 years 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!

  • default discord avatar
    jessrynkar2 years 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
  • default discord avatar
    samtietjen2 years 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?

  • discord user avatar
    jacobsfletch
    2 years ago
    @1055071772585771178

    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.

  • default discord avatar
    samtietjen2 years 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”.

  • discord user avatar
    jacobsfletch
    2 years 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.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.