Introducing Foundation Spa React

TL;DR: Head over to https://github.com/episerver/Foundation-spa-react and get the initial alpha release of a React frontend for Episerver CMS developed within the Episerver Pre-sales team. With the invitation to our community to work with us on making this a high quality reference site.

In my role as Solution Architect I've the privilege to work both with prospects as well as with our partners. A topic that did arise during many of these meetings is headless. And even though I personally do not believe headless to be the be-all-end-all for the delivery of customer experience, I do see the benefit of the technology stack used to deliver "headless". This put me on a quest to implement a React based SPA on top of Episerver Foundation. Today we're releasing the first version of this effort as an open source project on GitHub.

So what are we releasing:

• An alpha version to start collaborating with our community
• A CMS only implementation of Foundation, with just models and a minimum number of controllers to support the frontend.
• A working React based frontend for Episerver CMS, replacing the standard MVC frontend with a new ViewEngine that renders the React website.

The React Based Frontend:

The frontend is both opinionated (e.g. it has been built enforcing certain practices) as well as convention based (e.g. there are certain patterns you cannot break). By adhering to these you'll get most of the benefits from using this frontend. If you want to break these practices and patterns, you can still use (part of) the library which is included. It just means that more of the boilerplate has to be written by you.

Included right now:

• Layouts: Wrapper for the main routed content, typically the header & footer
• Routing: Resolving the content item based upon the URL as well as handling link clicks
• Content mapping: Maps content to React Components using the Episerver Content Type (e.g. Each content type in Episerver maps to a React Component
• On page editing: The base components and routing to support on-page editing are there already, just make sure to use them (or add the appropriate data-attributes yourself) to get on-page editing.
• Events: Although abandoned by React, they're convenient for working with "unknown" component types
• Infrastructure: Convenience components, models and abstract classes to keep an frontend implementation clean.
• Model synchronization: Automatically generate model definitions from the content types stored within Episerver
• Build-scripts: Configuration files for Webpack to build both the Server Side Rendering scripts as well as the browser scripts. These have different optimizations based upon the environment they run in.
• Ability to run on CCDXP: A frontend built upon this framework, can be deployed into the CCDXP, providing server side rendering. It's thus not required to add separate frontend servers.

An auto-generated IContent model, to ensure all data-models are identical to those within Episerver.

What's still on my wish-/to-do list (in no particular order):

Like any first version / alpha release there's a lot still on my whish-list, ranging from feature enhancements to structural enhancement.

• Personalization beyond the current limited support for Visitor Groups
• Performance measurement for A/B Testing
• Offline mode
• Install as launcher / run as app on Android & iOS
• Switch from the Fetch API to Axios
• Add an Express based build for deployments outside of DXC-S
• Commerce support
• Model Synchronization from frontend to Episerver*
• Custom routing (I.e. Enable you to add custom routes to the site)
• Change the library into a NPM library and enable more freedom in the implementation
• Enable updates of the SPA without deploying the .Net code, whilest running in CCDXP

*) This will most likely be done after our upcoming .Net Core release.

Anatomy of the frontend:

First things first: the language of choice. I've chosen to go with TypeScript, mostly because I like strongly typed languages and the ability to catch some of the errors already during build-time. For those having no TypeScript experience and only have done JavaScript, you'll catch on quickly.

The pre-configured environment is assuming that you'll deploy into CCDXP and thus requires the full Episerver CMS to be running on the development machine to keep the coupling in place. With the appropriate CORS setup on the Episerver side, the frontend can be deployed independently of Episerver. Personally when working on this, I use two IDE's, Visual Studio for the .Net part and Visual Studio Code for the Frontend.

Main files & folders:

The frontend is located within src/Spa.Frontend