How to Handle Previews in a Headless Architecture

1

There is an ongoing shift in content management from traditional CMS to headless CMS. A headless CMS allows you to completely separate your content management system from the presentation layer. The content is made available via API and can be consumed in any kind of frontend, from websites to mobile apps.

This is a companion discussion topic for the original entry at https://strapi.io/blog/handling-previews-in-a-headless-architecture-1
2

How does our live preview button show on the article collection in the first place? VS all collections that exist on Strapi. I tried this with my app which included both locations and menus. Locations have their own page and a relation with a menu. The live previews appeared for locations but not menus which is great but I am not sure why.

4

Hey @byebyers

Good question. The live preview button shows on the article collection only because of this snippet:

//  ./src/plugins/previewbtn/admin/src/components/PreviewLink/index.js
const PreviewLink = () => {
  const {initialData} = useCMEditViewDataManager();
  if (!initialData.slug) {
    return null;
  }

It’s a simple trick to filter collections based on the slug field. In essence, if a collection you create in your Strapi Admin Dashboard has a slug field, the Preview button
will show up. So in your case, I can guess that the Locations collection has a slug field and the Menus collection doesn’t.

1 Like
5

Ah, that makes a ton of sense. And yes my locations have a slug and menus does not. Thank you for clarifying.

1 Like