In this tutorial, you will learn how to create a working page-preview when you are building a SPA using Episerver and the content delivery API. Traditionally when you worked with Episerver you could use API like the PropertyFor() API that would add Episerver specific attribute onto components so features like inline-editing to work. This means that you will need to build features within the SPA to allow things like the page preview to work.

To start with, let us examine what a content delivery API request looks like. Imagine that you had some Javascript using Axios to call the API, similar to this:

This request will take a content reference ID and return all the related published content from the CMS. As the API only returns the published content this poses a preview dilemma. How do you get the preview content from the API?

Using Dotpeek and looking within EPiServer.ContentApi.Core you will find the ContentLoaderService. As the name implies this class is responsible for loading the content for any API requests. Within here you will find ShouldContentBeExposed(). Y

This code will only return data when the page is published and the content is not expired. If you want to view the website in preview mode then this will not work. Content editors will not be able to see the unpublished changes. Instead, you will need to override this default behavior whenever a request is made in editor preview mode. To override this default behavior you will need to hook into the Episerver rendering pipeline and inject a custom content loader. The code to do this can be seen below:

This modified content loader will bypass the default rules and allow a request as long as the epieditmode query-string is enabled. If true then the request is in edit mode. If false then the request is in preview mode. If the query string is not present at all then it's a normal request the default rules should be applied. Asides from the content loader you will also need to customize the URL resolver:

This code above is completely taken from the foundation SPA code. Within GetContextMode() the content of the request is determined. Again this uses the same logic as above, when no query string is present then the API should work normally. If the query string, epieditmode set is present and set to true then the request is an edit mode request. If the epieditmode is present and set to false then the request is within preview mode. The context is then passed into URL resolver so Episerver generates the correct URL. To configure the rendering pipeline to use these new classes, you will need to update StructureMap. This can be done like this:

Lastly, you will need to enable preview mode:

With these three things in place, the page preview should now work! One thing you should be aware of when you start testing the page preview is that any blocks contained within content areas on the page will only render the published versions. The content area loader will only render published block. To get around this you will want to either make use of Episerver projects. Happy Coding!