Happy editors with Umbraco preview and Enterspeed ❤️

Headless headaches

When moving your website(s) into the world of headless, you get a lot of new possibilities and cool stuff, but there are still headaches (pun intended) to overcome. Thankfully, most of the early obstacles are solved, but previewing content created in your CMS is still a tricky issue that many encounter.

But don’t worry, Enterspeed got you!

Decoupled frontends and previewing

When having a decoupled frontend, previewing your newly created content is not easy without actually publishing your content first.

At Enterspeed, we're all about helping you solve problems and create great user experiences, whether it is benefitting the end user or your editor. So, here is our take on how you can go around allowing your Umbraco editors to preview content before publishing.

Let's get started

First off, let’s get an overview of how a typical setup with Umbraco and a headless frontend could look like.

Here we have an Umbraco site, which ingests its content into Enterspeed using two different sources. The data is then requested by the frontend app, in this case Next.js but it could as well be Nuxt.js or something else.

Create content

In Umbraco, the editor creates content and can either choose to preview or publish. We want this to be a smooth workflow that allows you to see changes fast.

Here is an example of a page with the option of previewing.

Send to Enterspeed

When the editor is done creating and saving the content, Umbraco will send the content to Enterspeed and store it.

In Enterspeed's Umbraco plugin, we've added an extra field to settings, so we now have two sources available that will tell which Enterspeed source to post the data to.

When the content is saved it will go into the Enterspeed preview source (Preview api key), if published it will go into the production source (Api key).

Now we have separated unpublished and published content from Umbraco into two data sources in Enterspeed:

You also need to have the right environments configured in Enterspeed, but this depends on how your application is set up. For Enterspeed.com we have environments that match the data sources that we use in our Next.js depending on what content we want to show.

Next.js and Netlify

Next up we need to get the content from Enterspeed and into our frontend application. We recommend you take Umbraco and Next.js for a spin following our tutorial and hosting the frontend on Netlify. We also have a Nuxt3 demo repo, for you Nuxt fans out there.

Wrapping up

This is of course a pretty quick introduction to a fairly complex feature. If you want to be kept in the loop on more on this and other subjects related to headless, follow us on LinkedIn!

Since writing this article, we've created a package that overrides the default Umbraco preview button and lets you configure an alternative preview url. Read about how to preview Umbraco content in a headless setup. 

Don't get stuck – we're here to help

If you have any questions, don't hesitate to contact us. You have several options, you can:

Send us an email: support@enterspeed.com
Submit a ticket: Create a new ticket
Use our contact form: Go to contact

We also have a guide that takes you through enabling preview mode in your Next.js application. Perhaps that's for you?