The models available depend on the Cloud Configuration you defined for the assets. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. GraphQL endpoints. 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. Once headless content has been translated,. Created for: Intermediate. I was very pleased with the service both on. Review existing models and create a model. 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 Headless Client for Java is used to execute the GraphQL queries and map data to Java. New useEffect hooks can be created for each persisted query the React app uses. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. All leading CMS products such as Drupal, WordPress, AEM and Sitecore, Kentico and others can also work in a “headless” mode. See how AEM powers omni-channel experiences. Using headless e-commerce allows you to separate the CMS from the e-commerce engine part. Let’s set it to use Google’s Material UI: Ensure that the starter kit is not running. Create the Sling Model. 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. React has three advanced patterns to build highly-reusable functional components. A minimum of two pods allows for business continuity while maintenance tasks are running, or while a deployment process is happening. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Browse the following tutorials based on the technology used. 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. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. ” Tutorial - Getting Started with AEM Headless and GraphQL. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. View the. js API routes, and the Next. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM. If you are using. Build a React JS app using GraphQL in a pure headless scenario. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. arunpatidar. 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. Persisted queries. . This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Open the Page Editor’s side bar, and select the Components view. When authorizing requests to AEM as a Cloud Service, use. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Tutorials by framework. Explore React Spectrum. What the authors are willing to author, how involved do they get with content, and how involved do they want to get with crafting experiences? SPA - single page. From USD*. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. AEM Headless as a Cloud Service. Once headless content has been translated,. How does AEM work in headless mode for SPAs? Rendering HTML in the backend vs Single Page Application The SPA WYSIWYG content editor Content APIs Benefits of. New useEffect hooks can be created for each persisted query the React app uses. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. The AEM Headless client, provided by. They are suitable only for content pages. The engine’s state depends on a set of features (i. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. The URLs or routes used to preview a Content Fragment must be composable using URL expressions. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Learn how to create a custom weather component to be used with the AEM SPA Editor. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. Created for: Beginner. Author in-context a portion of a remotely hosted React application. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. js app uses AEM GraphQL persisted queries to query adventure data. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. AEM Headless as a Cloud Service. This document provides and overview of the different models and describes the levels of SPA integration. Objective. Developer. js: Execute SSR/ISR from AEM GraphQL API on a separate server that is not AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Overview; 1 - Create Content Fragment Models; 2 - Author Content Fragments; 3 - Explore the AEM GraphQL API; 4 - Persisted GraphQL Queries; 5 - Client Application Integration; Headless First Tutorial. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. The full code can be found on GitHub. If auth param is a string, it's treated as a Bearer token. Learn to use the delegation pattern for extending Sling Models and. 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. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Below is a summary of how the Next. These are importing the React Core components and making them available in the current project. 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 Headless as a Cloud Service. AEM Headless APIs allow accessing AEM content from any. If you are using Webpack 5. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The Single-line text field is another data type of Content. Browse the following tutorials based on the technology used. This Android application demonstrates how to query content using the GraphQL APIs of AEM. react project directory. Contributing. To stop the starter kit, open your terminal, navigate to the react-starter-kit-aem-headless-forms, and press Ctrl-C (it’s the same on Windows, Mac & Linux). The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Get a free trial. 5 or later; AEM WCM Core Components 2. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Remote SPA is an AEM-provided solution for externally hosted React applications to become editable within AEM. In this video you will: Learn how to create and define a Content Fragment Model. This tutorial uses a simple Node. For publishing from AEM Sites using Edge Delivery Services, click here. Created for: Intermediate. Build Engaging Forms Using Core Components and Headless Adaptive Forms on AEM 6. Following AEM Headless best practices, the Next. The build will take around a minute and should end with the following message: Level 1: Content Fragments and the AEM headless framework can be used to deliver AEM content to the SPA. Before building the headless component, let’s first build a simple React countdown and. js is a React framework that provides a lot of useful features out of the box. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The use of AEM Preview is optional, based on the desired workflow. js (JavaScript) AEM Headless SDK for Java™. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). If you are using Webpack 5. js implements custom React hooks. Search. Using the AEM JSON exporter, you can deliver the contents of any AEM page in JSON data model format. 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. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. Run the following command to build and deploy the entire project to AEM: $ mvn. This Next. This server-to-server application demonstrates how to. If you are. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM. For publishing from AEM Sites using Edge Delivery Services, click here. To tag content and use the AEM Tagging infrastructure : The tag must exist as a node of type cq:Tag under the taxonomy root node. These are importing the React Core components and making them available in the current project. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. Tap Home and select Edit from the top action bar. For publishing from AEM Sites using Edge Delivery Services, click here. The react application performs a GraphQL query, to retrieve the data about the available adventures from AEM. To stop the starter kit, open your terminal, navigate to the react-starter-kit-aem-headless-forms, and press Ctrl-C (it’s the same on Windows, Mac & Linux). The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. AEM provides AEM React Editable Components v2, an Node. Content models. The full code can be found on GitHub. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. With Adobe Experience Manager (AEM) as a Cloud Service, Content Fragments lets you design, create, curate, and publish page-independent content. Navigate to Tools > General > Content Fragment Models > WKND. Prerequisites. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Let’s set it to use Google’s Material UI: Ensure that the starter kit is not running. Regardless of which model you choose to implement for SSR,, you need to specify to AEM how to access this remote rendering service. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless. Developer. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. This Android application demonstrates how to query content using the GraphQL APIs of AEM. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. src/api/aemHeadlessClient. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. The absence of a headless architecture can lead to several challenges, including siloed development, slower time-to-market, heavy IT dependency, difficulty in. 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. This guide uses the AEM as a Cloud Service SDK. AEM has multiple options for defining headless endpoints and delivering its content as JSON. AEM Headless as a Cloud Service. Last update: 2023-04-19. Do not attempt to close the terminal. Below is a summary of how the Next. js 14+. When developing a custom AEM Headless client, ensure the AEM service’s host is parameterize-able based on build parameters. The AEM emulator framework: Provides content authoring within a simulated User Interface (UI), for example, a mobile device or. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The minimal set of dependencies for the React app to use AEM React Editable Components v2 are: @adobe/aem-react-editable-components, @adobe/aem-spa-component-mapping, and @adobe/aem-spa-page-model-manager. . An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. As a result, I found that if I want to use Next. This example, loosely based on the AEM Headless React app, illustrates how AEM GraphQL API requests can be configured to connect to different AEM Services based on environment variables. Overview; 1 - Content modeling; 2 - AEM Headless APIs and React; 3 - Complex. 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. Right now there is full support provided for React apps through SDK, however the model can be used using. URLs and routes. Level 1: Content Fragments and the AEM headless framework can be used to deliver AEM content to the SPA. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. ” Tutorial - Getting Started with AEM Headless and GraphQL. Understanding how to add properties and content to an existing component is a powerful technique to expand the capabilities of an AEM SPA Editor implementation. Previous page. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development) React example. Sign In. First select which model you wish to use to create your content fragment and tap or click Next. API Reference. 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. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. AEM Basics Summary. React is a popular JavaScript library for building user interfaces, known for its simplicity, reusability, and component-based architecture. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. AEM Headless APIs allow accessing AEM content from any client app. AEM Headless APIs and React. Developer. json 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. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. 4. In the future, AEM is planning to invest in the AEM GraphQL API. Recommended courses. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. These are then mapped to project specific AEM components using the MapTo, just like with the Text component. Let’s explore the WKND App, a simple React application that displays adventures from AEM using AEM Headless GraphQL APIs. AEM Headless Tutorial - React App by Adobe Docs Abstract Example applications are a great way to explore the headless capabilities of Adobe Experience. Authorization requirements. Learn how to use Headless principles with React 11/26/2019. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM Headless. 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. See moreAEM Headless APIs and React. Select the Content Fragment Model and select Properties form the top action bar. 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. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. , it can make more sense to consume something else in the front end, like React or Pacvue. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. AEM Headless as a Cloud Service. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. Courses. Populates the React Edible components with AEM’s content. View the source code on GitHub. Navigate to Tools > General > Content Fragment Models. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. js 14+. Anatomy of the React app. Locate the Layout Container editable area right above the Itinerary. Slider and richtext are two sample custom components available in the starter app. There are many ways to build the web; most of the ways can be implemented in AEM, which one works best is going to depend on your authors. The full code can be found on GitHub. Wrap the React app with an initialized ModelManager, and render the React app. The full code can be found on GitHub. New useEffect hooks can be created for each persisted query the React app uses. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Sling Models are annotation driven Java “POJO’s” (Plain Old Java Objects) that facilitate the mapping of data from the JCR to Java variables. The AEM Headless client, provided by. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. Opening the multi-line field in full screen mode enables additional formatting tools like Paragraph type, find and replace, spell check, and more. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. View next: Learn. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. If you are. View the source code on GitHub. 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. This article introduces the basic concepts of SPAs before leading the reader through a walkthrough of the SPA editor by using a simple SPA application to demonstrate basic content editing. Persisted queries. js implements custom React hooks. js application is invoked from the command line. Authorized requests to AEM GraphQL APIs they typically occur in the context of server-to-server apps, since other app types, such as single-page apps, mobile, or Web Components, typically do use authorization as it is difficult to secure the credentials . If you are. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to query adventure. X. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. AEM Headless as a Cloud Service. $ cd aem-guides-wknd-spa. React Aria. From the command line navigate into the aem-guides-wknd-spa. This session highlights the latest AEM developer tools for building frontend web applications with JavaScript, including Headless GraphQL clients, content fragment. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL. Commerce Layer supports multiple currencies, languages, and payment gateways, and. Under the hood, Atomic relies on the Coveo Headless library to interface with Coveo and handle the search application state. The AEM Headless SDK is available for various platforms: AEM 6. Create and publish a headless form using starter kit; Use a custom react library to render a headless form; Create Headless adaptive formsThe 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. You can't add SPA react component to normal AEM page OOTB. Option 1: Centralize the logic and broadcast to the necessary components for example by using React Context. Here, the AEM will act as a mere repository, exposing content as a service in REST/ GraphQL endpoints. The full code can be found on GitHub. By default, the starter kit uses Adobe’s Spectrum components. 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. Log in to AEM Author service as an Administrator. 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. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). ) that is curated by the. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. How to organize and AEM Headless project. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. npm module; Github project; Adobe documentation; For more details and code. You are now ready to move on to the next tutorial chapter, where you will learn how to create an AEM Headless React application that consumes the Content Fragments and GraphQL endpoint you created in this chapter. But what we’ll do is we’ll add a promoted adventure here at the top in yellow that will be injected via Adobe Target in the Experience Platform mobile SDK. AEM Local Development Access Tokens are used to accelerate the development of integrations with AEM as a Cloud Service that programmatically interacts with AEM Author or Publish services over HTTP. Enable Headless Adaptive Forms on AEM 6. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. They can also be used together with Multi-Site Management to. AEM must know where the remotely-rendered content can be retrieved. 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. 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 advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a client application. Now viewingOverview. AEM provides AEM React Editable Components v2, an Node. For convenience, this quick start connects the React app to AEM Author. Learn about the architecture of AEM Forms Headless Adaptive Forms and how it can help you quickly build forms for various platforms. 4 - Build a React app; Advanced Tutorial. It also provides an optional challenge to apply your AEM. JSON Exporter with Content Fragment Core Components. Understand how the Content Fragment Model. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. When this content is ready, it is replicated to the publish instance. Below is a summary of how the Next. To explore how to use the. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications. Topics: GraphQL API. To stop the starter kit, open your terminal, navigate to the react-starter-kit-aem-headless-forms, and press Ctrl-C (it’s the same on Windows, Mac & Linux). URLs and routes. AEM offers the flexibility to exploit the advantages of both models in one project. Getting Started with AEM Headless; Getting Started with AEM SPA Editor and React; Getting Started with AEM and Adobe Target; AEM 6. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. With a traditional AEM component, an HTL script is typically required. react. Sign In. AEM Gem session Search forms made easy with the AEM querybuilder for a detailed overview of the. Wrap the React app with an initialized ModelManager, and render the React app. 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. Prerequisites. AEM as a Cloud Service lets you capitalize on the AEM applications in a cloud-native way, so that you can: Scale your DevOps efforts with Cloud Manager: CI/CD framework, autoscaling, API connectivity, flexible deployment modes, code quality gates, service delivery transparency, and guided updates. Enable Headless Adaptive Forms on AEM 6. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The below video demonstrates some of the in-context editing features with. This EditableTitle React component wraps the Title React component, wrapping and decorating it to be editable in AEM SPA Editor. Below is a summary of how the Next. AEM Preview is intended for internal audiences, and not for the general delivery of 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. Once headless content has been. This example, loosely based on the AEM Headless React app, illustrates how AEM GraphQL API requests can be configured to connect to different AEM Services based on environment variables. 5 - Stack Overflow How to protect AEM pages and assets in headless. 5 has enhanced its digital customer experience services by providing better content personalization, content fragment enhancements, and easier authoring. Learn to use the delegation pattern for extending Sling Models and. AEM: GraphQL API. At this point, you should have completed the entire AEM Headless Developer Journey and understand the basics of headless delivery in AEM including an understanding of: The difference between headless and headful content delivery. Remote Renderer Configuration. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. REACT_APP_BASIC_AUTH_USER: the AEM username by the SPA to authenticate while retrieving AEM content. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. GraphQL queries. 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. AEM pages. To support AEM Content Service’s JSON export of Pages and Components, the Pages and Components must derive from AEM WCM Core Components. com. This involves structuring, and creating, your content for headless content delivery. Learn about deployment considerations for mobile AEM Headless deployments. js. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI. 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. Create a copy of the slider or richtext folder, and rename the copied folder to materialtextfield. Following AEM Headless best practices, the Next. Persisted queries. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The. Next, navigate to AEM to verify the updates and allow the Custom Component to be added to the SPA. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries.