Preview Mode with Headless
s
We're working on a headless solution where the frontend is a sveltekit app that fetches data from Umbraco. We've used the Headless Preview-plugin to enable previewing content and it works fine, but it basically just redirects you to your headless solution, which means you lose all the fancy functionality that allows you to view your preview in different viewports. When inspecting the normal preview-mode in Umbraco there seems to be a simple iframe that shows the page. Is it possible to override this iframe url to show the headless frontend instead to keep the functionality?
j
It depends on the version: Version 13: Refer to this article: https://docs.umbraco.com/umbraco-cms/v/13.latest-lts/reference/content-delivery-api/additional-preview-environments-support#configuring-custom-preview-urls Version 14: Not possible Version 15 (upcoming): The feature is being reintroduced in a new configuration, but I'm not sure if it will make the cut for 15.0 yet or one of the following minor releases.
s
So this would use the standard preview but show the headless site in the iframe?
j
Yes
s
Great, I'll give it a try
Well not quite, it still just redirects me to my headless app and does not in fact keep me in umbracos preview UI with the iframe and buttons 😄 which is basically the exact same result as the package did 🙂
j
Hmm, I see. I was convinced it would keep you there. Maybe we can make that experience better for Umbraco 15
b
Thanks for this though, I think I was the one who suggested the package to sebp, but it's good to know that you can override the preview URL this way as well 🙂
167 Views