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


This 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 editorial 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 then this module is the solution.



Installation


To install this module, add maven dependency to this module:

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

Versions

1.0Magnolia 6.2


Configuration

The module contains the yaml definition of the renderer.
/spa-rendering-extended/renderers/spaExtended.yaml


class: 'info.magnolia.rendering.spa.extended.renderer.SpaRenderer'


Integration


Magnolia templates

To use the SPA extended renderer, define your page template as following:

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

Magnolia page properties

In case you wish 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. Url inside Magnolia preview would have site node name prefix and .html suffix e.g. /nodeName/page1.html. Example of reading correct pathname:
nodeName + window.location.pathname.replace(new RegExp('(.*' + nodeName + '|.html)', 'g'), '')

You can find a useful library here.

License

DX Core



  • No labels