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
To check the version of your node installation, run the following command in a shell:
node -v
Install Magnolia CLI
npm install @magnolia/cli -g
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:
sudo npm install @magnolia/cli -g
If the installation is successful, you see the following or a similar output in the shell:
Once you have installed Magnolia CLI, test the installation by running the following command in the shell:
mgnl help
Install Magnolia using the CLI
jumpstart
command to install Magnolia. This command downloads, unpacks and pre-configures a Magnolia bundle of your choice. The 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:
cd /Users/<username>/dev/
Execute the Magnolia CLI
jumpstart
command:mgnl jumpstart
Choose the
magnolia-community-demo-webapp
containing 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:
info Magnolia has been successfully setup for light development! info You can now open a new terminal tab or window and start it up with the CLI command 'mgnl start' info Magnolia will be ready after a few seconds at localhost:8080/magnoliaAuthor. Username and password is superuser
The following files and folders are created:
dev/ ├── apache-tomcat/ │ ├── bin/ │ ├── conf/ │ ├── lib/ │ ├── logs/ │ ├── temp/ │ └── webapps/ ├── light-modules/ └── downloads/
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:
mgnl‑cli‑prototypes/ | A folder which contains the prototypes for template and dialog definitions and the README file. |
mgnl‑cli.json | 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.
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 dev/mgnl-cli-prototypes
folder with the folder in this zip: mgnl-cli-prototypes.zip
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
.
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:
In the mgnl-cli-prototypes/page/my-page-prototype/templates/pages
folder, open __name__.ftl
and replace the script with the following reduced version:
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:
In the mgnl-cli-prototypes/component/my-component-prototype/templates/components
folder, open __name__.ftl
and replace the script with the following reduced version:
Start Magnolia
Now you are ready to start Magnolia and begin developing your light module.
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.
Log in to Magnolia
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.