M6.3 Magnolia Headless and SPA Development

Total time: ~1 day

Learn how to build a simple React site as a Magnolia template, and create multiple REST endpoints to serve content from Magnolia. Create tools that your authoring team will love, allowing them to have full WYSIWYG authoring experience with SPAs.

Chapters

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