How Magnolia CMS enables headless SPA development
Dec 19, 2019
5 min
3 squars with different logos / symbols on them

How Magnolia CMS enables headless SPA development

Magnolia is building integration libraries for the three most common SPA frameworks. 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.

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.

Magnolia CMS & Angular

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.

Configuration

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.

Define Areas & Components

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.

Magnolia CMS & React

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.

Configuration

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.

Define Pages & Areas

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.

Magnolia CMS & Vue

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.

Configuration

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.

Integrate Pages & Areas

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.

Streamlining Enterprise Development

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.

About the author

Bartosz Staryga

Front-End Solution Architect, Magnolia

Bartosz is an expert in headless content management and front-end development at Magnolia. He designs and develops new Magnolia features and supports customers with their headless implementations from content types to APIs to integrations. Bartosz enjoys building new things and seeing them in action. He is also a trainer for Magnolia’s Headless training.