This post describes how to set up the Optimizely Foundation Single Page Application reference site. Further information about what Optimizely Foundation Single Page Application reference is can be seen at the bottom of the page. If readers want to dive straight in then hit play below:
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: