Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Single page applications (SPAs) can offer compelling experiences for website users. html. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Add Adobe Target to your AEM web site. 4 stars. 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 Introduction and Walkthrough. When defining the style names available to AEM authors, it is best to: Name styles using a vocabulary understood by the authors. This component is able to be added to the SPA by content authors. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. 5. The. Documentation. json (AEM Content Services) * * @param {*} path the path being requested of the SPA * @param {*} req the request object * @returns true if the SPA request should be re-routed to AEM */ const toAEM = function. Last update: 2023-01-13. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. You can also define model properties, such as whether the workflow is transient or uses multiple resources. Setup your local development environment for AEM as a Cloud Service SDK or for older versions of AEM. This starts the author instance, running on port 4502 on the local computer. - I would like to learn about the differences, advantages and disadvantages of all these possible options at a general level, in order to have an overview of them. zip on my plain AEM 6. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. json (AEM Content Services) * * @param {*} path the path being requested of the SPA * @param {*} req the request object * @returns true if the SPA request should be re-routed to AEM */ const toAEM = function. However, none of your suggestions helped, but I managed to figure it out. Using an AEM dialog, authors can set the location for the weather to be displayed. If you need AEM support to get started with AEM 6. The AEM as a Cloud Service SDK is composed of the following artifacts: Quickstart Jar - The AEM runtime used for local development; Java™ API Jar - The Java™ Jar/Maven Dependency that exposes all allowed Java™ APIs that can be used to develop against AEM as a Cloud Service. Search. In today’s digital landscape, delivering engaging and dynamic web experiences is paramount. Configure the Step Properties as required; the properties available depend on the step type, there may also be several tabs available. Scale content creation, manage it efficiently, and publish faster with a cloud-native component content management system (CCMS), that empowers you to deliver consistent, engaging experiences across touchpoints. Documentation. Please subscribe the channel to get instant updates-- SPA (Single Page Application) - Crea. The model of the page is used to map and instantiate SPA components. This component is able to be added to the SPA by content authors. This is based on the AEM react SPA tutorial. cq. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. From the command line navigate into the aem-guides-wknd-spa. In a real-world scenario the development activities are. The. Overall rating. 385 likes · 4 talking about this · 875 were here. js) Remote SPAs with editable AEM content using AEM SPA Editor. Experience League. The AEM Developer Portal; AEM Headless tutorials - If you prefer to learn by doing and have existing knowledge of AEM, take our hands-on tutorials organized by API and framework, that explore creating and using applications. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. Wrap the React app with an initialized ModelManager, and render the React app. react project directory. json (AEM Content Services) * * @param {*} path the path being requested of the SPA * @param {*} req the request object * @returns true if the SPA request should be re-routed to AEM */ const toAEM = function. Ensure an instance of AEM is running locally on port 4502. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. Check out these additional journeys for more information on how AEM’s powerful features work together. We were able to achieve this by developing an ' aem-vue-editable-components ' library, similar to the 'aem-react-editable-components'. 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. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. frontend to ui. Experience world class terrain as we head north through redwood forests, state parks, the Columbia river and the Pacific ocean. 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. Create the Sling Model. Sign In. model. Known Issues. The React a. Populates the React Edible components with AEM’s content. 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. Learn how to create, manage, deliver, and optimize digital assets. Homebrew is a open-source package manager for macOS, Windows and Linux. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. The goal of this introduction and walkthrough is to demonstrate to an AEM developer why SPAs are relevant, how they generally work, how a SPA is handled by the AEM SPA Editor, and how it is different from a standard AEM application. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Single page applications (SPAs) can offer compelling experiences for website users. zip or greater aem-guides-wknd-graphql source code This tutorial. js support and also how to add a new React. Experience Manager tutorials. js with a fixed, but editable Title component. Verified employers. getState (); To see the current state of the data layer on an AEM site inspect the response. zip or greater aem-guides-wknd-graphql source code This tutorial. AEM Site Templates - Also known as Quick Site Creation, a low-code approach to generating an AEM Site by using a pre-defined Site Template. Next, deploy the updated SPA to AEM and update the template policies. Watch overview video Request demo. AEM 6. 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. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. Optionally, access to a public/private keypair used to encryption SAML payloads. Application Structure Including the dependencies and building your app as described previously will leave you with a working SPA package which you can upload to your AEM instance. 0 introduces Sling Model Exporter, an elegant way to export or serialize Sling Model objects into custom abstractions. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. Earlier I raised a question on Hello World Tutorial @Getting Started - 315808For publishing from AEM Sites using Edge Delivery Services, click here. 1K views 8 months. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn. Sling Models. The module enables a dynamic resolution of components when parsing the JSON model of the application. For experienced AEM users who need a short summary of the key AEM headless features, check out this quick start overview. SPA WKND Tutorial. day. 8+. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The React app should contain one. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. react. Paste the extraction key that was copied from CAM earlier into the Extraction key input field of Create Migration Set form. Locate the Layout Container editable area beneath the Title. This tells the AEM Project Archetype to bootstrap the project with a starter Angular code base to be used with the AEM SPA Editor. 2. 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 Editor. The SPA developers create SPA components which they map to AEM components. Populates the React Edible components with AEM’s content. 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. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. It has included some new and enhanced functionality, key customer fixes, high priority customer enhancements and general bug fixes oriented toward product stabilization. Select Edit from the mode-selector in the top right of the Page Editor. Similar to the AEM WKND Tutorial, this SPA-focused counterpart offers an end-to-end. Built with Adobe’s best practices and standards, Core Components provide a baseline set of functionality for any Sites. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). AEM offers the flexibility to exploit the advantages of both models in one project. The first step in organizing your assets is to create a logical folder structure: On the AEM welcome screen, click the Digital Assets link. Adobe Experience Manager (AEM) Assets is a digital asset management tool on AEM Platform that allows users to create, manage, and share their digital assets (images, videos, documents, and audio clips) in a web-based repository. 2. Requirements. Adobe provides a reference implementation called Core Components with a large set of components containing all the current best practices in regards to AEM development (SPA or non-SPA). The build will take around a minute and should end with the following message:Update Policies in AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. . 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. Tap the embedded AEM Forms SPA Container component in the sites page, and then tap on the action bar. It was a new product. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. Application Structure Including the dependencies and building your app as described previously will leave you with a working SPA package which you can upload to your AEM instance. You will also learn how to use out of the box AEM React Core Components. 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. Understanding Core Components. Authenticate the Adobe I/O CLI with the AEM as a Cloud. spa. This is the code companion for a series of tutorials designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). Start the tutorial with the AEM Project Archetype. With a traditional AEM component, an HTL script is typically required. react project directory. AEM provides AEM React Editable Components v2, an Node. Click to view larger image. The SPA Editor offers a comprehensive solution for. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Only expose style options and combinations that are allowed by brand standards. The walkthrough is based on standard AEM functionality and the sample WKND SPA. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Using an AEM dialog, authors can set the location for the weather to be displayed. Assets User Guide. . 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. Tutorials. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application. 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. adobe. Developer. 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. We can build projects for AEM with a SPA(Single Page Application) as frontend (can use either Angular or React). 0. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. Known Issues. $ mvn clean install -PautoInstallSinglePackage SPA Introduction and Walkthrough. Tap Home and select Edit from the top action bar. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Universal Editor Introduction. Learn how to create, manage, deliver, and optimize digital assets. Learn. 4+ and AEM 6. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development. When defining the style names available to AEM authors, it is best to: Name styles using a vocabulary understood by the authors. . npm module; Github project; Adobe documentation; For more details and code. Attend local and virtual events. Went through the SPA Editor Angular Tutorial and then looked into the Remote SPA Tutorial. 2 codebase. The walkthrough is based on standard AEM functionality and the sample WKND SPA. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. Using an AEM dialog, authors can set the location for the weather to be displayed. Build the project. So here is the more detailed explanation. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. 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. 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. api>2022. Locate the Layout Container editable area beneath the Title. The Dispatcher Tools, part of the AEM as a Cloud Service SDK, can be downloaded from a zip file at the Software Distribution portal. Map the SPA URLs to AEM Pages. 3. Make the most of your investment with our free learning and support platform, Adobe Experience League. Learn how to add editable fixed components to a remote SPA. 6+ Git macOS only prerequisites Xcode or Xcode command line tools aem-guides-wknd. 3. In Adobe Experience Platform Data Collection, create a Tag property and edit it to Add Rule. This tutorial is an introduction to SPA development to be used with AEM's SPA Editor JS SDK. Assets User Guide. 0. 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. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 5. We. 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. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. For publishing from AEM Sites using Edge Delivery Services, click here. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Apache Sling Models 1. 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. . . This component is able to be added to the SPA by content authors. Learn how to generate an Adobe Experience Manager (AEM) Maven project as a starting point for a React application integrated with the AEM SPA Editor. Walks through the implementation of a Single Page Application, written using React JS, that. The ImageComponent component is only visible in the webpack dev server. 1. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. jar file to install the Publish instance. The SPA is implemented. . You should also be able to identify, building blocks of AEM as a Cloud Service. Only expose style options and combinations that are allowed by brand standards. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. model. Steps to be followed; at an appropriate level of detail. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . sdk. Next, deploy the updated SPA to AEM and update the template policies. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. . Stop the webpack dev server. Now we have got our AEM up and running, and we have already set up AEM in Java in our last. Last update: 2023-04-03. AEM architecture plays a critical role in designing and structuring the underlying framework of the Adobe Experience Manager platform. Option 2: Share component states by using a state library such as NgRx. Looking for something specific? Find what you need in our vast collection of learning content. 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. 3. We will start off with a blank HTML template and add Vue from a CDN. Deploy the updated SPA to AEM to see the changes. Learn how to create a custom weather component to be used with the AEM SPA Editor. For publishing from AEM Sites using Edge Delivery Services, click here. AEM Headless SPA deployments. 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. Option 3: Leverage the object hierarchy by customizing and extending the container component. Getting Started with the AEM SPA Editor and React. ) package. Learn how to add editable components to dynamic routes in a remote SPA. Touch UI. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. This user guide contains videos and tutorials on the many features and capabilities of AEM Sites. touch index. Single page applications (SPAs) can offer compelling experiences for website users. The tutorial will extend the We. 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. The UI. Option 2: Share component states by using a state library such as NgRx. api> Previously, after project creation, it was like this: <aem. 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 . Here, we’ll walk you through Experience Manager capabilities such as content management (CMS), digital asset management (DAM), and digital enrollment. About The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. Additional. AEM as a Cloud Service, standardize the deployment architectures for all customers, with goal to completely free customers from architecture concentrations. model. Understand how to. The tutorial covers the end to end creation of the SPA and the integration with AEM. Sign In. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. . AEM's SPA Editor provides support for in-context editing of a Single Page Application or SPA. Understand how it can help content authors deliver exceptional experiences, increase their content velocity, and how provides a state-of-the-art. Difference between traditional client server architecture and single page application. SPA Introduction and Walkthrough. The OSGI configuration outlined in this document is sufficient for: Single-origin resource sharing on AEM Publish. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. SPA. Ashish23. For an overview of how a simple SPA in AEM is structured and how it works, see the getting started guide for both React and Angular. Hi! Thank you for fast answer. npm module; Github project; Adobe documentation; For more details and code. 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. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Single page applications (SPAs) can offer compelling experiences for website users. Option 1: Centralize the logic and broadcast to the necessary components for example, by using a util class as a pure object-oriented solution. 7767. In this video, we discuss three approaches for using AEM and Target, and help you understand what works best for your organization. Issue 2: I am facing the problem with Banner component from the tutorial: Extend a Core Component | Getting Started with the AEM SPA Editor and React | Adobe Experience Manag. Deploy SPA updates to AEM. 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. Adobe Experience Manager (AEM) 6. sdk. On this page. Option 3: Leverage the object hierarchy by customizing and extending the container component. Quick links. The paths to be re-routed at: * - Starts with /content (AEM content) * - Starts with /graphql (AEM graphQL endpoint) * - Ends with . Asset. These aspects include defining where. The tutorial implementation uses many powerful features of AEM. So the basic use case is really building out a website. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Wrap the React app with an initialized ModelManager, and render the React app. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. See Tutorials. 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 implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Update Policies in AEM. This tutorial explains, How to implement SPA in AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Reports in AEM Guides. js) Remote SPAs with editable AEM content using AEM SPA Editor. 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. Contribute to adobe/aem-react-spa development by creating an account on GitHub. Immerse yourself in SPA development with this multi-part tutorial. Last update: 2023-11-15. xml of the project was wrong. So the basic use case is really building out a website. 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. js) Remote SPAs with editable AEM content using AEM SPA Editor. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. Tutorials. Full service nail studio and beauty spa located in the heart of Oak Bay village. SOLVED AEM as a cloud service project creation. 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. Creation of AEM project using maven archetype generates AEM ui. See how-to content. Quick setup takes you directly to the end state of this tutorial. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. In the future,. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Thanks,. Competitive salary. How to map aem component and react component. Let’s start by creating an index. We are performing AEM to AEM as a cloud service upgrade and found in the BPA report "spa-project-core:spa. From the command line navigate into the aem-guides-wknd-spa. Stop the webpack dev server. 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. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Before you begin your own SPA project for AEM. Tap Home and select Edit from the top action bar. This article juxtaposes the traditional use-case. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning. Navigate to the root of the project, and deploy the project to AEM using your Maven skills: $ cd aem-guides-wknd-spa $ mvn clean install -PautoInstallSinglePackage A simple weather component is built. Get the project. The site will be implemented using: HTL. Once the deploy is completed, access your AEM author instance. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. 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 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. Developers using either React frameworks create a SPA and then map areas of the SPA to AEM components, allowing authors to use familiar AEM Sites editing. (FYI, the ContainerExporter interface is referenced in some comments within the BaseComponentExporter class created in the tutorial. English is the default language for the. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Learn. 20220616T174806Z-220500</aem. To create Dynamic Media Image Profiles: Select the Adobe Experience Manager logo and navigate to Tools > Assets > Image Profiles. 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. Option 1: Centralize the logic and broadcast to the necessary components for example by using React Context. Learn. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Any AEM project should use the AEM Project Archetype, which supports SPA projects using React or Angular and uses the SPA SDK. Application Structure Including the dependencies and building your app as described previously will leave you with a working SPA package which you can upload to your AEM instance. The following AEM documentation includes everything from essential guides for those new to the content management system (CMS) to videos, tutorials, and further learning resources to get the most out of AEM 6. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. To do this, they use the resource type (or path to the AEM component) as a unique key.