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 has a feature called Episerver Projects that allows editors to work and collaborate on a number of changes that are grouped together into projects. This is allows multiple changes to be made to a site that can be previewed and all published at once which is useful for things like campaign launches and site updates. This is a great feature but more than once in the Episerver Forums I have heard of the requirement to revert all changes made in a project.
Thinking about this, an approach could be to create another project to revert the changes made by a project. This allows editors to quickly get back to the state before the project was published. The code to achieve this can be found over at the following Gist: https://gist.github.com/davidknipe/d64f9d9993443fd5443c6a6a9f6dae13 and does the following things:
Episerver has a great capability that allows content to rendered inside content areas called partial views. This allows an alternative rendering of a piece of content when displayed in content areas. Its often used for teaser type capability where editors take something from the tree and drags it onto a content area. However it's not possible to preview what these partial views will look like easily without actually dragging them onto a content area and trying it.
I wanted editors to be able to see what a partial view would look like and also allow them to edit the content behind it using on page edit before publishing some content. This can be done using a preview controller and a display channel to allow switching to a partial view preview (even if it's not the exact use that content channels are meant to be used for!).
Seeing it in action
If you are a Microsoft Teams user and want to work using mutliple windows then this tip is for you.
Sometimes I find I want to do 2 things on Microsoft Teams at the same time. Something like having two chat windows visible at the same time rather than switching between two chats in the Teams UI. However Teams doesn’t support multiple windows at the moment. To get around this you can log into the web version of teams by browsing to https://teams.microsoft.com and clicking the “Use the web app instead” link as shown below:
A new version of Virtual Template System is now available with some UI enhancements. Virtual Template System allows users to view and edit templates in the Episerver UI.
Specifically the enhancements are as follows:
- The revert button is now either green or red. Green indicating that the template is the same as the one on disk, red meaning the template is different so should be reverted with caution
- When saving a template using the "Save" button the confirmation message now disappears as soon as an editor changes it
- The path is now clickable to either edit or view a template depending on whether its virtualised or not
- Now possible to choose to search in file names only, rather than whole file contents
- Minor bug fixes
A quick video can be seen here to show the changes: