The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). With Adobe Experience Manager (AEM) as a Cloud Service, Content Fragments lets you design, create, curate, and publish page-independent content. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. So here is the more detailed explanation. js) Remote SPAs with editable AEM content using AEM SPA Editor. Open a new command line and check if the installation was performed properly by running this command: java -version. 8+. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Experience Fragments are not yet supported(6. Learn to use Angular routing to navigate between. Request access to the Universal Editor. So, this includes such features like. Deploy SPA updates to AEM. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. See the SPA Blueprint document for the requirements that a framework must fulfill to create a framework-specific layer composed of modules, components, and services to work with the AEM SPA Editor. Tutorials. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Know the requirements for building a fully editable SPA for AEM. A simple weather component is built. The SPA Editor(Integrated SPA) is the recommended solution for projects that use a SPA framework (React or Angular) with AEM. zip or greater aem-guides-wknd-graphql source code This tutorial. [AEM GEMs free Webinar | 20th September] Ready to supercharge your AEM as a Cloud Service projects? We'll guide you through optimizing your AEM projects, measure external service impact, Create customized views and Gain insights, boost performance, and enhance issue resolution. This component is able to be added to the SPA by content authors. SPA Editor — AEM’s SPA Editor provides support for in. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Configure AEM for SPA Editor. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. js + React Server Components + Headless GraphQL API + Universal Editor; Related references (other. Solved: Hi all, I want to build a sample AEM SPA Editor application. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. I need to add Prog. As part of the AEM 6. Start by creating the components that will make up the composite component, that is, components for the image and its text. The following AEM features are not yet supported by the SPA Editor: Target mode; ContextHub; Inline image editing; Edit configs (eg. AEM 6550 - Create a sample SPA React App using AEM SPA Editor by Sreekanth Choudry Nalabotu Abstract This tutorial on official adobe docs is an excellent guide for creating your first AEM SPA React App, however if you are looking for some quick steps, go through the following. 4, but got the following error:Hello, we understand that AEM came out with the AEM SPA editor around 2 years ago. Using Multiple SelectorsLearn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. Level 3: Embed and fully enable SPA in AEM. The project used in this chapter will serve as the basis for an implementation of the WKND SPA and is built upon in future chapters. SPA Editor - AEM native editor for SPA’s Headless - a pattern where you leverage API or GrapgQL to get data from server Widget - a component of a web page with clientside experience, it has basic HTML, and javascript turns into the interactive experience when. In the IDE, open the ui. The AEM SPA Editor allows front-end developers to create SPAs that can be integrated into an AEM site, allowing the content authors to edit the SPA content as easily as any other AEM content. Book a Treatment. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. SPA Editor detects rendered components and generates overlays. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . . AEM Sites as a Cloud Service, AEM Sites 6. The importance of this configuration is explored later. This content will be added to the AEM Weekend tutorial. Topics: Created for: Deep dive with us into the development of Single-Page-Applications that can be authored using the AEM Page Editor. Contributions are welcome! Read the Contributing Guide for more information. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. These are sample apps and templates based on various frontend frameworks (e. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. Populates the React Edible components with AEM’s content. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. Users can complete the tutorial using React or Angular frameworks. It allows front-end developers to develop such SPA like they are used to, while having non-technical authors to edit the content in-place. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Slimmest example. The project used in this chapter will serve as the basis for an implementation of the WKND SPA and is built upon in future chapters. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. Experience League. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor framework. Include the Universal Editor core library. Instead of continually planning for upgrades and monitoring site traffic. This component is able to be added to the SPA by content authors. See LICENSE for more information. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. The block itself is visible as a regular AEM component to be inserted and configured on content pages. xml line that I have changed now: <aem. Requirements. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . content subprojectLearn how to extend an existing Core Component to be used with the AEM SPA Editor. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Less overlap. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. For those reading this thread - this content is coming. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. Wrap the React app with an initialized ModelManager, and render the React app. Web page information is retrieved and passed as parameters using the Adobe Client Data Layer that lets you collect and store data about visitors’ experience on a webpage. Experience Fragments are not yet supported(6. Wrap the React app with an initialized ModelManager, and render the React app. With a traditional AEM component, an HTL script is typically required. AEM lets you have a responsive layout for your pages by using the Layout Container component. By implementing specific interfaces, Sling Models provide the information necessary to the SPA. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). Why a SPA? By being faster, fluid, and more like a native application, a SPA becomes an attractive experience not only for the visitor of the. Minimize the number of style options. Add the necessary OSGi configuration. Since the SPA renders the component, no HTL script is needed. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. 4 and below) in the SPA Editor. js with a fixed, but editable Title component. Configure AEM for SPA Editor. Understand the SPA model routing options available when using the SPA Editor. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . 3 +) Overlap between SPA JavaScript and AEM code. Using an AEM dialog, authors can set the location for the weather to be displayed. A simple weather component is built. This Next. Join us to learn more about the SPA Editor in this introduction. In the previous two chapters, we mapped editable component content from the SPA’s Home view to corresponding Remote SPA root page in AEM at /content/wknd. User. Next. Licensing. JSON Delivery in Experience Manager. js v14+ npm v7+ Java™ 11 Maven 3. The TagID is added to the content node’s cq:tags property and resolves to a node of type cq:Tag. Courses. Hi marcog1899 sorry for the delay, we pulled it because it was a little out of date. For publishing from AEM Sites using Edge Delivery Services, click here. Enabling dynamic page creation, layouts and components in a SPA with a visual content editor shows how valuable AEM’s Hybrid CMS approach is. Deploy the updated SPA to AEM to see the changes. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. A full. Limited content can be edited within AEM. 8+ here and install it. Now we can extrapolate these in relation to AEM. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. SPA Editor loads. Option 2: Share component states by using a state library such as NgRx. The mapping can be done with Sling Mapping defined in /etc/map. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . Dynamic navigation is implemented using React Router and React Core Components. AEM provides AEM React Editable Components v2, an Node. The Single Page Application (SPA) Editor of Adobe Experience Manager (AEM) Sites allows in-context authoring (wysiwyg editing) of content that is delivered headless as JSON and rendered in the browser with JavaScript frameworks like React or Angular. The translation rules editor that will update the translation xml file. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. . The tutorial covers. Adobe Experience Manager, the leading solution for content management, features a decoupled, modular architecture and provides extensible capabilities that empower marketers to build fantastic experiences for any channel. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. I can see bannerText prop in CRXD, but it is missing from the JSON model and never arrives to. Dynamic navigation is implemented using React Router and React Core Components. Introduction Adobe Experience Manager (AEM) is a comprehensive content management solution for building websites, mobile apps, and forms. . SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. A simple weather component is built. Option 3: Leverage the object hierarchy by customizing and extending the container component. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Deploy the starter project to a local instance of AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. These are a set of re-usable UI. Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for an Angular application integrated with the AEM SPA Editor. . Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. js with a fixed, but editable Title component. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Configure AEM for SPA Editor. Book online below or contact us directly via. Next Steps. This project was generated with Angular CLI version 6. It allows front-end developers to develop such SPA like they are used to, while having non-technical authors to edit the content in-place. This document describes the recommended steps to upload a standalone SPA to an AEM instance, add editable sections of content, and enable authoring. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. All it requires is a rendered HTML. Introduced in AEM 6. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. 0. Last update: 2023-11-17. The React app should contain one. Create your first React SPA in AEM by Adobe Docs Abstract Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). AEM provides AEM React Editable Components v2, an Node. Adobe Experience Manager (AEM) 6. This section describes how to embed an interactive single page application using REACT (or Angular) using the AEM SPA editor that can be configured by business professionals in AEM and also how to. What you will build. With a traditional AEM component, an HTL script is typically required. 5. To enable the author to use the AEM SPA Editor to edit the content of an SPA, there are requirements that the SPA must fulfill, which are described in this document. Since the cloud service auto-scales within seconds, and new features are added continuously, this frees up significant IT resources. The use of Redux alongside the JavaScript SPA. Objective. react. This article presents an example of how to adapt a simple, existing React component to work with the AEM SPA Editor. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, etc. ) to render content from AEM Headless. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. This tutorial explains. Avai. Manager Sites SPA Editor 19 Summary: HTML Delivery vs. Q. Single page applications (SPAs) can offer compelling experiences for website users. Full service nail studio and beauty spa located in the heart of Oak Bay village. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Here, you can skip the itemPath property. 4 and below) in the SPA Editor. Getting Started with AEM SPA Editor and React; Getting Started with AEM and Adobe Target; AEM 6. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. For AEM to load the Remote SPA in the SPA Editor, mappings between the SPA’s routes and the AEM Pages used to open and author content must be established. The following diagram illustrates the overall architecture for AEM Content Fragments. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. Of course you could also re-implement the web shop SPA as a fully-functioning AEM SPA using the AEM SPA Editor framework. The library code is the one. It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. Experience Fragments enables content authors to reuse content across channels including Sites pages and third-party systems. As part of the AEM 6. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. With a traditional AEM component, an HTL script is typically required. The authoring environment of AEM provides various mechanisms for organizing and editing your content. Congratulations, you have just created your first AEM SPA Editor Project! The SPA is quite simple. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. This is the pom. For publishing from AEM Sites using Edge Delivery Services, click here. SPA Editor persists edits with a POST request to the server. 8. Last update: 2023-10-02. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . See the article Editing an External SPA within AEM for more details on editable, external SPAs in AEM. Access the Translation Configuration UI: AEM Start Menu > Tools > General > Translation Configuration. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. The SPA retrieves this content via AEM’s GraphQL API. For AEM to load the Remote SPA in the SPA Editor, mappings between the SPA’s routes and the AEM Pages used to open and author content must be established. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. Learn to use the delegation patter for extending Sling Models and features of Sling Resource Merger. SPA. The SPA Editor brings the easy-to-use capabilities of the AEM Page Editor back to SPA built with JavaScript frameworks like React or Angular. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . Content Fragments (CF) Experience Fragments (XF) Definition. . In the IDE, open the ui. The SPA is implemented using: Maven AEM Project Archetype; Mavice Maven AEM Project. SPA requests JSON content and renders components client-side. Understand the structure of a new AEM SPA Editor project built from a Maven archetype. The Style System, when used in conjunction with AEM's Core Components, template editor, and responsive layout, offers powerful. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Add a new Text component to the main Layout Container. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. Initially, it will be in React but Angular is also planned (although it might be a good month later). If you have an existing SPA, AEM supports embedding it into AEM so it is visible to your content authors in the AEM Editor. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. Integrate AEM Author service with Adobe Target. As Single-Page Application (SPA) make the overall visitor experience more interactive, they are gaining popularity, even for content-centric experiences. Hybrid and SPA AEM Development. On the Adobe Experience Manager product page, it is described as: “Edit and manage single-page applications. AEM SPA Model Manager is installed and initialized. The referenced KB was created to enable Adobe Experience Platform Launch integration with SPAs that do not use the AEM SPA Editor. AEM SPA editor - FAQ by Niek Raaijmakers Abstract Answering the most commonly asked questions about the SPA editor Today I am going to answer some FAQ that I get a lot from customers, that are not addressed in the latest post / archetype updates. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Wrap the React app with an initialized ModelManager, and render the React app. Deploy the updated SPA to AEM to see the changes. Add Adobe Target to your AEM web site. pagemodel. js application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Option 2: Share component states by using a state library such as NgRx. messaging must be added to provide a communication channel between the SPA and the page editor. Adobe Experience Manager (AEM) 6. This document describes the general contract that any SPA framework should fulfill (that is, the kind of AEM support layer) so you can implement editable SPA components within AEM. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. The importance of this configuration is explored later. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. To activate the Adobe Stock cloud configuration: Log in to Experience Manager. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. content subprojectPrerequisites. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Hybrid and SPA with AEM; SPA Introduction and Walkthrough; SPA WKND Tutorial; Getting Started using React; Implementing a React Component for SPA; Getting Started using Angular; SPA Deep Dives; Developing SPAs for AEM; SPA Editor Overview; SPA Blueprint; SPA Page. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. For authoring AEM content for Edge Delivery Services, click here. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. This project is licensed under the Apache V2 License. The PageModelManager is accessible by SPA project as a npm package. Recommended courses. resourceType: 'wknd-spa/components/text'. We are new to AEM and I'm trying to understand the pros and cons of using AEM v/s AEM SPA. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. The importance of this configuration is explored later. For you devs we've created a minimal demo project and a tutorial. Understand the structure of a new AEM SPA Editor project built from a Maven archetype. Learn how to add editable fixed components to a remote SPA. Create the Sling Model. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. By using AEM SPA (Single Page Application) Editor, developers can easily build web sites using SPA Framework and authors can seamlessly edit content within AEM. Using an AEM dialog, authors can set the location for the weather to be displayed. AEM WCM Components - Spa editor - React Core implementation. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 2. 8. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. This user guide contains videos and tutorials helping you maximize your value from AEM. We were able to achieve this by developing an ' aem-vue-editable-components ' library, similar to the 'aem-react-editable-components'. 5 Learn how to load, pass parameters to page request, and fire a Target call from your site page using a Launch Rule. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. 4. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. The central idea of SPAs in AEM is the idea of mapping SPA components to AEM components and updating the component when the content is modified (and conversely). Objective. This document helps you understand how Single Page Applications are developed using the AEM SPA Editor framework. Install Java 1. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. In the IDE, open the ui. js with a fixed, but editable Title component. The SPA Editor brings the easy-to-use capabilities of the AEM Page Editor back to SPA built with JavaScript frameworks like React or Angular. They said -- Yes, we are working on a WKND style tutorial for the SPA editor [0]. You will also learn how to use out of the box AEM React Core Components. The. If left relative, when the SPA is loaded in SPA Editor for authoring, these URLs default to use AEM’s host rather than the SPA, resulting in 404 requests as illustrated in the image below. Why a SPA? By being faster, fluid, and more like a native application, a SPA becomes an attractive experience not only for the visitor of the webpage, but. The importance of this configuration is explored later. Instrument the page. There are several steps to onboarding your AEM app and instrumenting it to use the Universal Editor. Adobe Experience Manager----1. Dynamic navigation is implemented using Angular routes and added to an existing Header component. What is single page application. Use the withMappable. Stop the webpack dev server and from the root of the project, deploy the changes to AEM using your Maven skills: $ cd aem-guides-wknd-spa $ mvn clean install -PautoInstallSinglePackageCongratulations, you have just created your first AEM SPA Editor Project! The SPA is quite simple. Objective. @adobe/aem-react-editable-components; @adobe/aem-spa-component-mapping; @adobe/aem-spa-page-model-manager You can understand the flow of the interaction between the SPA and AEM by thinking of the SPA Editor as a mediator between the two. A simple weather component is built. The mapping can be done with Sling Mapping defined in /etc/map. Also, as mentioned in this article Integrate a SPA | Getting Started with the AEM SPA Editor and Angular | Adobe Experience Manager I was able. Last update: 2023-10-03. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. Issue 2: I am facing the problem with Banner component from the tutorial: Extend a Core Component | Getting Started with the AEM SPA Editor and React | Adobe Experience Manag. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor framework. Developers using the React framework create a SPA and then. In the IDE, open the ui. The component is used in conjunction with the Layout mode, which lets. The. Retail Journal app by adding a custom Hello World component. The changes made to the Header are currently only visible through the webpack dev server. Keeping in mind the key elements of the SPA Editor, the high-level workflow of editing a SPA within AEM appears to the author as follows. Provides hybrid support out-of-the-box. Written by Suren Konathala. The authoring environment of AEM provides various mechanisms for organizing and editing your content. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless.