Page History

Since the 6.2 LTS release, marketers and content practitioners can edit a JavaScript-based SPA (such as React or Angular) in the Magnolia Page editor in the same way they would edit a traditional website. This means developers can implement a headless approach with all of its advantages, and yet content authors still get the control, context and high-fidelity preview of the Page Editor.

Magnolia comes with modules and libraries that help you develop a Single-Page Application (SPA),

"a web application or web site that interacts where with the user by dynamically rewriting the current page rather than loading entire new pages from a server." (Wikipedia).

...

To serve SPA pages, you need to: 

• Configure Develop and run a JavaScript framework server. Currently, the following JavaScript web frameworks are supported: Angular and ReactJShost a JavaScript SPA. It could be hosted on a Magnolia instance or another delivery platform such as a CDN, front-end app server like Next, or any other server. Currently, Angular and React are supported.
• Connect the SPA to the REST endpoints of the Magnolia public instance which will serve page content and templates to template information to the SPA. 
• Make sure that page , area and component templates developed in the front-end framework are correctly mapped to their Magnolia counterparts, and that besides the indexthe page template definition (using the SPA root index.html file you ) correctly reference references all CSS and JavaScript files assembled by the front-end framework.

...

An SPA expects two types of input: page content and page template definitions .

• Page content, which is always edited in the Pages app, is requested by an external SPA through the Magnolia Delivery endpoint API v2.
• Page, area and component template definitions are requested by the SPA through a dedicated Magnolia template definition endpoint.

...

The rendering of an SPA page is done through the JavaScript libraries included in the external React or Angular frameworkMagnolia JavaScript libraries available via npm (@magnolia/react-editor and @magnolia/angular-editor). The libraries assemble a component tree from the REST-delivered content and templates.

...

The template id, typically stored in the  mgnl:template  property, is used as a template denominatorkey to get the correct JavaScript component.

In order to create components based on their template id, component mappings must be defined. The mappings are JavaScript objects, containing entries whose mappings contain entries whose key is the template id string, and whose value is a direct JavaScript reference to the component type. The mappings are stored in the front-end project, close to template implementations.

Editing content of an SPA page

Since content editing in an external front-end app is a complex and challenging task, the React/Angular apps currently don't provide remote content-editing capabilities through REST. All content editing All content editing is done in the Pages app of the Magnolia author instance. The Magnolia-provided SPA renderer libraries ensure that a SPA project can be edited in the Pages app. The SPA renderer produces template annotations, which the Pages app transforms into the green toolbars – editable page elements. Note: The green toolbars are generated whenever the page iFrame is loaded. Additionally, the green toolbars can also be generated by calling the document.mgnlRefresh() function.

The renderer libraries allow you to work with page hierarchies in the same way you would expect when creating non-SPA pages. SPA applications can load content from different Magnolia pages. The content can be organized using a navigation component or through back and forth buttons.

Example

The angular-minimal is a parent page to the about page:

Image Added

Content of both pages is freely accessible to the editor of an SPA application and links to both pages are placed next to each other on a blue navigation bar:

Image Added Image Added

On the Magnolia side, an SPA has a very simple template definition that just references the index.html file generated by the external React or Angular app. This index.html page is used as a template script.

SPA editing tutorial

Walk through the steps of adding new dynamic components to a managed SPA:

Hello Magnolia - SPA

Browse a minimal demonstration project:

Minimal Headless SPA Demo

See also

• Single-page application (Wikipedia).
• angular.io - a TypeScript-based open-source web application framework.
• reactjs.org - a JavaScript library for building user interfaces.nodejs.org - a JavaScript runtime built on Chrome's V8 JavaScript engine.