Magnolia front-end helpers are collections of JavaScript libraries that enable easy integration of single-page applications in the Magnolia Pages app. Currently, the helpers are available from our Bitbucket repository https://git.magnolia-cms.com/scm/modules/frontend-helpers.git, and currently consist of the following:
- Angular renderer.
- React renderer.
- Magnolia Template Annotations. The annotations make content from a front-end project editable in Magnolia. This is achieved by injecting annotations (HTML comments) around components/templates which the Magnolia Page Editor transforms into controls for web content editors.
Installing and usage
For more information on how to install and use these helper libraries, click the following links:
- Angular renderer: https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/angular-renderer/projects/angular-renderer/README.md
- React renderer: https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/raw/packages/react-renderer/README.adoc
- Template Annotations: https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/raw/packages/template-annotations/README.adoc
On npmjs.com, the helpers have the following package names:
- Angular renderer:
@robsis/react-renderer - React renderer:
@robsis/angular-renderer - Template Annotations:
@robsis/template-annotations
Front-end helpers in Magnolia example SPA pages
You don't need to include these helpers manually if you would like to try out our example Angular and React SPA demo pages:
- Angular: https://git.magnolia-cms.com/users/rsiska/repos/spa-angular-minimal/
- React: https://git.magnolia-cms.com/users/canh.nguyen/repos/magnolia-react-tutorial/
Each of these two example SPA pages already include required dependencies to the helper libraries.
Overview
Content Tools