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. 

Install Node.js

node -v

Install Magnolia CLI

npm install @magnolia/cli -g

sudo npm install @magnolia/cli -g

/usr/bin/mgnl -> /usr/lib/node_modules/@magnolia/cli/bin/mgnl.js

> spawn-sync@1.0.15 postinstall /usr/lib/node_modules/@magnolia/cli/node_modules/spawn-sync
> node postinstall

+ @magnolia/cli@2.2.0
added 209 packages in 11.40

mgnl help 

Usage: mgnl <command> [options]

A tool to setup and facilitate light development with Magnolia CMS

Options:
  -v, --version           output the version number
  -h, --help              output usage information

Commands:
  jumpstart               download and setup a Magnolia CMS instance for development.
  start                   start up a Magnolia CMS instance. To stop it, enter CTRL+C
  add-availability        add component availability.
  build                   scan a node_modules folder for npm packages with the keyword "magnolia-light-module" (in package.json) and extract them to a directory of choice.
  create-app              create an app.
  create-block            create a block.
  create-component        create a component and optionally add availability for it.
  create-content-type     create a content type.
  create-light-module     create a light module.
  create-page             create a page template.
  create-virtual-uri      create a virtual uri mapping.
  customize-local-config  extract "mgnl-cli-prototypes" folder and "mgnl-cli.json" file to customize CLI configuration.
  install                 install a light module from npm to the local Magnolia instance.
  search                  search for a light module on npm.
  tab-completion          install tab autocomplete feature for Bash, zsh or PowerShell
  version                 display mgnl and node.js versions
  help [cmd]              display help for [cmd]
  mgnl: 3.1.0 node: v8.10.0 os: linux

Install Magnolia using the CLI

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. 

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:

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. 

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 to my-page-prototype.
• For components, in dev/mgnl-cli-prototypes/component, copy the _default folder and paste it at the same level. Rename your copy to my-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:

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:

<!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:

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:

<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

Now you are ready to start Magnolia and begin developing your light module.

mgnl start

Log in to Magnolia

Next: Part II - Creating a light module