SPA Rendering Extended module
Edition |
Incubator (services) |
||
Issues |
|||
Git |
|||
Latest |
1.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/SectionPage 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
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. |