With over 24 core components available, you can easily. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. Using the GraphQL API in AEM enables the efficient delivery of Content Fragments. To the left of the name, select the checkbox to enable (turn on) DASH. AEM’s Content Services leverages traditional AEM Pages to compose headless REST API endpoints, and AEM Components define, or reference, the content to expose on these. GraphQL API. 5 is a flexible tool for the headless implementation model by offering three powerful services: Content Models. Once open the model editor shows: left: fields already defined. The Headless features of AEM go far. This grid can rearrange the layout according to the device/window size and format. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. When we choose a date, AEM will render the closest page version - that was created prior to the date and time selected. It can be used on servers without dedicated graphics or display, meaning that it runs without its “head”, the Graphical User Interface (GUI). With this quick start guide, learn the essentials of AEM 6. AEM Headless as a Cloud Service. 4 service pack 2. Contribute to adobe/aem-headless-client-js development by creating an account on GitHub. In the page properties of the site root page, set the device groups in the Mobile tab. Next, navigate to AEM to verify the updates and allow the OpenWeather component to be added to the SPA. To validate the package, click More -> Validate, In the modal dialog box that then appears, use the checkboxes to select the type (s) of validation and begin the validation by clicking Validate. AEM Best Practices Analyzer for on premise and AMS environments; 2022. If the Enable Content Model Fields for Translation option is active,. This opens a side panel with several tabs that provide a developer with information about the current page. The journey lays out the requirements, steps, and approach of an AEM Headless project from the perspective of a Content Architect. Clear the cache in your local browser and access your. Add API Taken and select the appropriate DTM company & property & click to connect DTM and validate if AEM able to connect it to DTM or not. This interface provides a generic adaptTo () method that translates the object to the class type being passed as the argument. The Story So Far. Starting with version 6. Build a React JS app using GraphQL in a pure headless scenario. Using the Access Token in a GraphQL Request. This user guide contains videos and tutorials on the many features and capabilities of AEM Assets. This article presents important questions to. Editing Page Content. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. Understand Headless in AEM; Learn about CMS Headless Development; Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How. A launch is created and a copy of the page is added to the. The author name specifies that the Quickstart jar starts in Author mode. In the Sites console, select the page or pages you wish to send to preview and click on the Manage Publication button. With the October 2023 release of Cloud Manager, Java and Maven versions are being updated on an ongoing basis. Headless implementations enable delivery of experiences across platforms and channels at scale. Create the design page for the site. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access that content. In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features. Adobe Experience Manager (AEM) components and templates comprise a powerful toolkit. The Headless Getting Started Guides lay out a simple path for creating, managing, and delivering experiences using Adobe Experience Manager (AEM) 6. Icons are references from the Coral UI icon library. Headless AEM, or “decoupled” AEM, is Adobe Experience Manager’s approach to content delivery that separates the content from the presentation layer. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. This document helps you understand headless content delivery, how AEM supports headless, and how. 04. Readiness Phase. Select the Cloud Services tab. 5 in five steps for users who are already familiar with AEM and headless technology. Under Cloud Services, navigate to the Dynamic Media Configuration page, then open the configuration dialog box for your Dynamic Media - S7 configuration. Now use the Admin Console to start the creation of a new support case. Created for: Beginner. ” Tutorial - Getting Started with AEM Headless and GraphQL. The Title should be descriptive. An introduction to the headless features of Adobe Experience Manager as a Cloud Service, and how to author content for your project. This means you can realize. Browse the following tutorials based on the technology used. 0 or 3. Within AEM, the delivery is. Could anyone please help me understand why mode="update" didn't work as expected here or I understood it wrong?From the command line navigate into the aem-guides-wknd-spa. Disabling this option in the. You can edit the various editable metadata properties under the available tabs. Content is added using components (appropriate to the content type) that can be dragged onto the page. awt. The full code can be found on GitHub. Add a UI mode to group related ContextHub modules. For the purposes of this getting started guide, you are creating only one model. Developer. Connectors User GuideIn the previous document of the AEM headless journey, Getting Started with AEM Headless as a Cloud Service you learned the basic theory of what a headless CMS is and you should now: Understand the basics of AEM’s headless features. AEM Preview is intended for internal audiences, and not for the general delivery of content. A template is a hierarchy of nodes that has the same structure as the page to be created, but without any actual content. The following configurations are examples. At its simplest level, creating digital experiences in AEM requires the following steps: Your content authors create your headless content in the author instance. View the source code on GitHub. In this phase of the AEM as a Cloud Service Migration Journey, you familiarize yourself with AEM as a Cloud Service. Let’s create some Content Fragment Models for the WKND app. Dynamic Media helps you manage assets by delivering rich visual merchandising and marketing assets on demand, automatically scaled for consumption on web, mobile, and social sites. In the future, AEM is planning to invest in the AEM GraphQL API. Created for: Admin. AEM Author service requires an OSGi configuration to be added to the AEM Author service’s run mode folder, and does not use a Dispatcher configuration. Icons are references from the Coral UI icon library. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. e. 0. Errors to see any. Server-to-server Node. Preview URLs, using URL expressions, are set on the Content Fragment Model’s Properties. Learn guidelines for developing on AEM as a Cloud Service and about important ways in which it differs from AEM on premises and AEM in AMS. TIP. The tools provided are accessed from the various consoles and page editors. Learn about headless technologies, why they might be used in your project, and how to create. Select Edit from the edit mode selector in the top right of the Page Editor. Tap or click the folder that was made by creating your configuration. The diagram above depicts this common deployment pattern. 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. OSGi configuration. Headless testing still tests the components, but skips the time- and resource-consuming. Navigate to the folder you created previously. See Generating Access Tokens for Server-Side APIs for full details. The following Documentation Journeys are available for headless topics. AEM provides Translation Configuration UI to manage the content translation rules to control the properties and references that will get translated. 4. AEM as a Cloud Service GraphQL API used with Content Fragments is heavily based on the standard, open source GraphQL API. Select the Content Fragment Model and select Properties form the top action bar. The Story So Far. Log into AEM as a Cloud Service and from the main menu select Navigation -> Content Fragments. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. Contribute to adobe/aem-headless-client-js development by creating an account on GitHub. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. AEM exposes a variety of HTTP endpoints that can be interacted with in a headless manner, from GraphQL, AEM Content Services to Assets HTTP API. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. 5 Forms; Tutorial. The full code can be found on GitHub. When a page or asset is being translated, AEM extracts this content so that it can be sent to the translation service. Understand how to build and customize experiences using AEM’s powerful features. The platform is also extensible, so you can add new APIs in the future to deliver content in a different. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. In the following example, the AEM instance runs locally so the localhost value is used: java -jar toughday2. Make no changes, select Save. AEM Headless Content Architect Journey Overview; Content Modeling for Headless with AEM - An Introduction; Learn the Content Modeling Basics for Headless with AEM; Learn about Creating Content Fragment Models in AEM; Headless Translation Journey. Headless Developer Journey. For example, to translate a Resource object to the corresponding Node object, you can. Open the required model for Edit; use either the quick action, or select the model and then the action from the toolbar. Learn about headless technologies, why they might be used in your project,. Using a REST API. js app. Navigate to the folder holding your content fragment model. Page Templates - Static. This involves structuring, and creating, your content for headless content delivery. adobe. react. Adobe Experience Manager’s headless mode for SPAs. These can then be edited in place, moved, or deleted. When the translated page is imported into AEM, AEM copies it directly to the language copy. The AEM SDK is used to build and deploy custom code. In the previous document of the AEM headless journey, Path to Your First Experience Using AEM Headless, you then learned the steps needed to implement your first project. To install. We’ll guide you through configuring your React app to connect to AEM Headless APIs using. granite. 0. Typical AEM as a Cloud Service headless deployment. View the source code on GitHub. NOTE. The touch-enabled UI is the standard UI for AEM. In the following wizard, select Preview as the destination. 5 Forms; Get Started using starter kit. In the Add environment dialog that appears: Select Rapid Development under the Select environment type heading. In the file browser, locate the template you want to use and select Upload. Click Install New Software. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. Remember that headless content in AEM is stored as assets known as Content Fragments. Below is a simple path for creating, managing, and delivering experiences using AEM as a Cloud Service in five steps for users who are already familiar with AEM and headless technology. Adding a UI Mode. js implements custom React hooks return data from AEM GraphQL to the Teams. Everything depends on the browser implementation of its headless mode. Available for use by all sites. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access that content. In this part of the AEM Headless Content Author Journey, you can learn the (basic) concepts and terminology necessary to understand authoring content when using Adobe Experience Manager (AEM) as a Cloud Service as a Headless CMS. Editable Templates are used to define the JSON content structure AEM Content Services ultimately expose. Open the package details from the package list by clicking the package name. AEM provides the Content Fragment core component - a component that lets you include content fragments on your pages. The React WKND App is used to explore how a personalized Target activity using Content. Open the required model for Edit; use either the quick action, or select the model and then the action from the toolbar. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction;. A string property that defines the range of paragraphs to be output if in single element render mode. You also learn how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. 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. Check the page status and if necessary, the state of the replication queue. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. On the Details tab, in the Dynamic Media sync mode drop-down list, choose from the following three options. Certain points on the SPA can also be enabled to allow limited editing in AEM. js. Persisted queries. Pipelines are the only way to deploy code to the environments of AEM as a Cloud Service. Connectors User Guide In this video, we discuss three approaches for using AEM and Target, and help you understand what works best for your organization. This setup establishes a reusable communication channel between your React app and AEM. Then Getting Started with AEM Headless as a Cloud Service described AEM Headless in the context of your own project. Navigate to Tools, General, then select GraphQL. listeners) Undo / Redo; Page diff and Time Warp For the purposes of this getting started guide, you are creating only one model. Headless Setup. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API for headless content delivery. Click Add. This article provides insights into how Headless Adaptive Forms work, and how they can be integrated with different applications to simplify the form building process. AEM enables headless delivery of immersive and optimized media to customers that can automatically adapt to any platform or device. Make any changes within /apps. The focus lies on using AEM to deliver and manage (un. 04. This document. AEM applies the principle of filtering all user-supplied content upon output. AEM’s GraphQL APIs for Content Fragments. In the previous document of the AEM headless journey, Getting Started with AEM Headless as a Cloud Service you learned the basic theory of what a headless CMS is and you should now: ; Understand the basics of AEM's headless features. It contains the following artifacts: The Quickstart jar - an executable jar file that can be used to set up both an author and a publish instance. The AEM emulator framework: Provides content authoring within a simulated User Interface (UI), for example, a mobile device or. Select Create. In the Name field, enter AEM Developer Tools. Trigger an Adobe Target call from Launch. The two only interact through API calls. Navigate to Tools, General, then select GraphQL. This ensures that content can be consumed across various channels, apps, or platforms in a headless mode. The src/components/Teams. With Adobe Experience Manager (AEM) as a Cloud Service, you can selectively access your Content Fragments, using the AEM GraphQL API, to return only the content that you need. Content Models serve as a basis for Content. This document. For a third-party service to connect with an AEM instance it must have an. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. AEM as a Cloud Service and AEM 6. Discrete log levels can be set for the different AEM environments using run mode-based OSGi configuration targeting if it’s. Clicking the name of your test in the Result panel shows all details. It is the main tool that you must develop and test your headless application before going live. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Secure and Scale your application before Launch. AEM Headless as a Cloud Service. js (JavaScript) AEM Headless SDK for Java™. Hide conditions can be used to determine if a component resource is rendered or not. This opens a side panel with several tabs that provide a developer with information about the current page. impl. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. When editing pages in AEM, several modes are available, including Developer mode. 1. The Content author and other internal users can. Headful and Headless in AEM; Headless Experience Management. When customizing, you can create your. AEM’s GraphQL APIs for Content Fragments. A folder’s Dynamic Media Publishing mode property plays an important role in publication. This document provides an overview of the different models and describes the levels of SPA integration. This video series covers the delivery options for using Content Fragments. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. In the previous document of the AEM headless journey, Path to Your First Experience Using AEM Headless, you then learned the steps needed to implement your first project. Headless Developer Journey. AEM headless CMS allows you to customize websites according to your business needs through a third-party extensibility framework to easily build customized extensions. Author the Title component in AEM. 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. In the sites console, select the page to configure and select View Properties. To define your new segment: After accessing the segments, navigate to the folder where you would like to create the segment. The translation rules described in this document apply to Content Fragments only if the Enable Content Model Fields for Translation option has not been activated at the translation integration framework configuration level. The authoring environment of AEM provides various mechanisms for organizing and editing your content. Headless content management is a key development for today’s web design that decouples the frontend, client-side applications from the backend, content management system. The AEM Author tier is operated as a cluster of AEM author pods sharing a single content repository. 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. AEM provides several tools and resources for creating workflow models, developing workflow steps, and for programmatically interacting with workflows. Headless implementation forgoes page and component management, as is traditional in. OSGi Configuration API. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Discrete log levels can be set for the different AEM environments using run mode-based OSGi configuration targeting if it’s. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Select Create. Following AEM Headless best practices, the application uses AEM GraphQL persisted queries to query adventure data. OSGi configuration. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). Log into AEM as a Cloud Service and from the main menu select Tools > General > Configuration Browser. The author name specifies that the Quickstart jar starts in Author mode. Option 2: Share component states by using a state library such as NgRx. 10. When using an out-of-the-box implementation, the process described above should be sufficient to generate the Target Offer from the Experience Fragment and. Format your content as either Full Text, Plain Text, or Markdown. The full code can be found on GitHub. In the file browser, locate the template you want to use and select Upload. In the Add Configuration drop-down list, select the configuration. Enable developers to add automation. 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. Examples can be found in the WKND Reference Site. We’ll guide you through configuring your React app to connect to AEM Headless APIs using the AEM Headless SDK. Provide a Title for your configuration. Edit the file. Headful and Headless in AEM; Headless Experience Management. But in Headless AEM , you create the content in AEM either using CF or a Template to expose the content as an API. The session will be split in two halves as follows:Developer. The AEM as a Cloud Service SDK is composed of the following artifacts: Quickstart Jar - The AEM runtime used for local development; Java™ API Jar - The Java™ Jar/Maven Dependency that exposes all allowed Java™ APIs that can be used to develop against AEM as a Cloud Service. Log in to AEM Author. Understand Headless in AEM; Learn about CMS Headless Development; Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How. For example, when the resolution goes below 1024. Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How to model your content as AEM Content Models;. Readiness Phase. The Story So Far. To install. 20. Content Modeling for Headless with AEM - An Introduction; Learn the Content Modeling Basics for Headless with AEM; Learn about Creating Content Fragment Models in AEM; Headless Translation Journey. In a standard AEM instance the global folder already exists in the template console. Persisted queries. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. AEM Site’s Page Editor is a powerful tool for creating and editing web content. Get to know how to organize your headless content and how AEM’s translation tools work. Once uploaded, it appears in the list of available templates. Enter the file Name including its extension. How does AEM work in headless mode for SPAs? Since version 6. Q: “How is the GraphQL API for AEM different from Query Builder API?” A: “The AEM GraphQL API offers total control on the JSON output, and is an industry standard for querying content. The main difference consists in enabling the Adobe Experience. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. Navigate to Sites > WKND App. Content is added using components (appropriate to the content type) that can be dragged onto the page. Ideal usages for this mode are decoupling the rendering of JSS applications from Sitecore and multi-channel API usage. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The following video highlights some of the top features of the Page Editor. AEM Headless Client for JavaScript. Monitor Performance and Debug Issues. Before building the headless component, let’s first build a simple React countdown and. 8. For this, let’s edit the Timewarp page. src/api/aemHeadlessClient. Cloud Manager, which was an optional content delivery tool for Managed Services, is required. The models available depend on the Cloud Configuration you defined for the assets. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. They can be requested with a GET request by client applications. Select Save. In addition to offering robust tools to create, manage, and deliver traditional webpages in the full-stack fashion, AEM also offers the ability to author self-contained selections of content and serve them headlessly. Get to know how to organize your headless content and how AEM’s translation tools work. Confirm that the page has been replicated correctly. These can then be edited in place, moved, or deleted. -Djava. The links in these attributes are run through the AEM Link Externalizer publishLink() to recreate the URL as if it was on a published instance, and as such, publicly available. Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How to model your content as AEM Content Models;. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. A pipeline can be triggered by an event, such as a pull request from a source code repository (that is, a code change), or on a regular schedule to match a release cadence. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Learn how to integrate AEM Headless with Adobe Target, by exporting AEM Content Fragments to Adobe Target, and use them to personalize headless experiences using the Adobe Experience Platform Web SDK’s alloy. With our headless CMS you can create structured content once and reuse it across any digital touchpoint via APIs. Admin. For this reason, each pipeline is associated with a particular AEM version. Browse the following tutorials based on the technology used. Template authors must be members of the template-authors group. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Topics: Content Fragments. You will also learn how to use out of the box AEM React Core Components. Last update: 2023-06-27. Developer. 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. This journey is designed for the translation specialist persona, often referred to as the Translation Project Manager or TPM. Formerly referred to as the Uberjar; Javadoc Jar - The. This article assumes that your project’s Dispatcher configuration includes the file opt-in/USE_SOURCES_DIRECTLY. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript code. Organize and structure content for your site or app. Tap or click the folder you created previously. Headless Authoring Journey - Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how. To install. Adobe Experience Manager’s built-in Multi Site Manager and translation tools simplifies localizing your content. Level 2: In addition to level one: The RemotePage component can be used to embed the external SPA into AEM where AEM content can be viewed in-context. AEM employs advanced digital marketing tools to improve your user's experience and gain insight into your visitors. AEM projects can be implemented in a headful and headless model, but the choice is not binary. Open CRXDE Lite in your browser. In this chapter of Advanced concepts of Adobe Experience Manager (AEM) Headless, learn how to edit a Content Fragment Model by adding tab placeholders, date and time, JSON objects, fragment references, and content references. 1. We’ll cover best practices for handling and rendering Content Fragment data in React. Every surfer knows the feeling of combined anxiety and excitement, the questions that linger in our minds while falling asleep before a swell. Click on the layout option and you can notice the layout mode component configurations are available within the. The following diagram shows the flow of requests from the browser to the Sitecore databases. 0. The. Developer mode opens a side panel with several tabs that provide a developer with technical information about the current page. The headless part is the content backend, as a headless Content Management System (CMS) is a back-end only content management system, designed and built explicitly as a content repository that makes content accessible via an API, for display on any device. 0 or 3. Click the Save All Button to save the changes. Hover over the default title text below the WKND logo and above the adventures list, until the blue edit outline displaysUnderstand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. 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. In the Exploerer Pane, right-click the component where you want to create the file, select Create, then Create File. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. 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. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). Use GraphQL schema provided by: use the drop-down list to select the required configuration. Using this path you (or your app) can: receive the responses (to your GraphQL queries). Authoring for AEM Headless as a Cloud Service - An Introduction. With a headless implementation, there are several areas of security and permissions that should be addressed. Creating a. js file displays a list of teams and their members, by using a list query. This journey lays out the requirements, steps, and approach to translate headless content in AEM. What you need is a way to target specific content, select what you need and return it to your app for further processing. 2. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access that content. AEM Assets add-on for Adobe Express:. Persisted queries. AEM is considered a Hybrid CMS. Creating a mobile site is similar to creating a standard site as it also involves creating templates and components. Tap or click the folder that was made by creating your configuration. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. This endpoint can use all Content Fragment Models from all Sites configurations (defined in the Configuration Browser ). Tap Home and select Edit from the top action bar. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 0, Adobe Experience Manager (AEM) introduced a new user interface referred to as the touch-enabled UI (also known simply as the touch UI ). Multiple implementations of an interface are named <Variant><Interface>, that is, JcrReader and FileSystemReader. In the Create Site wizard, select Import at the top of the left column. Then Getting Started with AEM Headless as a Cloud Service described AEM Headless in the context of your own project. In this case we have selected /content/dam/wknd/en. Below is a simple path for creating, managing, and delivering experiences using AEM as a Cloud Service in five steps for users who are already familiar with AEM and headless technology. React - Headless. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 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. 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 two lists below reflect the AEM as a Cloud Service OSGi configuration surface, describing what customers can configure. The three tabs are: Components for viewing structure and performance information. Resource Description Type Audience Est. The tagged content node’s NodeType must include the cq:Taggable mixin.