The SPA Editor offers a comprehensive solution for supporting. For example: AEM is accessed via: SPA is accessed via Since AEM and the SPA are accessed from different domains, web browsers enforce security policies such as cross. The walkthrough is based on standard AEM functionality and the sample WKND SPA. Introduces the technologies of OSGi, JCR, Oak, and Sling as part of Adobe Experience Manager’s technology stack. The use of Homebrew is optional, but recommended. ComponentMapping Module. The SPA is implemented. For further details about the dynamic model to component mapping. Dynamic navigation is implemented using React Router and React Core Components. The below video demonstrates some of the in-context editing features with. From the command line navigate into the aem-guides-wknd-spa. This user guide contains videos and tutorials on the many features and capabilities of AEM Assets. Start your review today. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. 2. In the future, AEM is planning to invest in the AEM GraphQL API. Find out how AEM can transform your business. Modifications have been made to the project code in order to. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. 5. zip or greater aem-guides-wknd-graphql source code This tutorial. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Deploy SPA updates to AEM. This enables a dynamic resolution of components when parsing the JSON model of the. After completing this video, you should be able to create AEM project using Archetypes. Learn how to add editable fixed components to a remote SPA. Latest Code All of the tutorial code can be found on GitHub. Understanding how to extend an existing component is a powerful technique. 4 stars. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Supports React only)? Any references to look at? Basically want to separate the SPA. Any new configuration available in that new Dispatcher Tools version can be used to deploy to Cloud environments running that version of AEM in the Cloud or higher. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. Build the project. Hybrid and SPA AEM Development. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. day. For publishing from AEM Sites using Edge Delivery Services, click here. 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. Learn how to create a custom weather component to be used with the AEM SPA Editor. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. I have changed it with the right one which I have on my machine, and both issues are. See the NPM package @adobe/aem-spa-page-model-manager. 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. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. The first step in organizing your assets is to create a logical folder structure: On the AEM welcome screen, click the Digital Assets link. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Single page applications (SPAs) can offer compelling experiences for website users. AEM Sites videos and tutorials. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. For publishing from AEM Sites using Edge Delivery Services, click here. Follow the readme instructions to create an AEM SPA editor archetype project: mvn clean install archetype:update-local-catalog mvn archetype:crawl mvn archetype:generate -DarchetypeCatalog=internal -DarchetypeGroupId=com. So the basic use case is really building out a website. Different domains. Reports in AEM Guides. 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. Experience world class terrain as we head north through redwood forests, state parks, the Columbia river and the Pacific ocean. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. xml line that I have changed now: <aem. Users can complete the tutorial using React or Angular frameworks. 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. 5-SNAPSHOT. Went through the SPA Editor Angular Tutorial and then looked into the Remote SPA Tutorial. What is single page application. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Adobe Experience Manager Sites & More. Single page applications (SPAs) can offer compelling experiences for website users. Contribute to adobe/aem-react-spa development by creating an account on GitHub. It has included some new and enhanced functionality, key customer fixes, high priority customer enhancements and general bug fixes oriented toward product stabilization. Tap Home and select Edit from the top action bar. 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. 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 user guide contains videos and tutorials helping you maximize your value from AEM. 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. Create your first React SPA in AEM by Adobe Abstract Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. 2 stars. cq. On this page. Only expose style combinations that have an effect. . 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. 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. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. AEM's SPA Editor provides support for in-context editing of a Single Page Application or SPA. See the NPM package @adobe/aem-spa-page-model-manager. Understanding these key concepts enables organizations to. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. AEM 6. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. Browse the following tutorials based on the technology used. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. Solved: Hi all, I want to build a sample AEM SPA Editor application. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. The following are required when setting up SAML 2. frontend to ui. This component is able to be added to the SPA by content authors. To add an authorable page in the SPA, follow the same steps in the section Add Authorable Components to the Page. Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. . In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. 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. Configure the Step Properties as required; the properties available depend on the step type, there may also be several tabs available. 2. For experienced AEM users who need a short summary of the key AEM headless features, check out this quick start overview. Unlike traditional web applications that load a. . The React app will be developed and designed to be deployed with AEM's SPA Editor, which maps React components to AEM components. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. These aspects include defining where. Then, we will create one sample component called. SPA Editor Overview. react project directory. Single page applications (SPAs) can offer compelling experiences for website users. 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. 5. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Using an AEM dialog, authors can set the location for the weather to be displayed. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. It is also responsible for syncing with the SPA to let it know when it has to re-render its components. (FYI, the ContainerExporter interface is referenced in some comments within the BaseComponentExporter class created in the tutorial. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Double-click the aem-author-p4502. sdk. Tip: Use a profile name that is specific to its intended purpose. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. It has included some new and enhanced functionality, key customer fixes, high priority customer enhancements and general bug fixes oriented toward product stabilization. Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). The module enables a dynamic resolution of components when parsing the JSON model of the application. 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. Scenario 1: Personalization using AEM Experience Fragment Offers. AEM 6. Last update: 2023-11-06. 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 to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. To do this, they use the resource type (or path to the AEM component) as a unique key. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. Open a terminal and stop the webpack dev server if started. This component is able to be added to the SPA by content authors. Using an AEM dialog, authors can set the location for the weather to be displayed. 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. Hi Possibly I have expressed myself wrong since AEM is new to me. We. Looking for a hands-on. Explore AEM’s GraphQL capabilities by building out a React App that consumes Content. . We are performing AEM to AEM as a cloud service upgrade and found in the BPA report "spa-project-core:spa. model. 5-SNAPSHOT. Experience Manager tutorials. The tutorial covers the end to end creation of the SPA and the integration with AEM. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Universal Editor Introduction. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. We were able to achieve this by developing an ' aem-vue-editable-components ' library, similar to the 'aem-react-editable-components'. Optionally, access to a public/private keypair used to encryption SAML payloads. Additional custom selectors can be defined and used as part of an SPA developed for the AEM SPA SDK. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. The ImageComponent component is only visible in the webpack dev server. 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 . The changes made to the Header are currently only visible through the webpack dev server. Slimmest example. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. Using an AEM dialog, authors can set the location for the weather to be displayed. Map the SPA URLs to AEM Pages. Progress through the tutorial. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development. Populates the React Edible components with AEM’s content. Courses Tutorials Certification Events Instructor-led training View all learning options. 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. 0 introduces Sling Model Exporter, an elegant way to export or serialize Sling Model objects into custom abstractions. 5 stars. api>20. Known Issues. Core Concepts. The React app should contain one. From documentation and support articles to Adobe Summit keynotes, it's all here. 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. Using an AEM dialog, authors can set the location for the weather to be displayed. 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. Adobe Experience Manager (AEM) is the leading experience management platform. Confirm the changes with Sync (editor toolbar) to generate the runtime model. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. 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 <Page> component has logic to dynamically create React components based on the. Map the SPA URLs to AEM Pages. Sign In. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Understand how to. SPA. June 20, 2023 Denis Kovalev Development Introduction In today’s digital landscape, delivering engaging and dynamic web experiences is paramount. The Edit AEM Forms SPA Container dialog opens. About. 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. The UI. 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. The OSGI configuration outlined in this document is sufficient for: Single-origin resource sharing on AEM Publish. Latest. After installing the latest version of the Content Transfer Tool on your source Adobe Experience Manager instance, go to Operations - Content Migration. SPA Introduction and Walkthrough. Single page applications (SPAs) can offer compelling experiences for website users. Using an AEM dialog, authors can set the location for the weather to be displayed. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Component mapping SPA component to AEM componentA simple weather component will be built. The tutorial offers a deeper dive into AEM development. 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. After completing this video, you should be able to explain architecture of AEM as a Cloud Service. Looking for something specific? Find what you need in our vast collection of learning content. Administrator access to the IDP. 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. For publishing from AEM Sites using Edge Delivery Services, click here. Since the SPA renders the component, no HTL script is needed. The page is now. The paths to be re-routed at: * - Starts with /content (AEM content) * - Starts with /graphql (AEM graphQL endpoint) * - Ends with . Dynamic Model to Component Mapping for SPAs explains the dynamic model to component mapping and how it works within SPAs in AEM. Contribute to adobe/aem-react-spa development by creating an account on GitHub. Populates the React Edible components with AEM’s content. In a real-world scenario the development activities are. (FYI, the ContainerExporter interface is referenced in some comments within the BaseComponentExporter class created in the tutorial. The Dispatcher Tools, part of the AEM as a Cloud Service SDK, can be downloaded from a zip file at the Software Distribution portal. 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. Option 2: Share component states by using a state library such as NgRx. $ cd aem-guides-wknd-spa. Adobe Experience Manager’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make client-side calls to AEM, both authenticated and unauthenticated, to fetch content or directly interact with AEM. 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. 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. . cq. Click to view larger image. Option 3: Leverage the object hierarchy by customizing and extending the container component. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. api>2022. SPA Blueprint offers a deep dive into how the SPA SDK for AEM works in case you want to implement SPAs in. 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. For publishing from AEM Sites using Edge Delivery Services, click here. AEM Sites videos and tutorials. In Adobe Experience Platform Data Collection, create a Tag property and edit it to Add Rule. 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. SPA Editor Overview goes into more depth into the communication model between AEM and the SPA. This tutorial explains. Tutorials. Avai. A collection of videos and tutorials for Adobe Experience Manager Sites. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Last update: 2023-04-20. 3 stars. sdk. 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. Use out of the box components and templates to quickly get a site up and running. Security User. Each item present in the model contains a :type field that exposes an AEM resource type. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. Created for: Beginner. You know, of course, we layer in advanced features to support personalization, analytics, social, headless, spa, you name it, basically everything you need to build a modern digital experience but at the. js component so. Learn how to create a SPA using the React JS framework with AEM's 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 framework. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. From the command line terminal verify that. SOLVED AEM as a cloud service project creation. AEM provides AEM React Editable Components v2, an Node. And in this video, we are going to learn about how we can create AEM Project using Archetype. Editable Templates. Sites User Guide. 4. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. If your pom version is not equal to the AEM version, the bundle won't startup and you would see an empty page. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Tap Home and select Edit from the top action bar. Paste the extraction key that was copied from CAM earlier into the Extraction key input field of Create Migration Set form. Search. 2. 3 or Adobe Experience Manager 6. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. The site will be implemented using: HTL. An end-to-end tutorial illustrating how to build-out and expose content using AEM's GraphQL APIs and consumed by an external app, in a headless CMS scenario. Prerequisites This tutorial requires the following: AEM as a Cloud Service SDK Node. In the toolbar, click New, and choose New Folder to. Requirements. sdk. 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. This is the pom. Option 2: Share component states by using a state library such as NgRx. Sign In. SPA. The Re. js SPA integration to AEM. Next, deploy the updated SPA to AEM and update the template policies. The SPA components must be in sync with the page model and be updated with any changes to. Asset. Retail Journal app by adding a custom Hello World component. Last update: 2023-11-15. The use of Redux alongside the. The use of Redux alongside the. 8+. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Experience League. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. This component is able to be added to the SPA by content authors. Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. Provides important information about the latest release of AEM, including what’s new, supported platforms, deprecated and removed features, and known issues. Open your page in the editor and verify that it behaves as expected. Option 3: Leverage the object hierarchy by. 5. Adobe Experience Manager (AEM) Sites is a leading experience management platform. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Learn to use modern front. Created for: Beginner. Understanding how to add properties and content to an existing component is a powerful technique to expand the. Watch overview video Request demo. Most activities in the tutorial focus on JavaScript development, however critical aspects are covered that revolve around AEM. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Ashish23. 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 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. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. Using. #AdobeExperienceManager #aem #aemdevelopmentWhat is Adobe Experience Manager(AEM)Most of the time beginners will have this question what is Adobe Experience. Option 3: Leverage the object hierarchy by customizing and extending the container component. The tutorial offers a deeper dive into AEM development. SAML 2. 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. Ensure that a fresh instance of Adobe Experience Manager, started in author mode, is running locally. However, none of your suggestions helped, but I managed to figure it out. Stop the webpack dev server. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Experience League. Single page applications (SPAs) can offer compelling experiences for website users. This starts the author instance, running on port 4502 on the local computer. AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. Learn. Option 3: Leverage the object hierarchy by customizing and extending the container component. For publishing from AEM Sites using Edge Delivery Services, click here. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. 16" is not compatible because it contains both mutable and immutable content which will cause problems during deployment. all. ) package. Touch UI. I did not follow this tutorial step by step, but tried to install the Finished Package END-we-retail-journal-all-0. Any AEM project should leverage the AEM Project Archetype, which supports SPA projects using React or Angular and leverages the SPA SDK. This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand, the WKND. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. SPA Blueprint offers a deep dive into how the SPA SDK for AEM works in case you wish to implement SPAs in AEM for a framework other. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application. react. react project directory. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. How to create react spa component. This user guide contains videos and tutorials helping you maximize your value from AEM. js with a fixed, but editable Title component. . Slimmest example. Ensure an instance of AEM is running locally on port 4502. Developer. Select the correct front-end module in the front-end panel. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Learn how to extend an existing Core Component to be used with the AEM SPA Editor. Getting Started with the AEM SPA Editor and React. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. 3 is the upgraded release to the Adobe Experience Manager 6. xml of the project was wrong. WKND SPA Project is a step-by step tutorial implementing a simple SPA project in AEM. Verified employers. 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. Hello and welcome everyone. model. jar file to install the Publish instance. Last update: 2023-11-15. ) package. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. Understand how to author with, and administer, Experience Manager Sites as a Cloud Service.