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 called angular-minimal and is assembled from two page templates provided by a light module angular-magnolia-int, which is part of the project.

We only showcase a project built in the Angular framework. However, a similar result could also be achieved with the ReactJS framework, a second front-end framework currently supported by Magnolia SPA front-end helper libraries.

Prerequisites

Node.js, npm and Magnolia

For development and testing, you need to install:

  • Node.js

  • npm

  • Java (JRE or JDK)

  • Magnolia

If you haven’t installed them yet, go to the page Installing Magnolia through npm CLI and complete the steps described there. WARNING: For now, skip the step asking you to start Magnolia by entering the mgnl start command.

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 spa-angular-minimal workspace in it by cloning it from our repository:

git clone https://git.magnolia-cms.com/scm/~rsiska/spa-angular-minimal.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.

  1. Go to the magnolia folder, where you installed Magnolia.

  2. Delete the existing light-modules folder.

  3. Create a symbolic link to the /dev/spa-angular-minimal/light-modules folder. On a Linux machine, the command to do this would be:

    ln -s /home/<user-name>/dev/spa-angular-minimal/light-modules /home/<user-name>/magnolia/light-modules

Configuration

Setting server URL for the application environment

In the dev folder, navigate to spa-angular-minimal/src/environments and in the environments.ts file, check that the first line contains the following:

const SERVER = 'http://localhost:8080/magnoliaAuthor';

Granting the anonymous user REST access

In Magnolia, you must allow anonymous access to /.rest/*.

  1. Start Magnolia by executing mgnl start.

  2. Login to the Magnolia author instance.

  3. In the App launcher, open the Security app.

  4. Under the Roles tab, highlight the anonymous user and click Edit role in the Action bar.

  5. Under Web access, add a new /.rest/ access path and click *Save changes:
    ACl/web access dialog for anonymous role

Installing and building the project

In this step, you install all of the dependencies that are listed in the project’s package.json, then build the project and serve it through a local Angular server.

  1. In the /dev/spa-angular-minimal/ folder, enter the following commands:

    npm install
    npm run build

  2. In the same location, start the local Angular server by executing the ng serve command.

Sample page content

To access an example SPA page utilizing the project’s templates:

  1. Open the Pages app.

  2. Use the Import action of the Action bar to import page content from the website.angular-minimal.yaml file. You can find it in the content-importer subfolder of the spa-angular-minimal workspace.

  3. You should now see two new pages in the Pages app, angular-minimal and about:

angular-minimal and about pages in Pages app browser view

To view the result SPA page in Magnolia, highlight the angular-minimal page and click the Preview action:

angular-minimal page in page edit view

To view the page as served by the ng server, open a new browser window and enter localhost:4200:

angular-minimal page previewed in a new browser window

Feedback