Magnolia front-end development
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.
A light module is just a directory of files. By relying only on simple files, the Magnolia light development approach mirrors front-end development. Front-end developers can get started right away using the tools and methodologies they already know. While back-end Java developers work on integrations and custom business logic, front-end development teams can work on templates, web resources and javascript frameworks. Front-end developers are not dependent on Java developers to integrate their work and teams can work efficiently in parallel.
-
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.
Get started
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.
| You should also check out the new front-end developer training courses offered by Magnolia! |
Go further
Understand
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.
Learn
How to work with images: Learn how to handle images with Magnolia.
Develop
Magnolia CLI: Magnolia command line interface (CLI) is an npm package providing a CLI tool to setup and facilitate light development with Magnolia.
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.
Bootstrap content: Add XMLs to the JCR.