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 Atlas platform.
Here are the three possible scenarios that this guide will cover:
- You created your site using an Atlas Blueprint
- You created your site from scratch using Faust.js
- You are using another framework like Svelte/SvelteKit, Vue/Nuxt, or Next.js
When you deploy an Atlas 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 Atlas app when it is created.
If you need to change that setting, if you change your domain name for example, you can do so in the
Settings > Headless menu in your WordPress install by changing the
Front-end site URL value:
While many of the Atlas 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.
- Faust.js Documentation
- Previews In Headless WordPress With NextJS
- Headless WordPress Authentication with Native Cookies