SPA Integration

Owned by James Ellis-Jones
Last updated: Jul 05, 2018
2 min read

Lynicon now can be adapted to work seamlessly with SPA applications, sourcing content data through the SPA's router to be integrated with what it displays, and showing you the content editor for the current url alongside a preview of the SPA in the appropriate state for that url.

This is achieved on the server side by configuration of routes to use the SpaDiversionStrategy instead of the EditorDiversionStrategy. What this does is to adapt the routing options of a content managed route to work with a SPA fallthrough route so that requests for HTML pages fall through to be handled by this route. Requests when logged in by an editor still are diverted to show an editor, and requests for JSON still return JSON content.

Usually you will want to switch out EditorDiversionStrategy for SpaDiversionStrategy in all content routes. This is done by the LyniconSystemBuilder.SetDiverter method as below in the ConfigureServices method in Startup.cs:

services.AddLynicon(...)
	.SetDiverter(new SpaDataDiverter());

If you wanted to have some routes which served pages via the conventional MVC system, and others which provided content to a SPA, this can be done by overriding the diversion strategy used for specific content types as below (do this in the ConfigureServices method):

DataDiverter.Instance.Register(typeof(TheContentType), new SpaDiversionStrategy("Lynicon", "DualFrameEditor"));

Once the routing has been set up on the server side, seamless content editing requires a number of things to be set up in the front end platform:

  1. In your router, intercept url changes and make a request to the new url via AJAX ensuring you set the Accept header to 'application/json'. The server side routing will, based on the header, serve you the content data associated with the url as JSON. Forward this to the component or templating system so that it can be embedded in the rendered page at the appropriate places.
  2. Lynicon allows site navigation by following links in the preview window, keeping the editor in sync with the new page. To enable this functionality in a SPA, add another interception to url changes in your router. Ideally for performance this should come before the interception in 1. This code should check whether the new url is different to the existing page url, and if it is send a request to the new url with the query string '$mode=ping' appended. This tests whether the content management system should show an editor for the new url. If so, we cannot manage routing within the SPA as the CMS code on the server needs to build a new editor for the new url. So if this request returns with a 200 and a text response 'OK' then in-SPA routing should be cancelled and the window.top.location.href set to the new url, causing the top frame to go back to the server to build a new page. 'window.top' is used here as when content editing, the preview page is shown in an iframe, but it is the whole container that needs its url changed.