Part I - Installing and setting up the CLI and Magnolia
In the first part of this tutorial, you install the CLI and use it to set up Magnolia. You also create a prototype variant to later create a light module.
Get node.js
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:
node -v
Unresolved include directive in modules/ROOT/pages/Magnolia-CLI-walkthrough/Part-I---Installing-and-setting-up-the-CLI-and-Magnolia.adoc - include::product-docs:ROOT:partial$i/_Get-Magnolia-CLI.adoc[]
Unresolved include directive in modules/ROOT/pages/Magnolia-CLI-walkthrough/Part-I---Installing-and-setting-up-the-CLI-and-Magnolia.adoc - include::product-docs:ROOT:partial$i/_Installing-Magnolia-with-CLI-only.adoc[]
Create your prototype
When you run create
commands from the CLI, the new files are created
based on prototype files. So for example, if you want to create a new
page template then the basis for the template is specified by the
prototype. Essentially, the prototype is the copy-base for new
templates.
Global vs local
Prototypes can be global or local.
-
Global: The global configuration is created during the installation of the Magnolia CLI package. It will be used if no local configuration is found in the current directory or in its parent folders.
-
Local: The local configuration is created with the
customize-local-config
command. This creates files in the directory where you execute the command. After creation, you can edit the config to suit your needs.
For more information, see Magnolia CLI prototypes. |
Prototype variants
Different prototype variants are available depending on what you are creating.
When executing the create-page
and create-component
commands you can
choose one of the prototype variants provided out-of-the-box.
If you don’t specify a prototype using the -P
option, then the
_default
is used.
Instead of using one of the prototypes provided, we will create our own variants. The easiest way of doing this is to copy and paste one of the existing prototype variants.
Create the local prototype configuration files
Create the local prototype configuration files by running the following CLI command in a shell:
mgnl customize-local-config
This command extracts the following items to your current folder:
|
A folder which contains the prototypes for template and dialog definitions and the README file. |
|
The configuration file defining the folders of the light module skeleton and some other things. |
The prototype files are located in the mgnl-cli-prototypes
folder you
just extracted to your dev
directory.
dev/mgnl-cli-prototypes/ ├── README.md.tpl ├── block │ ├── _default │ │ ├── blocks │ │ │ └── __name__.yaml │ │ └── templates │ │ └── blocks │ │ ├── __name__.ftl │ │ └── __name__.yaml │ └── empty │ ├── blocks │ │ └── __name__.yaml │ └── templates │ └── blocks │ ├── __name__.ftl │ └── __name__.yaml ├── component │ ├── _default │ │ ├── dialogs │ │ │ └── components │ │ │ └── __name__.yaml │ │ └── templates │ │ └── components │ │ ├── __name__.ftl │ │ └── __name__.yaml │ ├── empty │ │ └── templates │ │ └── components │ │ ├── __name__.ftl │ │ └── __name__.yaml │ └── with-js-model │ ├── dialogs │ │ └── components │ │ └── __name__.yaml │ └── templates │ └── components │ ├── __name__.ftl │ ├── __name__.js │ └── __name__.yaml ├── light-module │ ├── _default │ │ ├── README.md │ │ ├── decorations │ │ ├── dialogs │ │ │ ├── components │ │ │ └── pages │ │ ├── i18n │ │ │ └── __name__-messages_en.properties │ │ ├── includes │ │ │ └── README.txt │ │ ├── templates │ │ │ ├── components │ │ │ └── pages │ │ └── webresources │ └── comprehensive │ ├── README.md │ ├── apps │ ├── blocks │ ├── decorations │ ├── dialogs │ │ ├── components │ │ └── pages │ ├── i18n │ │ └── __name__-messages_en.properties │ ├── includes │ │ └── README.txt │ ├── messageViews │ ├── restEndpoints │ ├── templates │ │ ├── components │ │ └── pages │ ├── themes │ ├── virtualUriMappings │ └── webresources ├── page │ ├── _default │ │ ├── dialogs │ │ │ └── pages │ │ │ └── __name__.yaml │ │ └── templates │ │ └── pages │ │ ├── __name__.ftl │ │ └── __name__.yaml │ ├── empty │ │ └── templates │ │ └── pages │ │ ├── __name__.ftl │ │ └── __name__.yaml │ └── with-js-model │ ├── dialogs │ │ └── pages │ │ └── __name__.yaml │ └── templates │ └── pages │ ├── __name__.ftl │ ├── __name__.js │ └── __name__.yaml └── virtual-uri ├── _default │ └── virtualUriMappings │ └── __name__.yaml ├── empty │ └── virtualUriMappings │ └── __name__.yaml └── regexp └── virtualUriMappings └── __name__.yaml
Create your prototype variants
Now you create prototype variants for the create-page
and
create-component
commands based on the _default
prototype you just
extracted.
If you don’t want to create your prototype variant and edit the files,
replace your |
To create a variant, copy and paste the existing default prototype:
-
For pages, in
dev/mgnl-cli-prototypes/page
, copy the_default
folder and paste it at the same level. Rename your copy tomy-
page
-prototype
. -
For components, in
dev/mgnl-cli-prototypes/component
, copy the_default
folder and paste it at the same level. Rename your copy tomy-
component
-prototype
.
dev/mgnl-cli-prototypes/ ├── README.md.tpl ├── block ├── component │ ├── _default │ ├── empty │ ├── my-component-prototype │ ├── dialogs │ ├── components │ └── _name_.yaml │ ├── templates │ ├── components │ ├── _name_.ftl │ └── _name_.yaml │ └── with-js-model ├── light-module ├── page │ ├── _default │ ├── empty │ ├── my-page-prototype │ ├── dialogs │ ├── pages │ └── _name_.yaml │ ├── templates │ ├── pages │ ├── _name_.ftl │ └── with-js-model └── virtual-uri
Edit your variant files
Now you will edit your prototype files in your variant so that:
-
You add a CSS file to your page variant to generate a CSS and link it to pages you create later.
-
The
create-page
command creates a page template with just a title. -
The
create-component
command creates a component with just a title and a description.
Add a CSS file
In the mgnl-cli-prototypes/
page
/my-page-prototype/
folder,
create the following folders and file /webresources/css/name.css
mkdir -p webresources/css; touch $_/__name__.css
Open name.css
file and add the following content:
h1 {
font-family: Helvetica; color: #2A3D00;
}
body {
background-color: #F5F8EA;
}
Edit the my-page-prototype variant
In the
mgnl-cli-prototypes/
page
/my-page-prototype/
dialogs
/pages
folder, open name.yaml
and replace the definition with the
following reduced version that corresponds to a simple title field being
required when creating a page:
dev/mgnl-cli-prototypes/page/my-page-prototype/dialogs/pages/name.yaml
form:
label: Page properties
tabs:
- name: tabMain
label: __name__
fields:
- name: title
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
i18n: true
label: title
actions:
commit:
class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
cancel:
class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition
In the
mgnl-cli-prototypes/
page
/my-page-prototype/
templates
/pages
folder, open name.ftl
and replace the script with the following
reduced version:
dev/mgnl-cli-prototypes/page/my-page-prototype/templates/pages/name.ftl
<!DOCTYPE html>
<html xml:lang="${cmsfn.language()}" lang="${cmsfn.language()}">
<head>
<link rel="stylesheet" type="text/css" href="${ctx.contextPath}/.resources/__lightDevModuleFolder__/webresources/css/__name__.css" media="all" />
[@cms.page /]
<title>${content.windowTitle!content.title!}</title>
</head>
<body>
<div class="container ">
<h1>${content.windowTitle!content.title!}</h1>
</div>
</body>
</html>
Note that in line 4 you add a link to the CSS that uses variables
(lightDevModuleFolder
and name.css
) to generate part of the
path to the light module folder and the name of the CSS file.
Edit the my-component-prototype variant
Next, in the
mgnl-cli-prototypes/
component
/my-component-prototype/
dialogs
/components
folder, open name.yaml
and replace the definition with the
following reduced version that corresponds to a component with a title
field and a description:
dev/mgnl-cli-prototypes/component/component/my-component-prototype/dialogs/component/name.yaml
form:
label: __name__
tabs:
- name: tabMain
label: Main
fields:
- name: title
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
label: Title
- name: desc
class: info.magnolia.ui.form.field.definition.RichTextFieldDefinition
label: Description
actions:
commit:
class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
cancel:
class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition
In the
mgnl-cli-prototypes/
component
/my-component-prototype/
templates
/components
folder, open name.ftl
and replace the script with the following
reduced version:
dev/mgnl-cli-prototypes/component/component/my-component-prototype/templates/component/name.ftl
<div class="__name__">
[#if content.title?has_content]
<h2>${content.title!}</h2>
[/#if]
[#if content.desc?has_content]
${cmsfn.decode(content).desc!}
[/#if]
</div>
Start Magnolia with CLI
Go to the parent directory of the apache-tomcat
directory and execute
the Magnolia CLI start
command:
mgnl start
When starting for the first time, Magnolia runs a web update and automatically installs all its modules.
Login
Go to http://localhost:8080/magnoliaAuthor
and sign in as:
-
Username:
superuser
-
Password:
superuser
Magnolia is ready to use and gives you a list of suggestions to get started.
Logging into the Author instance
Go to
http://localhost:8080/magnoliaAuthor
and log in to the Author instance with:
-
Username:
superuser
-
Password:
superuser
When you log in, the first page you see is a list of suggestions generated by the Find Bar.
To see the list of the app tiles, click the App Launcher icon
to the right of
the Find Bar at the top.
The App Launcher is a key navigation page in Magnolia.
When you log in, the first page you see is the App Launcher
, in which you can see groups of apps:
Congratulations. Magnolia is now installed and running.
- Next
- Related topics