M6.4 - Templating 3: Headless and SPA Development

”In this course, you will learn how to build headless solutions with Magnolia and integrate them with Single Page Applications. The focus is on delivering structured content through REST endpoints and consuming it in external frontends.

You will explore headless architecture concepts, content modeling for APIs, delivery endpoint configuration, and typical SPA integration patterns. By the end, you will understand how Magnolia fits into a headless and SPA-based architecture and how to use it as a flexible content backend.”

Headless
6.4

Total time: ~1 day

Start with Chapter 1

Prerequisites

”A Magnolia project created using the Magnolia CLI jumpstart is required, as introduced in M6.4 – Content Types and Content Apps. Familiarity with content types, content apps, and Delivery REST endpoints is strongly recommended, as headless and SPA scenarios typically consume content exposed through these mechanisms.

Additionally, it is strongly recommended to have completed M6.4 – Templating 1: FreeMarker and Templating Fundamentals. While this course does not focus on templating, understanding Magnolia’s page, area, and component concepts provides an important foundation for working effectively with headless delivery and SPA integration.”

Chapters

No need to watch in order — jump straight to what aligns with your goals.

Getting Started with The Headless Development

Setting up the Environment

Magnolia Headless SPA Overview

Magnolia Content Type

Exercise: Define an 'event' content type

Magnolia Content App

Exercise: Create an Events Content App and Create Event Items

Delivery Endpoint API

Delivery Endpoint Configuration

Exercise: Walkthrough the Delivery Endpoint for Pages

Exercise: Create a New Delivery Endpoint for Events

Delivery: Resolving the References

Exercise: Extends Events Endpoint with Images Resolver

Delivery: Localized Content

Exercise: Fetch Localized Content

Delivery: Methods

Exercise: Extends the Events Endpoint and Practice using Different Methods

Headless: GraphQL API

Headless: Security Configuration

Exercise: Allow Anonymous Access to Events Endpoint

Exercise: Check CORS on Your Magnolia Instance

SPA in Light Development

Page Definition

LD: Component Definition

Magnolia Front-end Helpers for SPA

SPA Magnolia Template

Exercise: Initial Setup & Start the SPA App

The Overall Architecture of Magnolia Headless

Exercise: Create a new Listing Page Template

Exercise: Add a Component into the Existing Page

Exercise: Create a new 'eventsListing' Component

SPA Multiple Languages

Exercise: Make the 'eventsList' Internalizable

SPA Magnolia Templates Extra

Exercise: Alter the Editable Area Behaviour

Extra: Webhooks

Extra: Debugging No-Green-Bars Issues

Congratulations!

About the teacher

Tu Bo Xuan

Senior Solution Architect