Wrap the React app with an initialized ModelManager, and render the React app. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. The options to use images within your documents are available only after configuring the AEM Assets sidekick plugin. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. 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. Example server-to-server app SPA Editor Overview. This article presents important questions to consider when. An end-to-end tutorial. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM; Populates the React Edible components with AEM’s content; Wrap the React app with an initialized ModelManager, and render the React app. Other micro services can then be also integrated into the SPA. Product functional tests are a set of stable HTTP integration tests (ITs) of core functionality in AEM such as authoring and replication tasks. 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. What is App Builder for AEM as a Cloud Service. The sidekick plugin for AEM Assets supports access to: AEM Assets as. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. The use of Android is largely unimportant, and the consuming mobile app. English is the default language for the. js with a fixed, but editable Title component. The full code can be found on GitHub. AEM Headless Web Component/JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Tutorials by framework. The app is reusable and portable. Use the withMappable helper to. 0 This blog discusses a clever technique of using SPA 2. js (JavaScript) AEM Headless SDK for Java™. This involves structuring, and creating, your content for headless content 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. Integration approach. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor framework. This guide uses the AEM as a Cloud Service SDK. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the. Developer. 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. cq. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access. Below is a summary of how the Next. The <Page> component has logic to dynamically create React components based on the. 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. On the configuration page, tap Create to create Adobe Acrobat Sign configuration in AEM Forms. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. This tutorial requires the following: AEM as a Cloud Service. A spa day is a fantastic treat to receive from your staff and I am so happy that you chose to spend your day with us at Willow Stream. apps and ui. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Sign In. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. The following list links to the relevant resources. The new Adobe Developer App Builder provides an extensibility framework for a developer to easily extend functionalities in AEM as a Cloud Service. So in this regard, AEM already was a Headless CMS. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. Integration approach. 5 has enhanced its digital customer experience services by providing better content personalization, content fragment enhancements, and easier authoring. Overview; 1 - Configure AEM;. js (JavaScript) AEM Headless SDK for. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Front end developer has full control over the app. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. The use of AEM Preview is optional, based on the desired workflow. The build will take around a minute and should end with the following message: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. Congratulations, you have updated the SPA and explored the integration with AEM! You now know two different approaches for developing the SPA against the AEM JSON model API using a webpack dev server. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible. Digital asset management is a process for storing, organizing, and using multimedia brand assets like videos, audio files, photos, animations, and other creative files, marketing. There are different tools in AEM available depending on what integration level you choose. Level 1: Content Fragments. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. AEM Basics. Remote Content Renderer. Overview; 1 - Configure AEM;. infinity. AEM Headless as a Cloud Service. Persisted queries. Create the text component in your AEM project. AEM Headless applications support integrated authoring preview. Next Steps. Using a REST API introduce challenges: The SPA gains the ability to be authored in AEM, but still be delivered as an SPA. 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. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. The. Author in-context a portion of a remotely hosted React application. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. The ui. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). How to map aem component and react component. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Prerequisites. SPA Editor Overview. com Integrate a SPA Last update: 2022-10-26 Topics: SPA Editor Created for: Beginner Developer Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. js app uses AEM GraphQL persisted queries to query adventure data. This server-side Node. Headless AEM. $ cd aem-guides-wknd-spa. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Learn how to use Adobe Experience Manager (AEM) as a Headless CMS (Content Management System), with features such as Content Fragment. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Learn how to add editable fixed components to a remote SPA. The full code can be found on GitHub. Following AEM Headless best practices, the Next. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Usually, it relies on invalidation techniques that ensure that any content changed in AEM is properly updated in the Dispatcher. The tutorial explores token-based authentication using AEM Assets HTTP APIs but the same concepts and approaches are applicable to apps interacting with AEM Headless GraphQL APIs. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. frontend. Persisted queries. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Unzip the download and copy the Quickstart jar ( aem-sdk-quickstart-XXX. The walkthrough is based on standard AEM functionality and the sample WKND SPA Project app. apps and ui. The Android Mobile App. Integration approach. With a traditional AEM component, an HTL script is typically required. (SPA), progressive web app (PWA), web shop, or other service external to AEM. 0 can enable direct in-content editing for specific areas or snippets in the app. Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component;. frontend. Two modules were created as part of the AEM project: ui. Click Tools > Assets > Connected Assets Configuration and provide the following values: A Title of the configuration. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. The JSON content is then consumed by the single-page app, which has been integrated with the AEM JS SDK. Persisted queries. With a traditional AEM component, an HTL script is typically required. Following AEM Headless best practices, the Next. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. I'd like to use those same React components to feed the AEM Experience Fragment authoring experience, instead of having to rebuild each React component as an HTL template within AEM -- it's too much overhead to maintain a. This tutorial uses a simple Node. 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. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. You will also collaborate with our internal partners, Solution Consultants and. 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. Persisted queries. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. This document helps you understand AEM Headless in the context of your own project. The common use case for server-to-server AEM Headless apps is to sync Content Fragment data from AEM into other systems, however this application is intentionally. Dynamic navigation is implemented using React Router and React Core Components. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. SPAs can be enabled with flexible levels of integration within AEM including SPAs developed and maintained outside of AEM. The. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. In the Redirect URL box, add the URL copied in a previous step (Step 8) and click Save. The full code can be found on GitHub. 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. If you are not familiar with fluid grids, see the Introduction to Fluid Grids section at the bottom of this page. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. You will educate customers of any / all integration options including APIs - both native and custom. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the context of any. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. Prerequisites. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. AEM Headless APIs allow accessing AEM content from any. After reading you should: Understand the basics of AEM’s headless features. Persisted queries. The ImageComponent component is only visible in the webpack dev server. Objects. Developer. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The AEM Project contains configuration and content that must be deployed to AEM. 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. Define the trigger that will start the pipeline. 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. js v18 Java™ 11 Maven 3. Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component;. 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. To verify that the page can be edited, follow the same steps in the section Verify Editing of Text Content on 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. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. This component is able to be added to the SPA by content authors. WKND App project is the SPA to be integrated with AEM’s SPA Editor Latest code The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. 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. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. js app uses AEM GraphQL persisted queries to query adventure data. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. In the Developer Console you can also click the Environments link in the breadcrumbs above. Experience League. Prerequisites. frontend module is a webpack project that contains all of the SPA source code. Two modules were created as part of the AEM project: ui. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The Story So FarThis 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. On this page. Implementing the Integration Levels. Stop the webpack dev server and from the root of the project, deploy the changes to AEM using your Maven skills: $ cd aem-guides-wknd-spa $ mvn clean install . Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. Headless mode is excellent if you prefer content to be delivered as an API and content editing is more form. Developers using the React framework create a SPA and then map areas of the SPA to AEM components, allowing authors to use familiar AEM Sites editing tools. Sign In. js application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. SPAs can be enabled with flexible levels of integration within AEM including SPAs developed and maintained outside of AEM. Create Azure storage configuration. Populates the React Edible components with AEM’s content. It also provides an optional challenge to apply your AEM. This guide uses the AEM as a Cloud Service SDK. The full code can be found on GitHub. Take a look: SPA Editor 2. They can be used to access structured data, including texts, numbers, and dates, amongst others. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. The full code can be found on GitHub. 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. Below is a summary of how the Next. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. The React WKND App is used to explore how a personalized Target. Persisted queries. This pattern can be used in any. AEM Headless Web Component /JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. Integration approach. A majority of the SPA. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Learn how to create a SPA using the React JS framework with AEM's SPA Editor. The full code can be found on GitHub. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. 4. 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. Next Steps 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. Don’t worry - this grid system is only applicable to the editable containers, and you can use your grid system of choice to drive the layout of the rest of your SPA. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. I have an angular SPA app that we want to render in AEM dynamically. The ui. 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. 6+ Git aem-guides-wknd. js (JavaScript) AEM Headless SDK for. The AEM Project contains configuration and content that must be deployed to AEM. Navigate to Tools > Cloud Services > Adobe Acrobat Sign and open the configuration container you created in the previous step. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). With a traditional AEM component, an HTL script is typically required. Developer. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Wrap the React app with an initialized ModelManager, and render the React app. Following AEM Headless best practices, the Next. js. Learn to use the delegation patter for extending Sling Models and features of Sling Resource. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 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. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Depending on the client and how it is deployed, AEM Headless deployments have different considerations. If it is possible that I can render my app dynamic content in AEM using WebAPI. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend Adobe Experience Manager. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. This feature is core to the AEM Dispatcher caching strategy. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. The common use case for server-to-server AEM Headless apps is to sync Content Fragment data from AEM into other systems, however this application is intentionally. Overview; 1 - Configure AEM;. Experience LeagueIn the previous chapter, you created and updated persisted queries using GraphiQL Explorer. apps and ui. Next page. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. @adobe/aem-spa-page-model-manager: provides the API for retrieving content from AEM. Congratulations! You’ve successfully updated the React app to integrate with AEM Headless APIs using the AEM Headless SDK! Next, let’s create a more complex Image List component that dynamically renders referenced Content Fragments from AEM. From the command line navigate into the aem-guides-wknd-spa. Two modules were created as part of the AEM project: ui. Tap the ellipsis next to the environment in the Environments section, and select Developer Console. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. The examples that follow demonstrate how to obtain and use the class objects in code. Get started by checking out the next article: Learn about. View the source code on GitHub. SPA application will provide some of the benefits like. React App. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Browse the following tutorials based on the technology used. 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. If it is possible that I can render my app dynamic content in AEM using WebAPI. Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. vaibhavtiwari260. frontend. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the image, so change the. Experience League. Map the SPA URLs to AEM Pages. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. apps and ui. We can build projects for AEM with a SPA(Single Page Application) as frontend (can use either Angular or React). The SPA Editor offers a comprehensive solution for supporting SPAs. Content Fragments and Experience Fragments are different features within AEM:. Lastly, at the top of the stack, is the AEM SPA Editor. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. js app. 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. react. js app uses AEM GraphQL persisted queries to query adventure data. Don’t worry - this grid system is only applicable to the editable containers, and you can use your grid system of choice to drive the layout of the rest of your SPA. The following tools should be installed locally: JDK 11;. Documentation AEM AEM Tutorials AEM Headless Tutorial Extend a Core Component Learn how to extend an existing Core Component to be used with the AEM. Locate the Layout Container editable area beneath the Title. First, review AEM’s SPA npm dependencies for the React project, and the install them. 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. Two modules were created as part of the AEM project: ui. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Experience League. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . js (JavaScript) AEM Headless SDK for Java™. From AEM perspective, 1. Know the prerequisites for using AEM’s headless features. See the Sites documentation, Content Fragments - Authoring, for details of the new editor (primarily accessed from the Content Fragments console). Persisted queries. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. AEM Headless as a Cloud Service. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. Provide a Title and a Name for your configuration. The two experiences sit side-by-side, share content through a headless integration and co-deliver to the glass. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. AEM Headless as a Cloud Service. A majority of the SPA. The full code can be found on GitHub. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The page is now editable on AEM with a. Learn how to add editable components to dynamic routes in a remote SPA. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. A majority of the SPA. 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 SPA is compatible with the template editor. It is simple to create a configuration in AEM using the Configuration Browser. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Following AEM Headless best practices, the Next. Edit the WKND SPA Project app in AEM. frontend. Select Save & Close. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM; Populates the React Edible components with AEM’s content; Wrap the React app with an initialized ModelManager, and render the React app. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the. To manage groups in AEM, navigate to Tools > Security > Groups. View the source code on GitHub.