Select Edit from the mode-selector in the top right of the Page Editor. Next, deploy the updated SPA to AEM and update the template policies. Get to know how to organize your headless content and how AEM’s translation tools work. . GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. Included in the WKND Mobile AEM Application Content Package below. It is helpful for scalability, usability, and permission management of your content. This journey lays out the requirements, steps, and approach to translate headless content in AEM. This article builds on these so you understand how to author your own content for your AEM headless project. You’ll learn how to format and display the data in an appealing manner. This exceptional AEM GEMs session features two speakers who are operating AEM as customers. Learn how to create GraphQL queries to return content from Adobe Experience Manager (AEM) and how to use the GraphiQL tool to quickly test, refine, and debug queries. Documentation. Our presenters will ‘compete’ to be the Adobe Experience Manager Rock Star 2022 by presenting a solution to a pre-provided problem statement that each must solve. Learn about headless technologies, what they bring to the user experience, how AEM supports headless models, and how to implement your own headless development project from A to Z. As a result, I found that if I want to use Next. Configure the Translation Connector. The GraphiQL IDE is available in AEM for you to develop, test, and persist your GraphQL queries, before transferring to your production environment. Ensure you adjust them to align to the requirements of your project. These remote queries may require authenticated API access to secure headless content. 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. JSON preview is a great way to get started with your headless use cases. env files, stored in the root of the project to define build-specific values. How content could be created? 3. Following AEM Headless best practices, the application uses AEM GraphQL persisted queries to query adventure data. js. Headless Development for AEM Sites as a Cloud Service - A quick introduction to orient the AEM Headless developer with the necessary featuresAEM Headless Tutorial - React App by Adobe Docs Abstract Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Navigate to the folder you created previously. Tutorials by framework. The most common deployment pattern with AEM headless applications is to have the production version of the application connect to an AEM Publish service. . An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Looking for a hands-on. We do this by separating frontend applications from the backend content management system. You now have a basic understanding of headless content management in AEM. Select Edit from the mode-selector. 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. Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to use them on your project. In the previous document of the AEM headless translation journey, Learn about headless content and how to translate in AEM you learned the basic theory of what a headless CMS is and you. In this tutorial, we’ll cover a few concepts. Navigate to the Software Distribution Portal > AEM as a Cloud Service. Following AEM Headless best practices, the Next. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. Objective. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. x. With Adobe Experience Manager (AEM), you can selectively access your Content Fragments, using the AEM GraphQL API, to return only the content that you need. This persisted query drives the initial view’s adventure list. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. This article presents important questions to. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Permissions and personas can broadly be considered based on the AEM environment Author or Publish. Use GraphQL schema provided by: use the drop-down list to select the required configuration. Create Content Fragments based on the. In this video you will: Learn how to use Content Fragments references to link one or more Content Fragments. The navigation menu is driven by the AEM page hierarchy and will make use of the JSON model provided by the Navigation Core Component. User. The diagram above depicts this common deployment pattern. There are many more resources where you can dive deeper for a comprehensive. AEM as a Cloud Service and AEM 6. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. Learn about the concepts and mechanics of. The Content author and other. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). With our headless CMS you can create structured content once and reuse it across any digital touchpoint via APIs. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). All Rights Reserved. D. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. To support AEM GraphQL persisted queries (and Experience Fragments), add GET. Tap or click Create -> Content Fragment. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. React app with AEM Headless View the source code on GitHub A full. Single page applications (SPAs) can offer compelling experiences for website users. AEM Brand Portal. This article builds on these so you understand how to author your own content for your AEM headless project. With a headless implementation, there are several areas of security and permissions that should be addressed. In this part of the AEM Headless Developer Journey, you will understand the steps to implementing your first headless experience in AEM including planning considerations and also learn best practices to make your path as smooth as possible. From the AEM Start screen, navigate to Tools > General > GraphQL Query Editor. Here you can specify: Name: name of the endpoint; you can enter any text. The React app should contain one. 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. Developer. ; Know the prerequisites for using AEM's headless features. So, I request you to answer my queries directly. It is the main tool that you must develop and test your headless application before going live. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. CORS Dispatcher filters Documentation AEM AEM Tutorials AEM Headless Tutorial Tutorial Set up The latest version of AEM and AEM WCM Core Components is always recommended. 0 or later. 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. Developing SPAs for AEM. Or in a more generic sense, decoupling the front end from the back end of your service stack. Developer. The following configurations are examples. Learn to use the Experience Manager desktop app to connect repositories and desktop applications to provide faster access to resources and streamlined workflows. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. Admin. 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. In, some versions of AEM (6. 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. Locate the Layout Container editable area right above the Itinerary. This level of integration is the traditional headless model and allows your content authors to create content in AEM and deliver it heedlessly to any number of external services using GraphQL or to edit them from external services using the Assets API. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Prerequisites. A language root folder is a folder with an ISO language code as its name such as EN or FR. ; Be aware of AEM's headless integration. 5 or later AEM WCM Core Components 2. 5 Forms; Tutorial. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. The link gave you will tell you the complete picture of Headless AEM . 3) AEM Franklin aka. Support enterprise governance and globalisation needs with a cloud-native architecture that’s always current, providing fast deployment cycles, auto-scaling and a self-healing infrastructure. This involves structuring, and creating, your content for headless content delivery. 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. AEM Headless Content Author Journey. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. AEM makes it easy to manage your marketing content and assets. 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. npm module; Github project; Adobe documentation; For more details and code. AEM GraphQL API requests. to gain points, level up, and earn exciting badges like the new Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. js (JavaScript) AEM Headless SDK for. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Yes it can, Headless CMS's provide enough metadata (ID's Slugs etc. Content is delivered to various channels via JSON. AEM 6. You also learn how you can create editable SPAs using AEM's SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. Tap or click the rail selector and show the References panel. TIP. ; The Fragment Reference data type lets you. AEM makes it easy to manage your marketing content and assets. The Story So Far. For over 40 years FTS has helped build resilient communities against extreme weather events by providing innovative and reliable situational awareness. 1. Right now there is full support provided for React apps through SDK, however the model can be used using. AEM Headless tutorials - If you prefer to learn by doing and have existing knowledge of AEM, take our hands-on tutorials organized by API and framework, that explore creating and using applications built on AEM Headless. AEM Headless as a Cloud Service. See full list on experienceleague. Appreciate your support. Level 1: Content Fragments and the AEM headless framework can be used to deliver AEM content to the SPA. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. X. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. These are defined by information architects in the AEM Content Fragment Model editor. A collection of Headless CMS tutorials for Adobe Experience Manager. The models available depend on the Cloud Configuration you defined for the assets folder. Once headless content has been. To accelerate the tutorial a starter React JS app is provided. AEM’s WCM Core Components have built-in functionality to support a normalized JSON schema of exported Pages and Components. This component is able to be added to the SPA by content authors. The following AEM documentation includes everything from essential guides for those new to the content management system (CMS) to videos, tutorials, and further learning resources to get the most out of AEM 6. ) for you to create variable routing on your web application. 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. The Create new GraphQL Endpoint dialog box opens. A language root folder is a folder with an ISO language code as its name such as EN or FR. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. AEM Headless as a Cloud Service. Permission considerations for headless content. Learn about headless technologies, what they bring to the user experience, how AEM supports headless models, and how to implement your own headless development project from A to Z. Here are some specific benefits for AEM authors: 1. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. Content Models serve as a basis for Content Fragments. supportscredentials is set to true as request to AEM Author should be authorized. While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted queries can be cached. This article builds on these so you understand how to create your own Content Fragment. X. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. 1999. The Story So Far. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. ; The data types Content Reference and Fragment Reference let you create relationships to other content within AEM. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM serves headless content, and how you can translate it. Last update: 2023-08-16. Authoring Basics for Headless with AEM. 4. This journey lays out the requirements, steps, and approach to translate headless content in AEM. The AEM translation management system uses these folders to define the. Content Fragments are instantiations of. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Authoring for AEM Headless as a Cloud Service - An Introduction. AEM Headless supports management of image assets and their optimized delivery. 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. 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. We’ll cover best practices for handling and rendering Content Fragment data in React. Tap or click Create -> Content Fragment. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. Beyond that, Adobe provides several patterns about how to use the SPA editor and integrate a SPA such as your angular application with AEM, usually as you suggested would be the opposite, but in your case, you could use the "Integrated SPA" from this articles: The AEM Headless client, provided by the AEM Headless Client for JavaScript, must be initialized with the AEM Service host it connects to. Persisted Queries and. Navigate to Tools -> Assets -> Content Fragment Models. Let’s take a look to see how content fragment models and content fragments can help you with your AEM sites and headless use cases. AEM Headless as a Cloud Service. The GraphQL API lets you create requests to access and deliver Content Fragments. Developer. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. The journey will define additional personas with which the content architect must interact for a successful project, but the point-of-view for the journey is that of the content architect. The latest version of AEM and AEM WCM Core Components is always recommended. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Requirements and PrerequisitesThe 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. Currently t he GraphQL feature is enabled by default only on the AEM SDK from 2021-02-04 or newer on AEM as Cloud Service. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. This component is able to be added to the SPA by content authors. Learn how to deep link to other Content Fragments within a. Click Create and Content Fragment and select the Teaser model. js (JavaScript) AEM Headless SDK for. 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. Tap in the Integrations tab. Prerequisites. The Assets REST API lets you create. AEM Headless Tutorials - Use these hands-on tutorials to explore how to use the various options for delivering content to headless endpoints with AEM and chose what. It does not look like Adobe is planning to release it on AEM 6. From the AEM Start screen, navigate to Tools > General > GraphQL Query Editor. The best way to get started with GraphQL and AEM is to start experiment with queries using our sample content fragment data. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. Learn how features like Content Fragment Models, Content Fragments, and a GraphQL API are used to power headless experiences. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Select the location and model you wish. Dynamic navigation is implemented using Angular routes and added to an existing Header component. Use Experience Manager Assets Brand Portal to meet marketing needs by securely distributing approved brand and product assets to external agencies, partners, internal. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. Developer. Learn about the different data types that can be used to define a schema. The journey will define additional personas with which the content architect must interact for a successful project, but the point-of-view for the journey is that of the content architect. then my scenario would be feasibleLearn how to extend an existing Core Component to be used with the AEM SPA Editor. In this case we have selected /content/dam/wknd/en. The AEM SDK. Learn how features like Content Fragment Models, Content Fragments, and a GraphQL API are used to power headless experiences. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. To use this, endpoints must be defined and enabled in AEM, and if necessary, the GraphiQL interface installed. Select Preview from the mode-selector in the top-right. MacKenzieNovember 20, 2023 12:34pm. Slider and richtext are two sample custom components available in the starter app. AEM Headless as a Cloud Service. Learn how to create relationships between Content Fragment Models in Adobe Experience Manager (AEM) and how to leverage these relationships in GraphQL queries. Navigate to Tools, General, then select GraphQL. The journey will define additional personas with which the content architect must interact for a successful project, but the point-of-view for the journey is that of the content architect. This architecture diagram shows various components of a headless and conventional CMS. The Headless implementation of AEM uses Content Fragments Models and Content Fragments to focus on the creation of structured, channel-neutral, and reusable fragments of content and their cross-channel delivery. 4. Created for: Intermediate. The ImageComponent component is only visible in the webpack dev server. AEM Headless supports management of image assets and their optimized delivery. 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. Time; Headless Developer Journey: For users new to AEM and headless technologies, start here for a comprehensive introduction to AEM and its headless features from the theory of headless through going live with your first headless project. But with the AEM Headless Developer Journey you are mentioning you’ll work with both solutions so I think at the end of the journey you can see the pro’s and con’s from both solutions. GraphQL API View more on this topic. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. An end-to-end tutorial illustrating how to build-out and expose content using AEM and consumed by a native mobile app, in a headless CMS scenario. Just for your information, it will also depend on the use case, not because you choose to use GraphQL, you can’t use Assets API. js implements custom React hooks. To accelerate the tutorial a starter React JS app is provided. Adobe Experience Manager Rock Star - The Headless ChallengeOur presenters will 'compete' to be the Adobe Experience Manager Rock Star 2022 by presenting a solution to a pre-provided problem statement that each must solve. The full code can be found on GitHub. A well-defined content structure is key to the success of AEM headless implementation. Get a free trial. Specifically, they’re backing a new restaurant, Argento, that will debut in Silver Lake in the. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Or in a more generic sense, decoupling the front end from the back end of your service stack. Ross McDonnell Ross McDonnell Facebook. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. 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. An introduction to the headless features of Adobe Experience Manager as a Cloud Service, and how to author content for your project. 5 Forms environment, set up an AEM Archetype 41 or later based project and deploy it to all of your Author and Publish instances. js: Execute SSR/ISR from AEM GraphQL API on a separate server that is not AEM. Authoring Basics for Headless with AEM. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within Adobe Experience Manager (AEM) for a site built using such frameworks. Rich text with AEM Headless. In the previous document of the AEM headless translation journey, Get started with AEM headless translation you learned how to organize your headless content and how AEM’s translation tools work and you should now: Understand the importance. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. The ImageRef type has four URL options for content references: _path is the. The journey lays out the requirements, steps, and approach of an AEM Headless project from the perspective of a Content Architect. 2. An. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. 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. Populates the React Edible components with AEM’s content. Then Getting Started with AEM Headless described AEM Headless in the context of your own project. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. You really don't invest much in the FE design in AEM , as the content is delivered only as JSON to be consumed by your services. The AEM translation management system uses these folders to define the. The following configurations are examples. json to be more correct) and AEM will return all the content for. Content Fragments. Wrap the React app with an initialized ModelManager, and render the React app. What you need is a way to target specific content, select what you need and return it to your app for further processing. Headless Adaptive Forms will allow a mechanism to deliver forms in a headless, channel-agnostic format and render them in a channel-optimal manner leveraging front end expertise in frameworks like React, Angular or native IOS, Android Apps. In today’s tutorial, we created a complex content private model based on. Understand how to create new AEM component dialogs. The zip file is an AEM package that can be installed directly. Select the language root of your project. May be you have to start from her - 399931 Learn about Headless in Adobe Experience Manager (AEM) with a combination of detailed documentation and headless journeys. AEM. 1. Author in-context a portion of a remotely hosted React. X. Content Models serve as a basis for Content Fragments. A Content author uses the AEM Author service to create, edit, and manage content. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. 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. Generally you work with the content architect to define this. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. Often, these headless consumers may need to authenticate to AEM in order to access protected content or actions. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Anatomy of the React app. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. In previous releases, a package was needed to install the GraphiQL IDE. Let’s take a look to see how content fragment models and content fragments can help you with your AEM sites and headless use cases. js app uses AEM GraphQL persisted queries to query adventure data. The AEM SDK is used to build and deploy custom code. 5 Forms; Get Started using starter kit. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. Experience Manager tutorials. AEM GraphQL API requests. The journey may define additional personas with which the translation specialist must interact, but the point-of-view for. js in AEM, I need a server other than AEM at this time. The Configuration Browser provides a generic configuration API, content structure, resolution mechanism for configurations in AEM. Developer. The React WKND App is used to explore how a personalized Target activity using Content. Tap the Technical Accounts tab. With Headless Adaptive Forms, you can streamline the process of. While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted. 5 the GraphiQL IDE tool must be manually installed. As part of the AEM global family of innovators, our collective purpose is to empower communities and organizations to survive – and thrive – in the face of escalating environmental risks. Get started with Adobe Experience Manager (AEM) and GraphQL. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM serves headless content, and how you can translate it. AEM Forms Headless Adaptive Forms provide a fast and efficient way to create forms for various platforms including Headless or Headful CMS, React applications, Single Page Applications (SPA), Web Apps, Mobile apps, Amazon Alexa, Google Assistant, WhatsApp, and more. 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 SDK. 5. Learn to use the delegation patter for extending Sling Models and features of Sling Resource. js (JavaScript) AEM Headless SDK for. Headless Authoring Journey - Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. src/api/aemHeadlessClient. x. See these guides, video tutorials, and other learning resources to implement and use AEM 6.