Access unpublished pages for staging/preview website

[lightglitch]

How can I access unpublished pages json to preview the aspect before publish?

[niklasnatter]

Hey, the unpublished data should be available in the preview of the admin interface. Similar to a default Sulu installation, there is no public API to access unpublished data.

[alexandersch]

I am also looking for this feature. We are using an external React frontend as preview page instead of the internal Twig engine. It needs access to preview unpublished data somehow. So access through API would be useful in a real headless situation.

[niklasnatter]

Hey, how do you plan to implement/use the preview feature with an external frontend? I am not sure if it is a good idea to provide unpublished data via a public API.

As answered above, the data that would be returned by the API is available in the twig template via the data/jsonData key. In one of our projects, we use this twig template to start our React application with the provided data. This allows to use the live preview in the Sulu administration interface.

[alexandersch]

Well, we have a NextJS front-end which will not be started from the twig template, but instead deployed as a standalone application (because of the headless situation). Several other Headless CMS's do provide a way to access unpublished or drafted content through a (secure) API endpoint with just a simple flag. I think this bundle would definitely benefit from such an implementation. Now I am using an iframe in my twig template to show my frontend in the preview pane within the Sulu admin interface. Passing the preview data with a postMessage on that iframe on every reload to provide the preview data. This is far from ideal and feels more like a hacky situation to me.

Personally I would like to see a configurable URL for the preview pane and a secure way to access the (un)published data via API.

[niklasnatter]

Personally I would like to see a configurable URL for the preview pane and a secure way to access the (un)published data via API.

I dont think that is a particular bad solution for previewing content 🙂 But I understand that headless-first platforms provide additional APIs for this. I see the following challenges for implementing such an API in this bundle:

• I guess you deploy a second application instance that should be displayed in the preview window in such a setup. How would you implement the live preview functionality in this case? The easiest solution would be to just display the unpublished data and reload the preview only when the page is saved. But that will also decrease the UX and might even need changes in the preview functionality of the sulu core. Do other headless solutions provide something like this?

• The API should not be public. This means that the bundle needs to implement some kind of authorization mechanics. I am not sure how other platforms handle this. A simple solution would be to add some kind of previewToken to the bundle configuration. That is not a great solution in terms of security, but maybe it is enough for this kind of API.

That said, I am not planning to implement this by myself at the moment. While the iframe solution might feel hacky, it solves both challenges with minimal effort and without any core changes. But if anyone is interested to work on this, pull requests are certainly welcome 🙂

[alexandersch]

Thanks for shining your light on this matter. I think you're right about the implementing challenges.

Most other platforms provide some sort of SDK or client which updates the application's state on every change from the admin form. This way you would always see the latest render of your content. For example Storyblok, they provide a content API accessible with an API token. With a simple GET param you can retrieve draft content.

Such a simple token should theoretically be secure enough providing that you don't expose it to your frontend application for everyone else to exploit. Maybe a JWT based authentication could be better alternative. But that is open for discussion I guess.

For the preview functionality in Sulu this would mean that it just loads the front-end url inside the already existing iframe with some preview URL params. I am not sure how to implement the onChange functionality just yet.

Maybe I can try to implement it and submit a PR in the future. For now I'll use the 'hacky'solution.

[alexander-schranz]

For the Preview and onchange behaviour I will link here to the following issue #65. There is an example how to call your nextJs or other application which need to provide a url to render the given data with it which should then return the html and sulu will this response then show in the preview.