Mapping between Magnolia and SPA components

Components developed in a front-end framework must be correctly linked to their Magnolia counterparts through mappings. The mappings are:

A JavaScript object containing entries whose key is the template id string, and whose value is a direct JavaScript reference to the component type.
Passed to the Magnolia JS libraries to render content.
Stored in the front-end project, close to component implementations.

Example component mapping

Below is an example Magnolia template definition of a component called headline, and their respective JavaScript (TypeScript) mappings in Angular, ReactJS and Vue components.

The excerpts are adapted from https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/.

To create a mapping, the important thing is the Magnolia template id of the template, a combination of the module name and the template path.

For the following template definition, the Magnolia template id is spa-lm:components/headline

/magnolia/light-modules/spa-lm/templates/components/headline.yaml

title: Headline
dialog: spa-lm:components/headline

Mapping between Magnolia and Angular

/spa/angular-minimal/src/magnolia.config.js

  export const config = {
    'componentMapping': {
      'angular-minimal-lm:pages/basic': BasicComponent,
      'angular-minimal-lm:pages/contact': ContactComponent,

      'spa-lm:components/headline': HeadlineComponent,

...
    }
  };

Additionally, to set the mappings, setComponentMapping() must be called on the EditorContextService:

/spa/angular-minimal/src/app/root.component.ts

this.editorContext.setComponentMapping(config.componentMapping);

Mapping between Magnolia and ReactJS

/spa/react-minimal/src/magnolia.config.js

const config = {
    'componentMappings':{
        'react-minimal-lm:pages/basic': Basic,
        'react-minimal-lm:pages/contact': Contact,

        'spa-lm:components/headline': Headline,

...
    }
};

Additionally, to set the mappings, the config object must be passed through the config argument of the <EditablePage/> component:

/spa/react-minimal/src/helpers/PageLoader.js

import config from '../magnolia.config';
...
<EditablePage templateDefinitions={templateDefinitions} content={content} config={config}>

Mapping between Magnolia and Vue

/spa/vue-minimal/src/magnolia.config.js

const config = {
  componentMappings: {
    // Pages
    'vue-minimal-lm:pages/basic': Basic,
    'vue-minimal-lm:pages/contact': Contact,

    // Components
    'spa-lm:components/headline': Headline,

  },
};

...

Additionally, to set the mappings, the config object must be passed to the EditablePage component:

/spa/vue-minimal/src/helpers/PageLoader.vue

import config from "../magnolia.config";
...
export default {
  name: "PageLoader",
  components: {
    EditablePage
  },
  data: function() {
    return {
      content: undefined,
      config,
      templateDefinitions: {}
    };
  },
...
};