Using preview URLs for your Kontent-powered website

Going headless for your website's content management doesn't mean you need to edit blindly. Kontent has a range of very powerful features to give you the visual preview and approval experience you know and love from your traditional CMS. As usual with headless and microservices, you have plenty of flexibility and options, you just need to connect a few dots.

Andy Thompson

28 May 2021

4 minute read

The preview function on our Kentico Kontent website is very quick and pain-free. Often I will edit in one tab and have the preview open in another tab. Then it's just a simple click of the refresh button to see my updates exactly as the user would see them on the live site. I really don't feel like the lack of a WYSIWYG editor has held me back at all in moving from a traditional CMS to Kontent.
Tami Iseli
  • summary of preview functionality
    • preview API v delivery API, secret keys
    • supports every language and implementation method you can think of
      • in this post I'll focus on the favourites - .NET Core and Jamstack (Gatsby and Next)
    • workflow (published is special)
    • UI
  • how to implement a preview site
    • usually a separate environment
    • it doesn't even need to look the same as your live site, but generally you want it to
    • .NET Core - deploy twice, extra slot with app settings is enough
    • Jamstack, you don't want a static build, you want realtime (cancels out the benefits of course but explain pros and cons)
    • Gatsby - SaaS Gatsby Cloud
    • Next.js - native support for real-time rendering, SaaS available in Vercel
    • Roll your own - get Netlify in on this?
      • Azure Web Apps (linux, node)
      • AWS, almost any other hosting provider
      • Netlify is a good option (figure this out!)
  • Connecting Kontent to your Preview site
    • Preview URL configuration options
    • Your preview URLs may not have to be the same as your production URLs
      • You will be tempted to configure the preview URL to follow the same logic as your page routes and URL slugs, and this can be difficult because there's no way to put custom business logic in there. But you don't have to.
      • .NET Core - custom preview route example
      • Next.js - out of the box support for preview URLs that then redirect
      • Gatsby.js - ??? not sure the best way to do this, maybe static preview page aliases that redirect?
      • Netlify - redirects file can be generated to map /preview/itemid to the desired URL too
      • Benefits: allows you to preview any content type, not just those with URL Slugs
  • Making it even better
    • Web Spotlight
    • Supports all stacks and technologies
    • link to my web spotlight blog for how to set it up, and advanced configuration options
  • Tips/reminders
    • keep your preview key secret if you can
    • lock down your preview site
      • robots
      • meta tags
      • IP restriction
      • proxy auth
    • make sure your preview site updates quickly
      • don't cache aggresively - people would prefer up to date than fast
      • don't build it as a static site
    • remember if you're struggling to match your preview URLs to live site URLs, maybe you don't have to

Our Kontent experts

Luminary has some of the most experienced headless CMS experts in the world, including Kentico MVP Andy, and Emmanuel, the developer of the first Kentico Kontent powered website in the world!

Kontent.ai logo

Kontent.ai is a headless CMS with native AI functionality, that provides easy-to-use content management tools for marketers. Luminary is a Kontent.ai Gold Partner and a global leader in its implementation.

4 min read

Goodbye Kentico Cloud, hello Kontent!

Kentico Cloud has undergone a rebrand, and is now called Kontent. In my opinion, it was long overdue! You might have seen the marketing from Kentico about the new name and image, but here are my thoughts on the transformation from the agency side.

Andy Thompson
Andy Thompson

17 September 2019

4 minute read

Picture of Luminary CTO Andy smiling with a black background

Andy Thompson

CTO, Kontent.ai MVP, Kentico MVP, Owner

As our CTO, Andy heads up our developer teams, platforms and technology strategy.

Emmanuel Tissera

Emmanuel Tissera

Technical Director, Umbraco MVP

As Technical Director, Emmanuel works closely with our clients while providing leadership and mentoring to the development team.

Thai Tran

Thai Tran

Solutions Architect/Team Lead

Thai is like the Swiss Army Knife of developers - flexible, adaptable and always dependable.

Kentico Kontent

10 min read

We built our new site using Kentico Cloud (and a few other microservices)

We've been preaching the benefits of headless CMS and microservices architecture to our clients for a couple of years now. So I decided it was time to put my money where my mouth is!

Andy Thompson
Andy Thompson

24 July 2018

10 minute read

Holding Redlich home page on tablet

Holding Redlich

Law firm Holding Redlich was looking for a site that would convey a sense of approachability and provide easy access to the firm's substantial library of content.

Picture of legalsuper team in a meeting in black and white

Legalsuper

legalsuper approached Luminary following a significant brand refresh and was faced with the predicament of redesigning and redeveloping their existing website or investing in a new build on a more suitable technical platform to suit their future needs.

Keep Reading

Want more? Here are some other blog posts you might be interested in.