Tutorials. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Dynamic navigation is implemented using React Router and React Core Components. Documentation AEM 6. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. What is a Single Page Application (SPA)? SPA’s are the web pages that never/rarely reload when getting new information from the server. Attend local and virtual events. Documentation AEM AEM Tutorials AEM Headless Tutorial Bootstrap the Remote SPA for SPA Editor Bootstrap the Remote SPA for SPA Editor Before the editable areas can be added to the Remote SPA, it must be bootstrapped with the AEM SPA Editor JavaScript SDK, and a few other configurations. The build will take around a minute and should end with the following message: Experience Manager tutorials. This will allow us to code directly against the content created in AEM from earlier in the tutorial. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Adobe Experience Manager (AEM) is the leading experience management platform. This component is able to be added to the SPA by content authors. Security User. The. Documentation. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. Progress through the tutorial. The walkthrough is based on standard AEM functionality and the sample WKND SPA. Update Policies in AEM. First, a model interface for the component that extends the ContainerExporter interface was created. While unit testing code is a good practice for any code base, when using Cloud Manager it is important to take advantage. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . 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. The projects can be locally set up with the project templating tool AEM Maven Archetype for on premise or AEM as a Cloud Service installation. Learn. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. WKND SPA Implementation. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing. Latest Code All of the tutorial code can be found on GitHub. Hi, I was following Getting Started with the AEM SPA Editor - Hello World Tutorial @Getting Started with the AEM SPA Editor - Hello World Tutorial 1. This comprehensive guide explores the concepts, benefits, challenges, and best practices of. Learn how to create, manage, deliver, and optimize digital assets. The below video demonstrates some of the in-context editing features with. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Learn how to add editable fixed components to a remote SPA. Here we can can skip the itemPath property however. . Release Notes. Option 3: Leverage the object hierarchy by. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This component is able to be added to the SPA by content authors. Style organization best practices. This tutorial is an introduction to SPA development to be used with AEM's SPA Editor JS SDK. Reports in AEM Guides. Apache Sling is the framework for RESTful web-applications based on extensible content tree, like Java Content Repository AEM is built using Sling, it’s a web application framework, based on REST principles, that provide easy development of content-oriented application. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. Wrap the React app with an initialized ModelManager, and render the React app. The tutorial covers the end to end creation of the SPA and the integration with AEM. jar file to install the Publish instance. Adobe Experience Manager’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make client-side calls to AEM, both authenticated and unauthenticated, to fetch content or directly interact with AEM. The ImageComponent component is only visible in the webpack dev server. Adobe Experience. For publishing from AEM Sites using Edge Delivery Services, click here. 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. Option 3: Leverage the object hierarchy by customizing and extending the container component. The use of Redux alongside the. Hello and welcome everyone. Digital Asset Management link. 0:00 / 4:05 • Chapters AEM Single Page Application (SPA) AEM SPA #2 | How to implement SPA in AEM AEM GEEKS 6. Experience League. 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 . View. Using an AEM dialog, authors can set the location for the weather to be displayed. Check the Adobe Cloud Manager documentation on how to download, setup, and use the Adobe I/O CLI with the Cloud Manager CLI plugin. For example, the default Participant Step, present in a new workflow as Step 1:. See the NPM package @adobe/aem-spa-page-model-manager. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. This component is able to be added to the SPA by content authors. jar file to install the Publish instance. This user guide contains videos and tutorials helping you maximize your value from AEM. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Setup your local development environment for AEM as a Cloud Service SDK or for older versions of AEM. See Sync your. Initially, it will be in React but Angular is also planned (although it might be a good month later). The tutorial intended to illustrate how a Remote SPA, or a SPA running outside the context of AEM, can be updated to consume and deliver content authored in AEM. Went through the SPA Editor Angular Tutorial and then looked into the Remote SPA Tutorial. api> Previously, after project creation, it was like this: <aem. api>2022. . Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Trigger an Adobe Target call from Launch. The SPA Editor offers a comprehensive solution for supporting. 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. Q: “How is the GraphQL API for AEM different from Query Builder API?” A: “The AEM GraphQL API offers total control on the JSON output, and is an industry standard for querying content. (FYI, the ContainerExporter interface is referenced in some comments within the BaseComponentExporter class created in the tutorial. 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. Select Edit from the mode-selector in the top right of the Page Editor. Frontend module, WebPack is used to bundle JavaScript and transform front-end assets before distributing the output into the appropriate AEM client libraries of your project. Core Components. Different domains. Similar to the AEM WKND Tutorial, this SPA-focused counterpart offers an end-to-end example of building your. 0 introduces Sling Model Exporter, an elegant way to export or serialize Sling Model objects into custom abstractions. Option 2: Share component states by using a state library such as Redux. This guide provides an summary of how to get started with Experience Manager as a Cloud Service, including how to get access and important data protection information. SPA Editor Overview. Only expose style options and combinations that are allowed by brand standards. Using an AEM dialog, authors can set the location for the weather to be displayed. And in this video, we are going to learn about how we can create AEM Project using Archetype. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. 4+ and AEM 6. The ImageComponent component is only visible in the webpack dev server. See full list on experienceleague. Last update: 2023-04-03. Using an AEM dialog, authors can set the location for the weather to be displayed. Courses Tutorials Certification Events Instructor-led training View all learning options. We. Sites User Guide. 6. Wrap the React app with an initialized ModelManager, and render the React app. 4 stars. Integrate the SPA. Touch UI. 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. AEM as a Cloud Service, standardize the deployment architectures for all customers, with goal to completely free customers from architecture concentrations. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. Getting Started with the AEM SPA Editor and React. adobe. xml line that I have changed now: <aem. There are tutorials online from Adobe teaching basic and simple ways to setup a basic AEM SPA website, but I have not seen any real AEM SPA website's in live production. Last update: 2023-11-15. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. The SPA Editor offers a comprehensive solution for. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. With a traditional AEM component, an HTL script is typically required. This document provides an overview of the different models and describes the levels of SPA integration. The tutorial intended to illustrate how a Remote SPA, or a SPA running outside the context of AEM, can be updated to consume and deliver content authored in AEM. The latest code base is available as downloadable AEM Packages. Steps to be followed; at an appropriate level of detail. AEM Sites videos and tutorials. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. (FYI, the ContainerExporter interface is referenced in some comments within the BaseComponentExporter class created in the tutorial. This is the pom. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. 5. 0:00 / 38:08 AEM and Single Page Applications (SPAs) adaptTo Conference 1. Locate the Layout Container editable area beneath the Title. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Enter a profile name, and values for unsharp mask, crop, or swatch, or both. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Since the SPA renders the component, no HTL script is needed. 5 user guides. AEM Sites videos and tutorials. Developer. Once the deploy is completed, access your AEM author instance. About the tutorial The tutorial intended to illustrate how a Remote SPA, or a SPA running outside the context of AEM, can be updated to consume and deliver content authored in AEM. Push a data object on to the data layer by entering the following in the. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. You know, of course, we layer in advanced features to support personalization, analytics, social, headless, spa, you name it, basically everything you need to build a modern digital experience but at the. SPA Blueprint. Learn to use the delegation patter for extending Sling Models and features of Sling Resource. Dynamic navigation is implemented using React Router and React Core Components. AEM 6. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. 3. AEM provides AEM React Editable Components v2, an Node. Ensure that a fresh instance of Adobe Experience Manager, started in author mode, is running locally. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. . Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. It has included some new and enhanced functionality, key customer fixes, high priority customer enhancements and general bug fixes oriented toward product stabilization. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Adobe Experience Manager (AEM) is the leading experience management platform. Build a React JS app using GraphQL in a pure headless scenario. This user guide contains videos and tutorials on the many features and capabilities of AEM Sites. model. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). About. 0 authentication: Deployment Manager access to Cloud Manager. Next, deploy the updated SPA to AEM and update the template policies. 5 user guides. This demo will let you quickly create "React App" with AEM SPA Editor using maven aem-spa-project-archetype (tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 0. Experience Manager tutorials. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. They said -- Yes, we are working on a WKND style tutorial for the SPA editor [0]. zip on my plain AEM. We were able to achieve this by developing an ' aem-vue-editable-components ' library, similar to the 'aem-react-editable-components'. SPA WKND Tutorial; Getting Started Using React; Getting Started Using Angular; If you must adapt an existing SPA to use it in AEM, review the following documents: The RemotePage Component; Editing an External SPA within AEM; See below for additional resources that can take you deeper into SPA topics in AEM. The tutorial offers a deeper dive into AEM development. This user guide contains videos and tutorials on the many features and capabilities of AEM Sites. Editable Templates. Quick links. Community. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. react. Style organization best practices. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. This starts the author instance, running on port 4502 on the local computer. By leveraging AEM’s content management capabilities and SPA’s front-end development and dynamic content updates, organizations can engage their audience through immersive. Each item present in the model contains a :type field that exposes an AEM resource type. This user guide contains videos and tutorials on the many features and capabilities of AEM Assets. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. npm module; Github project; Adobe documentation; For more details and code. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. Full-time, temporary, and part-time jobs. Sign In. Deploy SPA updates to AEM. Learn. 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. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). So here is the more detailed explanation. For experienced AEM users who need a short summary of the key AEM headless features, check out this quick start overview. We are the essential source for environmental insights, enabling decisive action and positive outcomes in the face of. Single page applications (SPAs) can offer compelling experiences for website users. The React app should contain one. The DITA Online Conference. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 4, but got the following error:Adobe Experience Manager Sites, at its core is a platform for managing web content. api>20. Build the project. Using. Search and apply for the latest Adobe experience manager aem jobs in Victoria, BC. SPA Introduction and Walkthrough. After completing this video, you should be able to create AEM project using Archetypes. WKND SPA Project. 5-SNAPSHOT. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. On this page. Map the SPA URLs to AEM Pages. For the future reference, problem was that AEM version stated in main pom. Authenticate the Adobe I/O CLI with the AEM as a Cloud. This tutorial builds upon the WKND GraphQL App , a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide any in-context. Hybrid and SPA with AEM; SPA Introduction and Walkthrough; SPA WKND Tutorial; Getting Started using React; Implementing a React Component for SPA; Getting Started using Angular; SPA Deep Dives; Developing SPAs for AEM; SPA Editor. The SPA components must be in sync with the page model and be updated with any changes to. Use out of the box components and templates to quickly get a site up and running. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. The referenced KB was created to enable Adobe Experience Platform Launch integration with SPAs that don’t use the Adobe Experience Manager SPA Editor. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. zip on my plain AEM 6. Hi, I was following Getting Started with the AEM SPA Editor - Hello World Tutorial @Getting Started with the AEM SPA Editor - Hello World Tutorial 1. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. When running on Windows and generating the dispatcher configuration, you should be running in an elevated command prompt or the Windows Subsystem for Linux (see. Configure the Step Properties as required; the properties available depend on the step type, there may also be several tabs available. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Dynamic navigation is implemented using React Router and React Core Components. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. How to map aem component and react component. 0 is only supported to. Learn to use the delegation pattern for extending Sling Models and. Understand how to. Created for: Beginner. Immerse yourself in SPA development with this multi-part tutorial leading you through project setup, component mapping, front-end development tools, and application routing to implement your own SPA. From the command line navigate into the aem-guides-wknd-spa. Experience League. It is also responsible for syncing with the SPA to let it know when it has to re-render its components. You will also learn how to use out of the box AEM React Core Components. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. Author in-context a portion of a remotely hosted React application. This enables a dynamic resolution of components when parsing the JSON model of the. 5. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. 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. The SPA is implemented using: Maven AEM Project Archetype; Mavice Maven AEM Project Archetype; AEM SPA Editor; Core Components; Vue JS; Vue CLI; Estimate 1-2 hours to get through each part of the tutorial. 6. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Please subscribe the channel to get instant updates-- SPA (Single Page Application) - Crea. AEM architecture plays a critical role in designing and structuring the underlying framework of the Adobe Experience Manager platform. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Sign In. Wrap the React app with an initialized ModelManager, and render the React app. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. June 20, 2023 Denis Kovalev Development Introduction In today’s digital landscape, delivering engaging and dynamic web experiences is paramount. Developers want to be able to build sites using SPA frameworks and authors want to seamlessly edit content within AEM for a site built using such frameworks. Last update: 2023-09-26. react project directory. i18n Java™ package enables you to display localized strings in your UI. . SOLVED AEM as a cloud service project creation. Unzip the SDK, which bundles. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. js support and also how to add a new React. AEM Sites videos and tutorials. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Tap the embedded AEM Forms SPA Container component in the sites page, and then tap on the action bar. adobe. 5, or to overcome a specific challenge, the resources on this page will help. SPA Blueprint offers a deep dive into how the SPA SDK for AEM works in case you wish to implement SPAs in. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Introduction. 3. The model of the page is used to map and instantiate SPA components. Sign In. js with a fixed, but editable Title component. . Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Option 2: Share component states by using a state library such as NgRx. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. adobeDataLayer. AEM Core Components are a standard set components to be used with Adobe Experience Manager. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. AEM 6550 - Create a sample SPA React App using AEM SPA Editor by Sreekanth Choudry Nalabotu Abstract This tutorial on official adobe docs is an excellent guide for creating your first AEM SPA React App, however if you are looking for some quick steps, go through the following. Additional resources can be found on the AEM Headless Developer Portal. Learn. SPA WKND Tutorial. js) Remote SPAs with editable AEM content using AEM SPA Editor. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. zip on my plain AEM. Learn how to extend an existing Core 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. react project directory. The paths to be re-routed at: * - Starts with /content (AEM content) * - Starts with /graphql (AEM graphQL endpoint) * - Ends with . User. It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. js) Remote SPAs with editable AEM content using AEM SPA Editor. The tutorial implementation uses many powerful features of AEM. You know, of course, we layer in advanced features to support personalization, analytics, social, headless, spa, you name it, basically everything you need to build a modern digital experience but at the. All the supporting tools can be installed separately, Homebrew provides a convenient way to install and update a variety of development tools required for Experience Manager development. The goal for this multi-part tutorial is to teach a developer how to implement an Angular application to work with the SPA Editor feature of AEM. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. Modifications have been made to the project code in order to. api>2022. SPA. The tutorial covers the end to end creation of the SPA and the integration with AEM. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. 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. model. 48K subscribers 2. Next Steps. This tutorial used the latest AEM Project Archetype as a basis for the tutorial code. $ mvn clean install -PautoInstallSinglePackage The tutorial intended to illustrate how a Remote SPA, or a SPA running outside the context of AEM, can be updated to consume and deliver content authored in AEM. Add Adobe Target to your AEM web site. You can also define model properties, such as whether the workflow is transient or uses multiple resources. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. However, none of your suggestions helped, but I managed to figure it out. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application routing, see the WKND SPA Tutorials: Getting Started with the AEM SPA Editor and Angular; Getting Started with the AEM SPA Editor and ReactAn AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. They cover many various use cases and frameworks: pure headless, remote editor, AEM SPA Editor, GraphQL, Content Services. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Start the tutorial with the AEM Project Archetype. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand, the WKND. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. It encompasses components, layers, integration, scalability, content repository, authoring environment, publishing, and extensibility. 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. 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. 8+. Introduces the technologies of OSGi, JCR, Oak, and Sling as part of Adobe Experience Manager’s technology stack. The changes made to the Header are currently only visible through the webpack dev server. I was following Getting Started with the AEM SPA Editor - Hello World Tutorial @Getting Started with the AEM SPA Editor - Hello World Tutorial. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. js) Remote SPAs with editable AEM content using AEM SPA Editor. 8+. This guide describes how to create, manage, publish, and update digital forms. I have changed it with the right one which I have on my machine, and both issues are. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. Option 2: Share component states by using a state library such as NgRx. From the command line navigate into the aem-guides-wknd-spa. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Transcript. 7767. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. 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 Headless. Adobe Experience Manager Forms as a Cloud Service offers a cloud-native, Platform as a Service (PaaS) solution for businesses to create, manage, publish, and update complex digital forms while integrating submitted data with back-end processes, business rules, and saving data in. Confirm your updates with the tick. The referenced KB was created to enable Adobe Experience Platform Launch integration with SPAs that don’t use the Adobe Experience Manager SPA Editor. In the previous two chapters, we mapped editable component content from the SPA’s Home view to corresponding Remote SPA root page in AEM at /content/wknd. Additional ResourcesAEM GraphQL API with Content Fragments - Sample Content and Queries; Hybrid and SPA AEM Development. The. The. Immerse yourself in SPA development with this multi-part tutorial leading you through project setup, component mapping, front-end development tools, and application routing to implement your own SPA. Adobe Cloud Manager integrates unit test execution and code coverage reporting into its CI/CD pipeline to help encourage and promote the best practice of unit testing AEM code.