Skip to content
WP Engine |Headless Platform

Post and Page Previews

In this guide, you’ll learn how to configure post and page previews for your headless WordPress site running on the Headless Platform.

Here are the three possible scenarios that this guide will cover:

  1. You created your site using a Blueprint
  2. You created your site from scratch using Faust.js
  3. You are using another framework like Svelte/SvelteKit, Vue/Nuxt, or Next.js

When you deploy a Blueprint, post and page previews should work out of the box. The FaustWP plugin will automatically rewrite your frontend preview URLs to the URL provisioned for your Headless Platform app when it is created.

To update your front-end URL, navigate to Settings > Headless menu in WordPress and change the Front-end site URL value. This is necessary if you, for example, change your domain name:

Frontend site url setting in faust wp

While many of the Headless Platform Starter templates are based on Faust.js, it is still possible to build a site from scratch using the framework, and even to deploy that site on another hosting provider. The Faust.js docs for post/page previews cover all of the steps that are required for users building from scratch with Faust.js.

If you are using a framework other than Faust.js to create your headless site, there will be some additional complexity involved with enabling post/page previews. Since page and post previews require that a user be authenticated to view them, even over REST & GraphQL APIs, your application will need to handle this in some way while also creating a page to render the previewed content.

In any case, looking at how Faust.js handles this could be a good place to start, as it also has a @faust/core module that may be able to be used in your project depending on your setup. Below you will find links to a few resources that address some portion of the challenges developers will face when trying to create post and page previews from scratch.