Magnolia comes with modules and libraries that help you develop a Single-Page Application (SPA),
a web application or web site that interacts 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:
Connect the SPA to the REST endpoints of the Magnolia public instance which will serve page content and template information to the SPA.
An SPA expects two types of input: page content and template definitions.
Once available to the external app, they are passed to a function in the app app that renders the final page tree.
The libraries assemble a component tree from the REST-delivered content and templates.
The page node represents the root content for a given application state, for example a page title or page properties.
In front-end terms, a page is also a component, just a top-level one.
Each JCR node then represents a page, area or component.
All content editing is done in the Pages app of the Magnolia author instance. The Magnolia-provided SPA renderer libraries ensure that an 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.
The green toolbars are generated whenever the page
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.
angular-minimal is a parent page to the
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:
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
The Visual SPA Editor fully supports the personalization features of the Pages app. Authors can:
create variants of pages or component,
choose audiences for them, and
test the results in the Preview app.
The Delivery API will return personalized content based on the traits of the current request and session.
For more details, see Personalization of headless SPA projects.
Single-page application (Wikipedia).
angular.io - a TypeScript-based open-source web application framework.
nextjs.org - a React framework with extra features such as server-side rendering and generation of static websites.