Learn to use the delegation patter for extending Sling Models and features of Sling Resource. This guide uses the AEM as a Cloud Service SDK. Prerequisites The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. View example. 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. If it is possible that I can render my app dynamic content in AEM using WebAPI. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. This server-side Node. It also provides an optional challenge to apply your AEM Headless learnings, coding expertise to enhance the WKND client application. Content Fragments are editorial content, with definition and structure, but without additional visual design and/or layout. The AEM Project contains configuration and content that must be deployed to AEM. Persisted queries. With this complete extensibility framework, built on Adobe’s infrastructure, developers can build custom microservices, extend, and integrate Adobe Experience Manager across. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Now even AEM as a cloud service has react as inbuilt program into its archetype as part of Adobe’s best practices known to its Headless CMS architecture. Persisted queries. The full code can be found on GitHub. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Typical AEM as a Cloud Service headless deployment architecture_. 5 also includes several digital experience platform features such as GraphQL support, built-in Adobe Target integration, and a new user interface for the AEM Screens device. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Below is a summary of how the React application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Click De-Hibernate to confirm the step. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. AEM Headless as a Cloud Service. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the. Since the SPA renders the component, no HTL script is needed. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . This component is able to be added to the SPA by content authors. Multiple requests can be made to collect as many results as required. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Learn. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. ’. After reading you should: Understand the basics of AEM’s headless features. Integration approach. SPA components could be rendered by the client (in the browser) or server side. To verify that the page can be edited, follow the same steps in the section Verify Editing of Text Content on AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. src/api/aemHeadlessClient. Usually, it relies on invalidation techniques that ensure that any content changed in AEM is properly updated in the Dispatcher. js (JavaScript) AEM Headless SDK for. Developer. The latest version of AEM and AEM WCM Core Components is always recommended. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. AEM container components use policies to dictate their allowed components. 0 that can help in integrating your Adobe® Experience Manager. It also provides an optional challenge to apply your AEM. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Map the SPA URLs to AEM Pages. You can use the React renderer component shipped with Headless adaptive forms to render an Adaptive Form or build your own. AEM Headless as a Cloud Service Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Be able to define your project in terms of scope. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. See the Sites documentation, Content Fragments - Authoring, for details of the new editor (primarily accessed from the Content Fragments console). Below is a summary of how the Next. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Ensure only the components which we’ve provided SPA implementations for are allowed:AEM Headless as a Cloud Service. AEM Headless as a Cloud Service. Wrap the React app with an initialized ModelManager, and render the React app. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Dynamic navigation is implemented using React Router and React Core Components. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the content over AEM Headless GraphQL APIs. In Edit mode, add the Card component to the Layout Container: Drag and drop an image from the Asset finder onto the Card component: Open the Card component dialog and notice the addition of a Text Tab. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The examples below use small subsets of results (four records per request) to demonstrate the techniques. Prerequisites. The AEM Project contains configuration and content that must be deployed to AEM. In this optional continuation of the AEM Headless Developer Journey, you learn how Adobe Experience Manager (AEM) can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as. Prerequisites. A majority of the SPA. js v18 Java™ 11 Maven 3. infinity. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. Author in-context a portion of a remotely hosted React application. This tutorial requires the following: AEM as a Cloud Service. Experience League. 5 has enhanced its digital customer experience services by providing better content personalization, content fragment enhancements, and easier authoring. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. The full code can be found on GitHub. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. Don’t worry - this grid system is only applicable to the editable containers, and you can use your grid system of choice to drive the layout of the rest of your SPA. The common use case for server-to-server AEM Headless apps is to sync Content Fragment data from AEM into other systems, however this application is intentionally. This section covers the original editor, primarily accessed from the Assets console. You can create Adaptive Forms based on a. Prerequisites. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. The React app should contain one instance of the <Page. An end-to-end tutorial. Verify Page Content on AEM. To manage groups in AEM, navigate to Tools > Security > Groups. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . frontend module is a webpack project that contains all of the SPA source code. You can always view the finished code on GitHub or check the code out locally by switching to the branch Angular/integrate-spa. frontend. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. frontend module is a webpack project that contains all of the SPA source code. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Persisted queries. 0 This blog discusses a clever technique of using SPA 2. The walkthrough is based on standard AEM functionality and the sample WKND SPA. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Experience League. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Access the local Sites deployment at [sites_servername]:port. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. The first step to implement data integration to send Adaptive Form to a database, is to identify and configure data sources that store information you want to use in Adaptive Forms. Build a React JS app using GraphQL in a pure headless scenario. The DAM Users is an out of the box group in AEM that can be used for “everyday” users that manage digital. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. frontend module is a webpack project that contains all of the SPA source code. I'd like to use those same React components to feed the AEM Experience Fragment authoring experience, instead of having to rebuild each React component as an HTL template within AEM -- it's too much overhead to maintain a. js implements custom React hooks. 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-app/us/en/. Open a new command prompt and. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM GraphQL API requests. On the configuration page, tap Create to create Adobe Acrobat Sign configuration in AEM Forms. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Author in-context a portion of a remotely hosted React application. Be aware of AEM’s headless integration levels. 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. 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. Using a REST API. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. Using an AEM dialog, authors can set the location for the weather to be displayed. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. The page is now editable on AEM with a. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction; Authoring Basics for Headless with AEM; Learn about using references in Content Fragments; Learn about defining Metadata and Tagging for Content Fragments; Implementing. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Integration approach. Be aware of AEM’s headless integration levels. Next page. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Learn. Here, the developer controls the app by enabling authoring rights in selected application areas. From the command line navigate into the aem-guides-wknd-spa. This shows that on any AEM page you can change the extension from . AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. As you consider implementing server-side rendering for your SPA, review for what parts of the app it is necessary. Swagger file to read document, build and consume RESTful API’s created as. Edit the WKND SPA Project app in AEM. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The JSON content is then consumed by the single-page app, which has been integrated with the AEM JS SDK. Following AEM Headless best practices, the Next. The single-page app or single-page experience then has full control over how to layout and present this content. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. This component is able to be added to the SPA by content authors. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. i18n Java™ package enables you to display localized strings in your UI. A majority of the SPA. then my scenario would be feasible This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Sign In. In Image 2, you can see SPA hosted outside of AEM. . how that content is accessed: as a HTML in a browser, as JSON consumed by JavaScript (AEM SPA Editor) or a Mobile App is a. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. A single-page application is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the webserver, instead of the default method of a web browser loading entire new pages. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. Sign In. 4. You will educate customers of any / all integration options including APIs - both native and custom. The content author can edit the app using AEM's content authoring experience. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Don’t worry - this grid system is only applicable to the editable containers, and you can use your grid system of choice to drive the layout of the rest of your SPA. The ui. js with a fixed, but editable Title component. frontend. The Android Mobile App. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. AEM’s GraphQL APIs for Content Fragments. Learn how to configure segmentation using ContextHub. Wrap the React app with an initialized ModelManager, and render the React app. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. This tutorial requires the following: AEM as a Cloud Service. Persisted queries. Following AEM Headless best practices, the Next. Persisted queries. AEM Headless Web Component /JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. Persisted queries. Prerequisites. If it is possible that I can render my app dynamic content in AEM using WebAPI. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. js with a fixed, but editable Title component. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. js initializes and exports the AEM Headless Client used to communicate with AEM AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. The. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. The full code can be found on GitHub. Accessing a workflow. The sidekick plugin for AEM Assets supports access to: AEM Assets as. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Integration approach. Populates the React Edible components with AEM’s content. Congratulations, you have just created your first AEM SPA Editor Project! It is quite simple right now but in the next few chapters more functionality is added. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. frontend. The following tools should be installed locally: JDK 11;. Sign In. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. The full code can be found on GitHub. So in this regard, AEM already was a Headless CMS. AEM Basics Tutorials by framework. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via. I have an angular SPA app that we want to render in AEM dynamically. The preview experience links the AEM Author’s Content Fragment editor with your custom app (addressable via HTTP), allowing for a deep link into the app that renders the Content Fragment being previewed. Create Azure storage configuration. The goal of this introduction and walkthrough is to demonstrate to an AEM developer why SPAs are relevant, how they generally work, how a SPA is handled by the AEM SPA Editor, and how it is different from a standard AEM application. 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. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Content Fragments and Experience Fragments are different features within AEM:. Server-to-server Node. The walkthrough is based on standard AEM functionality and the sample WKND SPA Project app. A classic Hello World message. Tap in the Integrations tab. and a React App that consumes the content over AEM Headless GraphQL APIs. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. Headless implementation forgoes page and component management, as is traditional in. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. Since the SPA renders the component, no HTL script is needed. Overview; 1 - Configure AEM;. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the context of any. 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 prerequisites for using AEM’s headless features. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. frontend. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. frontend. Prerequisites. 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. apps and ui. @adobe/aem-spa-component-mapping: provides the API that map AEM content to SPA components. Prerequisites. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction; Authoring Basics for Headless with AEM; Learn about using references in Content Fragments; Learn about defining Metadata and Tagging for Content Fragments; Implementing. js (JavaScript) AEM Headless SDK for. Lastly, at the top of the stack, is the AEM SPA Editor. They can be used to access structured data, including texts, numbers, and dates, amongst others. Prerequisites. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend Adobe Experience Manager. Additionally, SPAs can be used within AEM while also using AEM to deliver content to additional endpoints headlessly. Two modules were created as part of the AEM project: ui. You can always view the finished code on GitHub or check the code out locally by switching to the branch Angular/integrate-spa-solution. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. This tutorial requires the following: AEM as a Cloud Service SDK. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. AEM container components use policies to dictate their allowed components. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Developers using the React framework create a SPA and then map areas of the SPA to AEM components, allowing authors to use familiar AEM Sites editing tools. Developer. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. apps and ui. Select Edit from the mode-selector in the top right of the Page Editor. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. Integration approach. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the content over AEM Headless GraphQL APIs. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. AEM Headless as a Cloud Service. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing;. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. AEM Headless applications support integrated authoring preview. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. Click De-hibernate. An end-to-end tutorial illustrating how to build-out. Following AEM Headless best practices, the Next. Unzip the download and copy the Quickstart jar ( aem-sdk-quickstart-XXX. js. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. On this page. Headless AEM Installation Guide - Cloud. Anatomy of the React app. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Create the Sling Model. Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. In a real application, you would use a larger. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. The tutorial explores token-based authentication using AEM Assets HTTP APIs but the same concepts and approaches are applicable to apps interacting with AEM Headless GraphQL APIs. Start by creating the components that will make up the composite component, that is, components for the image and its text. Congratulations, you have updated the SPA and explored the integration with AEM! You now know two different approaches for developing the SPA against the AEM JSON model API using a webpack dev server. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. 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; Populates the React Edible components with AEM’s content; Wrap the React app with an initialized ModelManager, and render the React app. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. frontend module is a webpack project that contains all of the SPA source code. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. day. User. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Overview; 1 - Configure AEM;. Create the text component in your AEM project. then my scenario would be feasible AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. Navigate to Tools > General > Content Fragment Models. Congratulations, you have updated the SPA and explored the integration with AEM! You now know two different approaches for developing the SPA against the AEM JSON model API using a webpack dev server. In addition to pure AEM-managed content CIF, a page can. zip or greater This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. then my scenario would be feasible See full list on experienceleague. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Tutorial Set up. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. Also, SPAs can be used within AEM while also using AEM to deliver content to additional endpoints headlessly. The new Adobe Developer App Builder provides an extensibility framework for a developer to easily extend functionalities in AEM as a Cloud Service. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. This tutorial requires the following: AEM as a Cloud Service. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. The ui. js app uses AEM GraphQL persisted queries to query adventure data. Once headless content has been. Headless AEM is a Adobe Experience Manager setup in which the frontend. js app uses AEM GraphQL persisted queries to query. Sign In. Below is a summary of how the Next. Persisted queries. CTA Text - “Read More”. Therefore, SPA. Experience LeagueThe Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. 2. See the NPM documentation for both frameworks for further details. View the source code on GitHub. There are two editors for authoring Content Fragments. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Learn how to use Adobe Experience Manager (AEM) as a Headless CMS (Content Management System), with features such as Content Fragment. Single page applications (SPAs) can offer compelling experiences for website users. The ui. Wrap the React app with an initialized ModelManager, and render the React app. frontend module is a webpack project that contains all of the SPA source code. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. The examples that follow demonstrate how to obtain and use the class objects in code. Included in the WKND Mobile AEM Application Content Package below. The journey lays out the requirements, steps, and approach of an AEM Headless project from the perspective of a Content Architect. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. This tutorial requires the following: AEM as a Cloud Service. src/api/aemHeadlessClient. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. Congratulations! You’ve successfully updated the React app to integrate with AEM Headless APIs using the AEM Headless SDK! Next, let’s create a more complex Image List component that dynamically renders referenced Content Fragments from AEM.