A number of Episerver sites are now using libraries such as React or Vue.js to create Single Page Applications (SPA) or Progressive Web Apps (PWA) using a headless implementation approach. This is in contrast to the traditional ASP.net MVC front ends that many Episerver builds are using today.

So I decided to put this post together to collect some useful resources for working with single page applications (SPA) or progressive web apps (PWA) in Episerver when building headless front ends. Each section contains a list of useful links ordered by the most recent post/update first to help understand how to build out Single Page Application (SPA) or Progressive Web App (PWA) front ends with Episerver. As more resources around SPAs get released I will update them here.

Episerver Single Page Application Reference sites

Episerver supplies some reference sites to demonstrate how to build Single Page Applications in Episerver using the Content Delivery API. Should be noted that both sites support preview, versioning and on page edit for the SPA site in Episerver. 

Episerver Foundation Single Page Application

A reference architecture built using React to show how a full headless front end can be built on top of the Episerver Foundation starter site. It is opinionated and convention based to allow existing Episerver developers to get started with a front end build based on React using some familar concepts. Read about it here: https://world.episerver.com/blogs/remko-jantzen/dates/2020/5/introducing-foundation-spa-react/ and here: https://github.com/episerver/Foundation-spa-react. An example of an React SPA component for an Episerver text block can be seen below:

Episerver Music Festival

A reference site built in Vue.js using the Episerver Content Delivery API. The Music Festival site demonstrates one approach to render Episerver content as headless SPA using client side routing for navigation:  https://github.com/episerver/musicfestival-vue-template. The site can be seen in action below showing a fully headless front end SPA. This shows on page editing where content only visible in a modal pop up is being edited in the Episerver UI:

Using SPAs/PWAs in the Episerver edit UI

There are number of capabilities in the Episerver UI that enable on page edit to work in the Episerver UI when building your SPA with Episerver. This is a collection useful links to help understand the approach taken and what needs to be done in your app to enable on page editing when building SPAs in Episerver. 

On-page editing with client-side rendering

The official documentation for that describes how to implement your SPA to ensure it allows on page editing in the Episerver user interface: https://world.episerver.com/documentation/developer-guides/CMS/editing/on-page-editing-with-client-side-rendering/

Improve OPE with client-side rendering

A blog post that shows some of the on page editing improvements which you will likely use if building out a headless front end as a SPA with Episerver: https://world.episerver.com/blogs/linh-nguyen/dates/2020/3/improve-ope-with-client-side-rendering/. This post also references some other blog posts that describe changes that happended to the the official release. 

Content delivery API

The Episerver Content Delivery API is a RESTful API that is used to deliver content to SPA / PWA front ends so have included reference links here as there is a high probability that developers will be using it as part of the build.

Official Content Delivery API documentation

The official Episerver Content Delivery API documentation: https://world.episerver.com/documentation/developer-guides/content-delivery-api/.

Extending the Content Delivery API

A great blog post from EMVP Alf Nilsson on tweaking and extending serialising responses in the content delivery API: https://talk.alfnilsson.se/2018/04/24/tweaking-and-extending-serialization-from-episerver-content-delivery-api/

Getting started with the Content Delivery API

A nice blog about installing the Episerver Content Delivery API on your site: https://world.episerver.com/blogs/david-buo/dates/2018/11/get-started-with-content-delivery-api-2-2-0/

Episerver Content Manager

Inevitably when working with SPAs in Episerver a conversation around headless capabilities will occur. To help remove all contextual editing Episerver also has a nice feature called Content Manager. This tool removes the Episerver editing UI out the equation and allows simple, focussed creation and editing of content that can either be used in the Episerver UI in the traditional way or exposed using the Content Delivery API for headless delivery. 

Get Episerver Content Manager via the Episerver Nuget feed and read about it here: Content Manager - lightweight editing UI and see it below:

Conclusion

Building a SPA or PWA with Episerver is possible today and many people are doing it already. I will aim to keep these links up to date as new posts and capabilities come about.

If you have something useful to add let me know in the comments below or on @davidknipe and I will add them.

Comments

Recommendations for you