Hello Magnolia

In this beginner tutorial, you will create a simple web page based on a custom-built light module called hello-magnolia. Your light module will provide a page template and a custom quotation component for a web page. You will learn how to get content from a repository and display it on the page to make it look something like this:

Final page view

You will develop the page using Magnolia CLI, an npm package which facilitates light development with Magnolia.

Each page of the Hello Magnolia tutorial is tagged with the Hello Magnolia label to help you keep on track.

What are we going to do?

Tutorial steps

First, we’ll get Magnolia if we haven’t installed it already.
We’ll create the light module to kick off this tutorial.
Then, we’ll create the page template.
Next, we’ll create a page based on the template we had just worked on in the previous step.
We’ll have a look at how to create an area and the quotation component.
Finally, we’ll add the component to the page and see what our page looks like on the public instance.

Magnolia CLI is available in several release versions. This tutorial has been checked against Magnolia CLI version 3.1.0.

Are you planning a headless project? Start with the My first content app tutorial.

Hello Magnolia

What are we going to do?

Further reading