Static preview

[pwizla]

This PR adds docs for Static Preview (it targets the beta version, so no mention of feature flags):

• Dev Docs on how to set it up 👉 direct preview link
• User Guide on how to use it 👉 direct preview link

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
documentation	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 4, 2024 9:28am

[remidej]

This is really good!

2 things about the next.js guide part:

• with the code you suggest they'll run into the issue where they will never exit Next.js draft mode after opening it. This is the bug you encountered yesterday where you see draft content even in the published tab. You can see how I fixed in in the launchpad. Basically you need to always go through the next.js preview route, so that you can force the draft mode cookie removal when the status is published.
• since your guide is pretty in depth already, I would add the last missing piece, which is to check if draft mode is enabled in the places that are querying Strapi data, so they can know whether they should add the status=draft param. See this part of the launchpad code for an example.

[yanniskadiri]

I just checked the user guide part, it looks good to me. This is great work, thanks @pwizla!

[pwizla]

@remidej I did my best to improve the implementation guide based on your feedback 😊 What do you think?

[remidej]

thanks for the updates!

[remidej]

Note that these links are pointing to the feat/preview branch of the launchpad repo, which will 404 when we merge our PR on the main branch. Hopefully next week after the CMS release

[pwizla]

Thanks for the reminder! Yes, I'm used to it, and still haven't found a satisfying solution to automate this in some way. Any idea? 🤔 Or maybe is there another format of URLs that would persist across merges? 🤔
I'll update it once the strapi/strapi branch is merged.

[remidej]

I guess you could link to the repo's tree for a specific commit, this will never 404: https://github.com/strapi/LaunchPad/tree/faa960bf8ca824f5b92dc984c4627abeb87b85eb

But the downside is you wouldn't get any potential improvement that comes in the future. Maybe with a self reminder to update the commit once in a while it could work?

[remidej]

I'm realizing now there's one last step needed to get the whole thing to work. Apologies for not seeing this earlier.

The permissions to load an iframe go both ways:

• the parent window needs to allow loading the child window (that we do, it's the allowedOrigins thing)
• the child window (the preview site) needs to allow being embedded in the parent (the admin)

That second step requires the preview frontend to have its own header directive: the CSP frame-ancestors directive. The way to set it up will depend on how they build their site. For nextjs it requires a middleware config: https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy

[pwizla]

Many thanks for all these details, @remidej ! I've just updated the docs. Are we good to merge the PR this afternoon?

[remidej]

this is perfect 👍