Magnolia 5.7 reached extended end of life on May 31, 2022. Support for this branch is limited, see End-of-life policy. Please note that to cover the extra maintenance effort, this EEoL period is a paid extension in the life of the branch. Customers who opt for the extended maintenance will need a new license key to run future versions of Magnolia 5.7. If you have any questions or to subscribe to the extended maintenance, please get in touch with your local contact at Magnolia.
With Magnolia front-end development we are referring to the most common task on most web projects: developing templates to generate the actual HTML, CSS and JS of the projects - and enabling authors to populate them with content.
Many Magnolia projects involve both front-end and back-end developers. To help you all work together in parallel, Magnolia supports both java-based modules and light modules in a single project.
The Get started section below provides a simple introduction to working with Magnolia specifically as a front-end developer, from concepts to a little hands-on learning.
The Go further section provides some links to access in-depth information on the different subjects introduced.
Start here to learn the essentials about working in Magnolia as a front-end developer:
Magnolia basics for front-end developers: Learn the basics about modules, templating and how to handle resource files in Magnolia.
Install Magnolia: Quickly install Magnolia using the CLI to prepare for the tutorial.
Hello Magnolia for front-end developers: Use a simple template in Magnolia and make some changes to it.
Also check out the new front-end developer training courses offered by Magnolia!
Light development in Magnolia: Learn how to work with Magnolia without Java programming skills.
Modules: Magnolia projects are built out of modules, learn about the different kinds of modules and their structure.
YAML: Learn about using YAML to configure Magnolia. Spaces are important.
Templating: Magnolia templating mechanism explained.
How to work with images: Learn how to handle images with Magnolia.
Creating a website with Magnolia: Create a website with Magnolia.
Create light modules: Create and use a fully-functional template module.
Web resources: Access CSS, JS and other web resources.
Themes: Configure your site's visual identity.
Magnolia templating kit: Use these templates as they are or to gain inspiration to create your own.
Define template definitions: Define your blueprints for creating pages, areas and components.
Define dialogs: Define the editable content properties of your templates.
REST: Access Magnolia content using REST.
Bootstrap content: Add XMLs to the JCR.
Cotoolz: IDE add-on which validates input and assists when editing YAML.