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. Magnolia CLI is available in several release versions. This tutorial has been checked against Magnolia CLI version 3.1.0.

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

Are you planning a headless project? Start with the Get Started with Magnolia Headless tutorial.

What are we going to do?

Tutorial steps

  1. First, we’ll get Magnolia if we haven’t installed it already.

  2. We’ll create the light module to kick off this tutorial.

  3. Then, we’ll create the page template.

  4. Next, we’ll create a page based on the template we had just worked on in the previous step.

  5. We’ll have a look at how to create an area and the quotation component.

  6. Finally, we’ll add the component to the page and see what our page looks like on the public instance.

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules