Attaching an SPA project to Magnolia
This page describes how you can attach a Single-Page Application (SPA) project to Magnolia so that its content could be edited in the author instance of Magnolia.
The SPA project used as an example on this page is
angular-sample and is assembled from two page templates
provided by a light module
angular-lm, which is part of the
We only showcase a project built in the Angular framework. However, a similar result could also be achieved with the ReactJS and Vue frameworks, the other two front-end frameworks currently supported by Magnolia SPA front-end helper libraries.
Node.js, npm and Magnolia
For development and testing, you need to install:
Java (JRE or JDK)
If you haven’t installed them yet, go to the page Installing Magnolia through npm CLI (dx-core documentation) and complete the steps described there.
For now, skip the step asking you to start Magnolia by entering the
Angular npm CLI
Make sure that the
@angular/cli npm package is installed as well. If
it is not, you can install it by executing the following command:
sudo npm install -g @angular/cli
Creating an Angular workspace
Create a folder called
dev, preferably at the same level as the
magnolia directory. Change to the new folder and create the
angular-sample workspace in it by copying the
/frontend-helpers/samples/angular-sample/ folder from our
git clone https://git.magnolia-cms.com/scm/modules/frontend-helpers.git
Linking the light-modules folder to Magnolia
The workspace contains the
light-modules folder, which you need to
link up with the Magnolia installation.
Go to the
magnoliafolder, where you installed Magnolia.
Delete the existing
Create a symbolic link to the
/dev/angular-sample/light-modulesfolder. On a Linux machine, the command to do this would be:
ln -s /home/<user-name>/dev/angular-sample/light-modules /home/<user-name>/magnolia/light-modules
Setting server URL for the application environment
dev folder, navigate to
and in the
environments.ts file, check that the
CONTEXT_PATH variables are set to
Granting the anonymous user REST access
In Magnolia, you must allow anonymous access to
Start Magnolia by executing
Login to the Magnolia author instance.
In the App launcher, open the Security app.
Under the Roles tab, highlight the
anonymoususer and click Edit role in the Action bar.
Under Web access, add a new
/.rest/access path and click *Save changes:
Installing and building the project
In this step, you install all of the dependencies that are listed in the
package.json, then build the project and serve it through a
local Angular server.
/dev/angular-sample/folder, enter the following commands:
npm run build
In the same location, start the local Angular server by executing the
Sample page content
To access an example SPA page utilizing the project’s templates:
Open the Pages app.
Use the Import action of the Action bar to import page content from the
website.angular-sample.yamlfile. You can find it in the
sample-contentsubfolder of the
You should now see two new pages in the Pages app:
To view the result SPA page in Magnolia, highlight the
angular-sample page and click the Preview action.
To view the page as served by the
ng server, open a new browser window