How Magnolia CMS enables headless SPA development

Single-page apps (SPAs) have been gaining traction amongst both developers and marketers. Marketers are drawn toward the compelling digital experiences possible with SPAs, while frontend developers find today’s top SPA frameworks easier to work with.

The challenge many organizations face however, is seamlessly integrating the SPAs they build with their existing CMS. That’s why Magnolia is building integration libraries for the three most common SPA frameworks: Angular, React, and Vue. Using these libraries, frontend developers can quickly integrate with Magnolia so that marketers can create and publish content to SPAs from directly within the CMS.

Let’s look at how developers can utilize npm libraries to build SPAs that retrieve content from the Magnolia CMS headlessly.

Note that the Magnolia ‘Visual SPA Editor’ feature is in active development and expected to be available as a core feature in Q2 2020. But you can already try out the technique with a preview version of the feature prepared by our Professional Services department.

Many enterprise developers favor Angular because it has a lot to offer in terms of templating and testing code out of the box. This also means Angular is the most strongly opinionated framework of the three and relies heavily on object-oriented programming. Angular is ideal for large-scale SPAs with advanced functionality.

You can bring the Angular/Magnolia integration library into your Angular project with npm install angular-magnolia.

Then import the AngularMagnoliaModule and MagnoliaContextService libraries into your NgModule. Under the imports, you should share your current app environment with the AngularMagnoliaModule. Also, be sure to add the MagnoliaContextService to the providers so that its services are available globally throughout your app.

Lastly, you need to subscribe to router events in your AppComponent and update the MagnoliaContextService with the correct URL fragment when the user navigates to different routes. This will ensure that your Angular app and Magnolia CMS remain in sync.

Within your NgComponents — the building blocks of an Angular app — you can define Magnolia areas and components to tightly integrate the app with CMS content.

First, create a new DOM element (ie. a simple div) and include the cmsArea directive that matches your YAML definition within your Magnolia project. Also include the list-area directive, which tells the library to display the appropriate components one after the other. You can then retrieve the components for this area using the MagnoliaContextService method called getAreaContent. Otherwise, you can define a separate component by extending the MagnoliaComponent class.

React is often the framework of choice for development teams that need to build a light-weight app and want the flexibility to choose additional modules and libraries as necessary. That’s because the out of the box React framework is small and developers can easily integrate third-party tooling. React is ideal for fairly small applications or cross-platform apps using React Native.

You can bring the React/Magnolia integration library into your React project with npm install react-magnolia.

Configuring the Magnolia library for React is straightforward. You only need to create a magnolia.config.js file in the root folder of your React app. This file is used to map Magnolia templates to React components. You can also modify the way that the library retrieves the child nodes of an area component if the default doesn’t suit your requirements.

The react-magnolia package exposes two Magnolia elements as React components: pages and areas. Components are independent, reusable UI pieces that make up a React app.

Once you configured the magnolia.config.js, pages will look up the corresponding template using this config file and render the appropriate React component and its underlying properties. Similarly, areas will look for the template within the config file and render the appropriate Area component as well. That means the React app will remain in sync with changes marketers make within Magnolia.

Vue is becoming more popular amongst front-end developers that want simplicity. The framework is the most lightweight and easiest to learn, making the framework most suitable for small apps. As a result, it’s the least opinionated of the three frameworks and less flexible than React. Vue is ideal for very small apps or prototypes that need to be launched quickly.

You can bring the Vue/Magnolia integration library into your Vue project with npm install vue-magnolia.

In order to use the Magnolia package, you must include a magnolia.config.js file in the root folder of your Vue project. With this file, you can map Magnolia templates to Vue components — reusable UI elements. You also have the option of changing the way area components retrieve child nodes, but for many apps the default approach will work.

When creating your Vue components, you can integrate with Magnolia page and area elements. For the library to know which Magnolia element each Vue component relates to, you must define them in the magnolia.config.js. Once the components are mapped, developers can build the Vue app in a structure familiar to Magnolia users, and marketers can preview and publish content directly to the Vue app.

Adoption of the top SPA frameworks will likely continue to grow, and headless content management is the best way to empower enterprises when building out the customer experience. These libraries simplify the development of SPAs by allowing developers to leverage pre-built framework components that correspond to Magnolia pages, areas, and components. That means it’s straightforward to keep your SPA aligned with Magnolia content without additional effort by development teams. In turn, marketers can intuitively manage the SPA within the CMS interface. This includes creating, editing, and previewing content published directly to the SPA app via headless content delivery.

At Magnolia, we aim to streamline development for enterprise organizations so that they can get their applications to market faster and at a lower cost. That's why we’ve been building developer-friendly capabilities for headless content management, light development features, and these latest SPA integration libraries. But we’re not stopping here, so be on the lookout for more developer-centric capabilities in the near future. Magnolia will accelerate your digital ambitions.