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). 5 stars. In an organizational setup, you want to verify the overall completeness of your content before you push the documents for consumption by end users. Learn. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Hi! Thank you for fast answer. Overall rating. To connect AEM with a commerce solution by way of Adobe I/O CLI, follow these steps: Get the Adobe I/O CLI with the Cloud Manager plugin. 20220616T174806Z-220500</aem. Learn 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. This component is able to be added to the SPA by content authors. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. With so few reviews, your opinion of Pure Day Spa could be huge. The ComponentMapping module is provided as an NPM package to the front-end project. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Since the SPA renders the component, no HTL script is needed. Retail Journal app by adding a custom Hello World component. 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 a SPA using the React JS framework with AEM's SPA Editor. api> Previously, after project creation, it was like this: <aem. From the command line navigate into the aem-guides-wknd-spa. We. This is the pom. Topics: Developing View more on this topic. 0 or later is required to use the SPA server-side rendering features as described in this document. Single page applications (SPAs) can offer compelling experiences for website users. Stop the webpack dev server. The React a. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. 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. It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The build will take around a minute and should end with the following message:Introduction. Tap Home and select Edit from the top action bar. 0 introduces Sling Model Exporter, an elegant way to export or serialize Sling Model objects into custom abstractions. AEM 6. Create the Sling Model. 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. . Make the most of your investment with our free learning and support platform, Adobe Experience League. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. The changes made to the Header are currently only visible through the webpack dev server. This tutorial is an introduction to SPA development to be used with AEM's SPA Editor JS SDK. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Latest. In this optional continuation of the AEM Headless Developer Journey, you learn how Adobe Experience Manager (AEM) can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. The React App in this repository is used as part of the tutorial. Getting Started with the AEM SPA Editor and React. 48K subscribers 2. For publishing from AEM Sites using Edge Delivery Services, click here. The ImageComponent component is only visible in the webpack dev server. Double-click the aem-author-p4502. Frontend module was released with AEM Archetype 20. Update Policies in AEM. The tutorial implementation uses many powerful features of AEM. Select Edit from the mode-selector in the top right of the Page 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. 2. It encompasses components, layers, integration, scalability, content repository, authoring environment, publishing, and extensibility. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. 5. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Any AEM project should use the AEM Project Archetype, which supports SPA projects using React or Angular and uses the SPA SDK. 1. 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. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. 7767. AEM provides AEM React Editable Components v2, an Node. Tahoe Skiing Great weather, crystal clear lake water, and a relaxed California. . Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Experience League. Use out of the box components and templates to quickly get a site up and running. Unit Testing and Adobe Cloud Manager. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. For example, the default Participant Step, present in a new workflow as Step 1:. A SPA and AEM have different domains when they are accessed by end users from the different domain. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. Tutorials. Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. You should see information about the page and individual components. Hi Possibly I have expressed myself wrong since AEM is new to me. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. 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. Backward compatibility The project code for this tutorial was built for AEM as a Cloud Service. Learn how the Universal Editor enables what-you-see-is-what-you-get (WYSIWYG) editing of any headless and headful experience. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Create the Sling Model. The Open Weather API and React Open Weather components are used. Populates the React Edible components with AEM’s content. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. For publishing from AEM Sites using Edge Delivery Services, click here. 8+. The React app should contain one. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. The tutorial covers the end to end creation of the SPA and the integration with AEM. The build will take around a minute and should end with the following message:In this optional continuation of the AEM Headless Developer Journey, you learn how Adobe Experience Manager (AEM) can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. Introduces the technologies of OSGi, JCR, Oak, and Sling as part of Adobe Experience Manager’s technology stack. We will start off with a blank HTML template and add Vue from a CDN. WKND SPA Implementation. Adobe Experience Manager (AEM) Sites is a leading experience management platform. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Using an AEM dialog, authors can set the location for the weather to be displayed. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 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. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. js) Remote SPAs with editable AEM content using AEM SPA Editor. Understand how it can help content authors deliver exceptional experiences, increase their content velocity, and how provides a state-of-the-art. 0:00 / 38:08 AEM and Single Page Applications (SPAs) adaptTo Conference 1. See the NPM package @adobe/aem-spa-page-model-manager. Unlike traditional web applications that load a. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). Then, we’ll help you with advanced tools like personalization, asset automation. Adobe Experience Manager Sites, at its core is a platform for managing web content. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. SPA. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. cq. api> Previously, after project creation, it was like this: <aem. Learn. The Remote SPA Tutorial is in React, but I don't see any mention of limitations for Remote SPA and would like to use Angular. 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. In the future,. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. model. Deploy SPA updates to AEM. This comprehensive guide explores the concepts, benefits, challenges, and best practices of. Adobe Experience Manager Sites & More. 2 codebase. The use of Redux alongside the. Adobe Experience. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Different domains. 5. I have changed it with the right one which I have on my machine, and both issues are. frontend module based on. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. 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 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. sdk. These aspects include defining where. SPA Introduction and Walkthrough. This enables a dynamic resolution of components when parsing the JSON model of the. AEM 6. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. . 6. all:1. The tutorial will extend the We. 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. Documentation. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. 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. Security User. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. A simple weather component is built. Last update: 2023-03-29. For publishing from AEM Sites using Edge Delivery Services, click here. com 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 tools. Community. See how-to content. From documentation and support articles to Adobe Summit keynotes, it's all here. From the command line navigate into the aem-guides-wknd-spa. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. How to create react spa custom component. Check the Adobe Cloud Manager documentation on how to download, setup, and use the Adobe I/O CLI with the Cloud Manager CLI plugin. This user guide contains videos and tutorials on the many features and capabilities of AEM Sites. This component is able to be added to the SPA by content authors. cd vue-todo. api>2022. Requirements. Install Homebrew. This guide provides an overview of Experience Manager as a Cloud service, including an introduction, terminology, architecture, etc. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd . 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. The tutorial offers a deeper dive into AEM development. Full-time, temporary, and part-time jobs. 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. To do this, they use the resource type (or path to the AEM component) as a unique key. About The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. After you do this, the Migration set. This guide describes how to create, manage, publish, and update digital forms. 3. 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. How to use AEM React Editable Components v2. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. Topics: Core Components. 8+. 0. Populates the React Edible components with AEM’s content. i18n Java™ package enables you to display localized strings in your UI. Locate the Layout Container editable area beneath the Title. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. Add Adobe Target to your AEM web site. Sign In. AEM GraphQL API with Content Fragments - Sample Content and Queries; Hybrid and SPA AEM Development. Hello and welcome everyone. 2 stars. 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. Single page applications (SPAs) can offer compelling experiences for website users. Confirm the changes with Sync (editor toolbar) to generate the runtime model. Introduction. A SPA and AEM have different domains when they are accessed by end users from the different domain. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. Hi marcog1899 sorry for the delay, we pulled it because it was a little out of date. This tutorial is an introduction to SPA development to be used with AEM's SPA Editor JS SDK. Tap Home and select Edit from the top action bar. Using. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. Tap the embedded AEM Forms SPA Container component in the sites page, and then tap on the action bar. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. This course covers the major development tasks from creati. Experience League. Tip: Use a profile name that is specific to its intended purpose. SPA Introduction and Walkthrough. Getting Started with the AEM SPA Editor and React. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The changes made to the Header are currently only visible through the webpack dev server. xml of the project was wrong. 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. It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. . The completed SPA, deployed to AEM, can be dynamically authored with traditional in. 2. 0. Adobe Experience Manager (AEM) is the leading experience management platform. Retail is a reference implementation and sample content that illustrates the recommended way of setting up an online presence with Adobe Experience Manager. Dynamic navigation is implemented using React Router and React Core Components. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. 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. 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. For publishing from AEM Sites using Edge Delivery Services, click here. Created for: Beginner. Click Create Migration Set. adobe. The Re. xml line that I have changed now: <aem. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM 6. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. Quick links. To add an Image Profile, select Create. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Map the SPA URLs to AEM Pages. 2. 4+ and AEM 6. react project directory. 6. 2K views 4 years ago adaptTo () 2018 - Day 1 Recorded at. day. 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. react. 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. Let’s start by creating an index. Learn. - 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. If your pom version is not equal to the AEM version, the bundle won't startup and you would see an empty page. Developer. This is based on the AEM react SPA tutorial. In this tutorial, I will show how to use Adobe's archetype to create an AEM application with React. You create a workflow model to define the series of steps executed when a user starts the workflow. 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. Using an AEM dialog, authors can set the location for the weather to be displayed. Search and apply for the latest Adobe experience manager aem jobs in Victoria, BC. West Coast Cycling Join us for this once in a lifetime bike trip traveling from San Francisco to Portland cycling along the Pacific Coast. A SPA and AEM have different domains when they are accessed by end users from the different domain. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Learn how to add editable components to dynamic routes in a remote SPA. 6+ Git macOS only prerequisites Xcode or Xcode command line tools aem-guides-wknd. We are the essential source for environmental insights, enabling decisive action and positive outcomes in the face of. 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. . Verify Page Content on AEM. Additional. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. The tutorial covers the end to end creation of the SPA and the integration with AEM. jar file to install the Publish instance. For those reading this thread - this content is coming. 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. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development. Known Issues. 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. See the NPM package @adobe/aem-spa-page-model-manager. Different domains. all. Experience world class terrain as we head north through redwood forests, state parks, the Columbia river and the Pacific ocean. 3. html. You will also learn how to use out of the box AEM React Core Components. The tutorial will extend the We. SPA development implementation principles for AEM. Understanding Core Components. You will also learn how to use out of the box AEM React Core Components. Since the SPA renders the component, no HTL script is needed. A classic Hello World message. Creation of AEM project using maven archetype generates AEM ui. 4, but got the following error:Adobe Experience Manager Sites, at its core is a platform for managing web content. js) Remote SPAs with editable AEM content using AEM SPA Editor. 3. Learn how to map React components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. SPA Introduction and Walkthrough. Tutorials. 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. Option 2: Share component states by using a state library such as NgRx. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Getting Started with the AEM SPA Editor and React. Filter by rating. The UI. In today’s digital landscape, delivering engaging and dynamic web experiences is paramount. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. User. 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. The page is now. The model of the page is used to map and instantiate SPA components. The site will be implemented using: HTL. 2. A simple weather component is built. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. 20220616T174806Z-220500</aem. This content will be added to the AEM Weekend tutorial. 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). Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. Documentation. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Modifications have been made to the project code in order to. From the command line navigate into the aem-guides-wknd-spa. Reference Setup: Developers, Administrators with AEM experience: 20 minutes: Headless hands-on tutorial: If you prefer a hands-on approach and are familiar with AEM, this tutorial dives directly into. 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. 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. Additional. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Experience League. 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. This guide provides important information about the latest release of Experience Manager as a Cloud Service, including what’s new deprecated and removed features, and known issues. SPA Blueprint. 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 DITA Online Conference. 3 stars. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Ashish23. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. js component so. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. This is based on the AEM react SPA tutorial. 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. Option 1: Centralize the logic and broadcast to the necessary components for example by using a util class as a pure object-oriented solution. With a traditional AEM component, an HTL script is typically required. Quick links. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. 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 end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. A project template for AEM-based applications. First, a model interface for the component that extends the ContainerExporter interface was created. AEM's SPA Editor provides support for in-context editing of a Single Page Application or SPA. AEM architecture plays a critical role in designing and structuring the underlying framework of the Adobe Experience Manager platform. Scenario 1: Personalization using AEM Experience Fragment Offers. Single Page Application (SPA) is a web application architecture that provides a smooth and responsive user experience. Core Concepts. 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. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Source code for all front-end assets now resides within the UI. The SPA Editor offers a comprehensive solution for supporting SPAs. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Went through the SPA Editor Angular Tutorial and then looked into the Remote SPA Tutorial. There are two parallel versions of the tutorial: Create your first Angular SPA in AEM Create your first React SPA in AEM Latest Code If you just want to build the finished version of each project: React This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Double-click the aem-author-p4502. Navigate to the root of the project /aem-guides-wknd-spa and deploy the project to AEM using Maven: $ cd .