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:
One session I presented at Episerver Ascend London, Stockholm and Benelux 2018 was on Episerver as headless. This specifically talked about Episerver's approach to headless, including advantages and disadvantages of the approach. I also showed some examples of how the Content Delivery API (the Episerver headless API) could be used.
This post shares the code and presentation ran in this session.
Exploring the API
This section showed what could be done with the Content Delivery API. It simply installed the Content Delivery API onto an Alloy site and used Postman to explore some of the capabilities such as loading a page, querying for content and expanding content areas to retrieve multiple pages/blocks in a single request. An example can be seen in Postman below: