Magnolia Academy / Courses / M6.3 Magnolia Headless and SPA Development / Exercise: Add a Component into the Existing Page

Exercise: Add a Component into the Existing Page

All lessons

1 Getting Started with The Headless Development
2 Setting up the Environment
3 Magnolia Headless SPA Overview
4 Magnolia Content Type
5 Exercise: Define an 'event' content type
6 Magnolia Content App
7 Exercise: Create an Events Content App and Create Event Items
8 Delivery Endpoint API
9 Delivery Endpoint Configuration
10 Exercise: Walkthrough the Delivery Endpoint for Pages
11 Exercise: Create a New Delivery Endpoint for Events
12 Delivery: Resolving the References
13 Exercise: Extends Events Endpoint with Images Resolver
14 Delivery: Localized Content
15 Exercise: Fetch Localized Content
16 Delivery: Methods
17 Exercise: Extends the Events Endpoint and Practice using Different Methods
18 Headless: GraphQL API
19 Headless: Security Configuration
20 Exercise: Allow Anonymous Access to Events Endpoint
21 Headless: CORS
22 Exercise: Check CORS on Your Magnolia Instance
23 SPA in Light Development
24 Page Definition
25 LD: Component Definition
26 LD: Dialog
27 Magnolia Front-end Helpers for SPA
28 SPA Magnolia Template
29 Exercise: Initial Setup & Start the SPA App
30 The Overall Architecture of Magnolia Headless
31 SPA Page
32 Exercise: Create a new Listing Page Template
33 SPA Component
34 Exercise: Add a Component into the Existing Page
35 Exercise: Create a new 'eventsListing' Component
36 SPA Multiple Languages
37 Exercise: Make the 'eventsList' Internalizable
38 SPA Magnolia Templates Extra
39 Exercise: Alter the Editable Area Behaviour
40 Extra: Webhooks
41 Extra: Debugging No-Green-Bars Issues
42 Congratulations!

Exercise: Add a Component into the Existing Page