Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Access the Translation Configuration UI: AEM Start Menu > Tools > General > Translation Configuration. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. As Single-Page Application (SPA) make the overall visitor experience more interactive, they are gaining popularity, even for content-centric experiences. A simple weather component is built. NOTE. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js) Remote SPAs with editable AEM content using AEM SPA Editor. JSON Delivery in Experience Manager. In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM's SPA Editor framework. With the Bulk Editor, you can add, modify, delete, filter, and export the rows, save modifications, and import a set of rows. We believe it is beneficial for any developer involved in an AEM SPA Editor project to complete this tutorial. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. sdk. Click Create and in the dialog pop-up, click Open to open the page in the AEM SPA Editor. 0 or later is required to use the SPA server-side rendering features as described in this document. We are new to AEM and I'm trying to understand the pros and cons of using AEM v/s AEM SPA. Verify Page Content on 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. A simple weather component is built. The SPA Editor(Integrated SPA) is the recommended solution for projects that use a SPA framework (React or Angular) with AEM. messaging must be added to provide a communication channel between the SPA and the page editor. What you will build For AEM to load the Remote SPA in the SPA Editor, mappings between the SPA’s routes and the AEM Pages used to open and author content must be established. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. With a traditional AEM component, an HTL script is typically required. SPA Editor loads. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. 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. 4 SP2 release, Adobe has come up with ‘SPA Editor’ – supporting below capabilities: With SPA editor, Adobe has introduced a thin layer called SPA Editor JS SDK, which is a collection of open-source JavaScript libraries that provide a framework for allowing authors to edit the contents of a Single Page Application. For authoring AEM content for Edge Delivery Services, click. Created for: Beginner. A classic Hello World message. Experience LeagueLevel 1. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, and so on). Learn to use the delegation pattern for extending Sling Models. content subprojectLearn how to extend an existing Core Component to be used with the AEM SPA Editor. You can run the demo in a few minutes. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js with a fixed, but editable Title component. Next. 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. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. AEM WCM Components - Spa editor - React Core implementation. This tutorial explains. 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. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Dynamic navigation is implemented using Angular routes and added to an existing Header component. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. 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 allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. This component is able to be added to the SPA by content authors. The tutorial will extend the We. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. Initially, it will be in React but Angular is also planned (although it might be a good month later). 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. 0 it’s possible to only deliver content to specific. Mark as New; Follow; Mute; Subscribe to RSS Feed; Permalink; Print; Report; I've been working in the AEM industry for some years now. Courses. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). content subproject AEM SPA Model Manager is installed and initialized. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. By implementing specific interfaces, Sling Models provide the information necessary to the SPA. Documentation AEM GEMs events SPA Editor SDK Deep Dive - Part 2 - Angular. Use the withMappable helper to. 4 Service Pack 2, the SPA Editor feature lets you build a full single page application on top of AEM while retaining all of the editor features your content authors have come to know and love. Next Steps. 6. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. 8+. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that. messaging must be added to provide a communication channel. Some content is managed in AEM and some in an external system. The tutorial covers. Getting Started with the AEM SPA Editor and React. Too much customization would be required to use AEM in a hybrid approach. A simple weather component is built. The. @adobe/aem-react-editable-components; @adobe/aem-spa-component-mapping; @adobe/aem-spa-page-model-manager You can understand the flow of the interaction between the SPA and AEM by thinking of the SPA Editor as a mediator between the two. 4 SP2 and was enhanced in AEM 6. Using an AEM dialog, authors can set the location for the weather to be displayed. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The React app should contain one. Quick setup takes you directly to the end state of this tutorial. The SPA Editor brings the easy-to-use capabilities of the AEM Page Editor back to SPA built with JavaScript frameworks like React or Angular. This tutorial is an introduction to SPA development to be used with AEM's SPA Editor JS SDK. From the command line navigate into the aem-guides-wknd-spa. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. Enable CORS in development. Requirements. Repeat these steps for the users on your team that you would like to receive notifications. Understand how external SPAs can be integrated into AEM. Book online below or contact us directly via. js with a fixed, but editable Title component. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. SPA requests JSON content and renders components client-side. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Earlier I raised a question on Hello World Tutorial @Getting Started - 315808 A simple weather component is built. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. AEM 6. 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. Developers using the React framework create a SPA and then. react. Develop Single-Page Applications with React in AEM is a 2-day, instructor-led (classroom or virtual) course, formerly known as Getting Started with Single-Page App Editor v6 and is relevant for all deployment methods. js, SvelteKit, etc. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. 0. You will also learn how to use out of the box AEM React Core. Fluid A multi-part tutorial on how to develop for the AEM SPA Editor. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. AEM configurations are required to integrate the SPA with AEM SPA Editor. Map the SPA URLs to AEM Pages. The AEM SPA Editor allows front-end developers to create SPAs that can be integrated into an AEM site, allowing the content authors to edit the SPA content as easily as any other AEM content. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. familiar frameworks and tools the way they are used to. Configure AEM for SPA Editor. Hence difficult to manage. What is single page application. Adobe Experience Manager Gems is a series of technical deep dives delivered by Adobe experts. Objective. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. Why a SPA? By being faster, fluid, and more like a native application, a SPA becomes an attractive experience not only for the visitor of the. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The SPA Editor brings the easy-to-use capabilities of the AEM Page Editor back to SPA built with JavaScript frameworks like React or Angular. For more details, see activate a. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. The AEM SPA Editor uses AEM Content Services to deliver the entire content of the page as a JSON model. In the IDE, open the ui. Written by Suren Konathala. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. See LICENSE for more information. content subprojectThis tells the AEM Project Archetype to bootstrap the project with a starter Angular code base to be used with the AEM SPA Editor. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM. Not sure if you have already gone through this doc -- SPA Editor Overview This diagram explains that if you don't rely on existing/OOB core components/Sling Models/Sling Model Exporters and build custom components then you would need to wire each entity in a correct way either using OOB models/exporters or otherwise with custom. Components; Integration with AEM; Helpers. Benefits of using the AEM SPA Editor. Dynamic navigation is implemented using Angular routes and added to an existing Header component. Why a SPA? By being faster, fluid, and more like a native application, a SPA becomes an attractive experience not only for the visitor of the webpage, but. 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. Next, deploy the updated SPA to AEM and update the template policies. Walks through the implementation of a Single Page Application, written using React JS, that can be edited within Adobe Experience Manager. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. It allows front-end developers to develop such SPA like they are used to, while having non-technical authors to edit the content in-place. 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. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . Understanding how to extend an existing component is a powerful. Increased agility: The SPA Editor makes it easier for marketers to. This user guide contains videos and tutorials helping you maximize your value from AEM. Instructor-led training. Last update: 2023-09-26. By implementing specific interfaces, Sling Models provide the information necessary to the SPA. This page gives an overview of how SPA support is structured in AEM, how the SPA Editor works, and how the SPA framework and AEM keep in synch. Getting Started with AEM SPA Editor and React; Getting Started with AEM and Adobe Target; AEM 6. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM. Populates the React Edible components with AEM’s content. . authoring. g. Using Multiple SelectorsLearn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. If left relative, when the SPA is loaded in SPA Editor for authoring, these URLs default to use AEM’s host rather than the SPA, resulting in 404 requests as illustrated in the image below. Experience LeagueFor a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Next, deploy the updated SPA to AEM and update the template policies. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Tutorials. Here is the summary: Hybrid, SPA without SPA Editor framework. So, I would really appreciate if someone could guide me on how to add PWA features in AEM SPA editor using Angular or provide sample implementation so that it could help me setting up my environment. On this page. To take advantage of AEM SPA features, there are dependencies on the following three packages. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, and so on). Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . SPA Editor JSK SD has been introduced as a thin layer over the SPA editor. Wrap the React app with an initialized ModelManager, and render the React app. Core Tenants. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. For further information about how to oraganize yourself to develop SPAs for AEM see the article Developing SPAs for AEM . You can then use GraphQL with the SPA Editor. ; The Content Fragment is an instance of a Content Fragment Model that represents a logical. Please join us to learn more about the SPA Editor in this. In the IDE, open the ui. 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 to use React Router to navigate between different views of the SPA. 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. Tutorials. content subprojectPrerequisites. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Last update: 2023-10-03. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. $ mvn clean install . Developer. Solved: Hi All, I was trying to create a project structure for React and AEM. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. The delivery of the JSON data is delegated downward to each component (from page, to paragraph, to component, and so on). This document describes the recommended steps to upload a standalone SPA to an AEM instance, add editable sections of content, and enable authoring. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. The importance of this configuration is explored later. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Users can complete the tutorial using React or Angular frameworks. Create the Sling Model. NOTE. The AEM SPA Editor allows front-end developers to create SPAs that can be integrated into an AEM site, allowing the content authors to edit the SPA content as easily as any other AEM content. SPA Editor loads. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The tools provided are accessed from the various consoles and page editors. Dynamic navigation is implemented using React Router and React Core Components. 1. If left relative, when the SPA is loaded in SPA Editor for authoring, these URLs default to use AEM’s host rather than the SPA, resulting in 404 requests as illustrated in the image below. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. 4 SP2 release, Adobe has come up with ‘SPA Editor’ – supporting below capabilities: With SPA editor, Adobe has introduced a thin layer called SPA Editor JS SDK, which is a collection of open-source JavaScript libraries that provide a framework for allowing authors to edit the contents of a Single Page Application. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. 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. App uses React v16. The Page Editor’s tools and capabilities are accessed from the Page Editor’s UI toolbar. Here, you can skip the itemPath property. SPA Editor Overview; Getting Started with the AEM SPA Editor and Angular; Getting Started with the AEM SPA Editor and ReactBy using AEM SPA (Single Page Application) Editor, developers can easily build web sites using SPA Framework and authors can seamlessly edit content within AEM. Using an AEM dialog, authors can set the location for the weather to be displayed. Contributions are welcome! Read the Contributing Guide for more information. Create your first React SPA in AEM by Adobe Docs Abstract Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Also included are AEM WCM Components - React Core implementation and AEM WCM Components - Spa editor - React Core implementation. Only expose style combinations that have an effect. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. SPA. The central idea of SPAs in AEM is the idea of mapping SPA components to AEM components and updating the component when the content is modified (and conversely). js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component . Functionally, it operates in much the same way as SPA Editor, but the SPA server delivers the pages instead of AEM. Tutorials by framework. Build a React JS app using GraphQL in a pure headless scenario. Create the Sling Model. AEM SPA Model Manager is installed and initialized. For AEM to load the Remote SPA in the SPA Editor, mappings between the SPA’s routes and the AEM Pages used to open and author content must be established. The importance of this configuration is explored later. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. To resolve this issue, make a static resource hosted by the Remote SPA use absolute paths that include the Remote SPA’s origin. Update Policies in AEM. Next, deploy the updated SPA to AEM and update the template policies. This chapter takes a deeper-dive into the AEM JSON model API and how the JSON content exposed by an AEM component can be automatically injected into a React component as props. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. Wrap the React app with an initialized ModelManager, and render the React app. Together, a SPA hosted on a different domain can be made editable in AEM. Add the corresponding resourceType from the project in the component’s editConfig node. Less overlap. Learn to use Angular routing to navigate between different views. 0 or higher; Documentation. It basically refers to a collection of open-source Javascript libraries that offer frameworks allowing authors to make changes to SPA contents. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. Wrap the React app with an initialized ModelManager, and render the React app. OASIS Nails & Spa, Victoria, British Columbia. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. The Page Editor’s tools and capabilities are accessed from the Page Editor’s UI toolbar. content subproject The AEM SPA Editor uses AEM Content Services to deliver the entire content of the page as a JSON model. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. This document helps you understand how Single Page Applications are developed using the AEM SPA Editor framework. To wrap up, the Visual SPA Editor is available now in Magnolia 6. Developer. Browse content. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). 9/14/22 8:54:57 AM. JANUARY 2019 | The hybrid architecture of Adobe Experience Manager 10 Experience fragments An experience fragment combines one or more pieces of content with design and layout. Next Steps. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. This only works with the AEM SPA editor. The build will take around a minute and should end with the following message: The SPA Editor brings the easy-to-use capabilities of the AEM Page Editor back to SPA built with JavaScript frameworks like React or Angular. AEM’s GraphQL APIs for Content Fragments. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. js SPA integration to AEM. Create the Sling Model. Accommodating Existing SPAs. Walks through the implementation of a Single Page Application, written using React JS, that can be edited within Adobe Experience Manager. The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (for example, React or Angular). ) to render content from AEM Headless. Introduction. SPA Editor Overview. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Level 6 29-12-2022 15:50 PST. Open a new command line and check if the installation was performed properly by running this command: java -version. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Now the key feature of the AEM SPA Editor is that it supports in-context authoring. zip or greater aem-guides-wknd-graphql source code This tutorial. Happy Learning!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. It allows front-end developers to develop such SPA like they are used to, while having non-technical authors to edit the content in-place. SPA Editor Overview | Adobe Experience Manager This article gives a comprehensive overview of the SPA Editor and how it works included detailed workflows of interaction. Last update: 2023-11-17. It allows front-end developers to develop such SPA like they are used to, while having non-technical authors to edit the content in-place. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. Prerequisites This tutorial requires the following: AEM as a Cloud Service SDK Node. These are a set of re-usable UI components that map to. . If the SPA page component inherits from the. While the SPA codebase is managed outside of AEM, an AEM project is required to setup supporting configuration and content requirements. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. 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. 20220616T174806Z-220500</aem. The mapping can be done with Sling Mapping defined in /etc/map. Add the corresponding resourceType from the project in the component’s editConfig node. This provides a paragraph system that lets you position components within a responsive grid. 4. The PageModelManager is accessible by SPA project as a npm package. NOTE. Next Steps. Using an AEM dialog, authors can set the location for the weather to be displayed. Click Save and a welcome email is sent to the user you added. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. Understand the structure of a new AEM SPA Editor project built from a Maven archetype. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. AEM lets you have a responsive layout for your pages by using the Layout Container component. ayushn. Understand the SPA model routing options available when using the SPA Editor. A classic Hello World message. Content Fragments are used in AEM to create and manage content for the SPA. 0 or later is required to use the SPA server-side rendering features as described in this document. 1. The SPA is implemented. 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 following video highlights some of the top features of the Page Editor. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. Level 3: Embed and fully enable SPA in AEM. They can also be used together with Multi-Site Management to. It allows front-end developers to develop such SPA like they are used to, while having non-technical authors to edit the content in-place. They can also be used together with Multi-Site Management to. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Experience Fragments are not yet supported(6. The Spa Magnolia, in the heart of downtown Victoria is a full service luxury spa with professional, licensed practitioners including Registered Massage Therapists. The above modules make up the AEM SPA Editor JS SDK and provide the functionality to make it possible to map SPA Components to AEM Components. This module provides a React implementation for the containers in the AEM core components. Build the project. If left relative, when the SPA is loaded in SPA Editor for authoring, these URLs default to use AEM’s host rather than the SPA, resulting in 404 requests as illustrated in the image below. Contributions are welcome! Read the Contributing Guide for more information. I have followed the steps mentioned at this link SPA Editor Project | Getting Started with the AEM SPA Editor and Angular | Adobe Experience Manager. Learn to use React Router to navigate between. Create the Sling Model. This component is able to be added to the SPA by content authors. 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. This article presents an example of how to adapt a simple, existing React component to work with the AEM SPA Editor. In this session, you will have access to the. Start by creating the components that will make up the composite component, that is, components for the image and its text. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. js) Remote SPAs with editable AEM content using AEM SPA Editor. react project directory. 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 . 0 are build on top of the existing feature and allow authoring SPA hosted on a different domain. Understand the SPA model routing options available when using the SPA Editor. Learn how to add editable components to dynamic routes in a remote SPA. The layers provide sophisticated functionality for the entire page, as opposed to specific actions on an individual component.