Page tree
Skip to end of metadata
Go to start of metadata

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.

Installation

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

<dependency>
  <groupId>info.magnolia.pages</groupId>
  <artifactId>magnolia-spa-rendering-extended</artifactId>
  <version>${SPARenderingExtendedVersion}</version>
 </dependency>

Versions

6.2Magnolia 6.2

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

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.

Warnings

  • This module is at INCUBATOR level.

Changelog

  • Version 6.2 - Initial release of the module.