SPA Rendering Extended module

Edition

Incubator (services)

Issues

SPARE

Git

Git

Latest

1.2

Compatible with Magnolia 6.2.

This module is now deprecated in favor of a standard bundled functionality.

For more details, see Hosting the SPA: Externally hosted SPA.

The SPA Rendering Extended module allows you to edit content served from external sources. In a nutshell, you can write your content 100% independently from Magnolia while still getting the full WYSIWYG experience for your editors. So if you aim for server-side rendering with Angular, Vue, or React or think about using static site generators with Netlify then this module is the solution.

This module is at the INCUBATOR level.

Installing with Maven

Maven is the easiest way to install the module. Add the following to your bundle:

<dependency>
  <groupId>info.magnolia.pages</groupId>
  <artifactId>magnolia-spa-rendering-extended</artifactId>
  <version>1.2</version>
</dependency>

Usage

The module adds another rendering option for templates.

Template Configuration

To use the SPA Rendering Extended module define your page template as follows:

title: Headless ecommerce - Home
templateScript: http://localhost:3000/
dialog: headless-ecommerce:pages/Page
renderType: spaExtended
class: info.magnolia.rendering.spa.renderer.SpaRenderableDefinition
areas:
  main:
    title: Main area
    availableComponents:
      Banner:
        id: headless-ecommerce:components/Banner
      Section:
        id: headless-ecommerce:components/Section

Page Properties Dialog

If you want to use the same page definition for different websites, for example, different heads in dev stage and production, you can override the templateScript in the page properties by defining the following field in the page dialog:

templateScript:
  $type: textField
  label: Template script
page properties dialog

Magnolia site definition

In case you wish to use the same template script for a whole websites, you can override the templateScript in the site definition by defining the following as follows:

<site-definition-name>:
  class: info.magnolia.rendering.spa.extended.site.ConfiguredSpaExtendedSite
  templateScript: http://localhost:3000/
  i18n:
    ...
  domains:
    ...
  mappings:
    ...

SPA

Required steps in SPA app:

  • Ensure that resources links are full URLs e.g. https://mgnl.io/js/index.js.

  • Ensure correct reading of the path for the page to be fetched from Magnolia. The URL inside Magnolia’s preview would have the site node name prefix and .html suffix, e.g. /nodeName/page1.html.

    Below is an example of reading the correct pathname
nodeName + window.location.pathname.replace(new RegExp('(.*' + nodeName + '|.html)', 'g'), '')
You can find a useful library here.

Changelog

Version Notes

6.2

Initial release.
Feedback