This documentation is still in progress. We are working hard to update all our screenshots to the new Magnolia 6 style. Please bear with us.
This page is the second part of the My first content app tutorial and describes how to configure and create a basic Bookshelf, a Magnolia content app. The configuration is done using Magnolia content types – formal definitions for types of content in Magnolia including the properties the type may contain and its relationships to other types of content.
The Bookshelf app is meant to be run as an app in Magnolia, so first you must install Magnolia, but before installing Magnolia itself, check that the following are already installed on your system.
Magnolia needs a Java Runtime Environment (JRE) version 8 or higher. Type
java -version in a terminal or command prompt. If the system reports a version number, Java is installed on your computer.
If you don't have Java, install it:
Java is not pre-installed on Mac OS X 10.7 and later. Download the latest Java from Oracle.
On Windows you need a Java SE Development Kit (JDK). The Java Runtime Environment (JRE) is not enough because the Tomcat application server does not recognize it.
What is the difference?
- JRE is for users who run Java programs on their computer.
- JDK is for developers who write Java-based applications.
Download and install JDK. By default JDK is installed in
C:\Program Files\Java\jdk-10.0.xx\. You can choose another location.
Check JAVA_HOME environment variable
- Open the command prompt.
setand press ENTER.
JAVA_HOMEin the command output and verify that the path points to your JDK installation directory, for example
JAVA_HOMEis missing or it points to the wrong directory, see Set JAVA_HOME environment variable below.
Set JAVA_HOME environment variable
- Right-click My Computer and select Properties.
- Go to the Advanced tab.
(In Windows 7+, right-click Computer and select Advanced System Settings, then Environment variables.)
- If the
JAVA_HOMEenvironment variable does not exist in User variables or System variables, create it:
- User variables apply to the currently signed-in user only. Create
JAVA_HOMEhere if you want it to apply only to the currently logged in user. These variables take precedence over system variables.
- System variables apply to all users. Create
JAVA_HOMEhere if you want it to apply to all users. You must be an administrator to modify a system environment variable.
- User variables apply to the currently signed-in user only. Create
- Set the value of
JAVA_HOMEto the path of your JDK installation directory, for example
- Optional step: Add the Magnolia
bindirectory to the
PATHvariable, for example
C:\Program Files\magnolia\apache-tomcat-x.y\bin. Setting the
PATHallows you to issue the Magnolia
stopcommands from anywhere without navigating to the installation directory first. Separate the path from existing paths with a semicolon ( ; ). If you do this, you also need to add
CATALINA_HOMEto environment variables. Set the value of
CATALINA_HOMEto the Tomcat installation directory, for example
- Click OK.
- Go back to Check JAVA_HOME environment variable above and test that the variable is found and has the correct value. You need to open a new command prompt since environment variables are session specific.
Alternatively you can set JAVA_HOME with a batch file. Add this line to
set command creates the
JAVA_HOME environment variable and sets its value to the JDK directory. The command is executed when Magnolia starts.
Download the latest Java from Oracle. The installation directory varies from one Linux system to another. For example, on Ubuntu Linux 10 the OpenJDK Runtime Environment is installed in
/usr/lib/jvm/java-10-openjdk/jre by default.
Download the latest Java from Oracle. You can install it in any directory such as
Magnolia CLI is an npm package providing a command line interface (CLI) tool to set up and facilitate light development with Magnolia. The Magnolia CLI tool runs on Node.js. If you do not have Node.js installed, go to Node.js and download and install the latest LTS version.
To check the version of your node installation run the following command in a shell:
Run the following command in a shell to install Magnolia CLI:
Depending on your permissions and the location where you have installed Node.js, you may have to execute the command above with root permissions. Without installation permissions you will notice messages such as
npm ERR! in the shell.
On Linux or Mac OS X to run this command as root use:
If the installation is successful, you see the following or a similar output in the shell:
If you already installed Magnolia CLI, update to the latest version:
npm update @magnolia/cli -g
Once you have installed Magnolia CLI, test the installation by running the following command in the shell:
Installing and starting Magnolia
Now install Magnolia.
jumpstart command to install Magnolia. This command downloads, unpacks and pre-configures a Magnolia bundle of your choice.
jumpstart command automatically creates a light modules directory for you in the current folder. If you already have a different directory that you want to use for light modules, use the
-p option with the jumpstart command to specify the path to your existing light modules folder. For example:
mgnl jumpstart -p /Users/<username>/<shared-projects>/light-modules/
To install Magnolia:
Change to the directory to where you want to install the Magnolia bundle. For example:
Execute the Magnolia CLI
magnolia-community-demo-webappcontaining Magnolia Community Edition bundled with the Travel Demo and a Tomcat server. It creates folders for the Tomcat server and for the light modules according to the CLI configuration.
Once the setup operation is complete, you should see a message similar to this one:
The following files and folders are created:
mgnl start command to start Magnoolia. In the parent directory of
The command installs and starts Magnolia. This is complete when you see a message like
Server startup in 112737 ms. You can then access the UI of the Author instance.
Log into the Author instance
and log in to the Author instance with:
bookshelf light module
Magnolia light modules usually define page, area and component templates and many more things. In this tutorial we use a light module called
bookshelf to create a content app. The module contains both a definition of content types and the app descriptor.
Module folder structure
For your light module you need the following folder structure:
i18n folder is used for i18n message bundles and you will add content to it in the final step of the tutorial.
Create the folder structure in the
Defining content types
Now you define content types for the Bookshelf app.
contentTypes folder, create a new file called
bookshelf-ct.yaml with the following content:
- In the
datasourcesection (lines 1-6), you define how content type items are persisted. For more details see the Content type Data source definition page.
- In the
modelsection (lines 8-17), you define the node type and the properties of the new content item for the Bookshelf app. For more details, see the Content type Model definition page.
Creating the app descriptor
Now create the app descriptor which generates the Bookshelf app. In the
apps folder of the
bookshelf light module, create a new file called
bookshelf-app.yaml with the following content:
- Line 1: The app descriptor instructs the app generator to construct the app from the
bookshelf-ctcontent type definition.
- Line 2: You give the app the name
bookshelf-app, under which the app is known to other resources and systems in Magnolia.
Making the app available in the app launcher
To make the app accessible in AdminCentral, open the Configuration app and add the app name (
bookshelf-app) as a new node under
Log out and in again; the new app tile appears in the Edit group:
i18n message keys and the Name, Title and Description labels
magnolia-ui-framework module already contains several generic i18n message keys whose values are applied as labels in the UI of the Bookshelf app. You will create new label values in Adding an i18n message bundle on the third page of the tutorial.
Continue to the last page of this tutorial, where you fine-tune this basic app to its final form.