In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. Learn how to add editable fixed components to a remote SPA. Below is a summary of how the React application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Integration approach. js (JavaScript) AEM Headless SDK for Java™. You can use the React renderer component shipped with Headless adaptive forms to render an Adaptive Form or build your own. It also provides an optional challenge to apply your AEM. Let’s create some Content Fragment Models for the WKND app. What the authors are willing to author, how involved do they get with content, and how involved do they want to get with crafting experiences? SPA - single page. If you currently use AEM, check the sidenote below. On this page. I'd like to use those same React components to feed the AEM Experience Fragment authoring experience, instead of having to rebuild each React component as an HTL template within AEM -- it's too much overhead to maintain a. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. 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. Since the SPA renders the component, no HTL script is needed. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. The page is now editable on AEM with a. cq. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. Verify Page Content on AEM. It also provides an optional challenge to apply your AEM. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. Author in-context a portion of a remotely hosted React application. Congratulations! You’ve successfully updated the React app to integrate with AEM Headless APIs using the AEM Headless SDK! Next, let’s create a more complex Image List component that dynamically renders referenced Content Fragments from AEM. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. An end-to-end tutorial. Next page. Implementing the Integration Levels. The following tools should be installed locally: JDK 11;. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. AEM container components use policies to dictate their allowed components. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the. Following AEM Headless best practices, the Next. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Remote SPA editor will be the middle ground but the content slots needs to be premarked. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing. The AEM Project contains configuration and content that must be deployed to AEM. frontend. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. As you consider implementing server-side rendering for your SPA, review for what parts of the app it is necessary. js app uses AEM GraphQL persisted queries to query. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. 6 A OM ROGRA UIDE For Health Care Professionals and Families How Do I Apply? Complete the At Home Program Application form with the assistance of a physician. Two modules were created as part of the AEM project: ui. You can always view the finished code on GitHub or check the code out locally by switching to the branch Angular/integrate-spa-solution. Experience LeagueThe AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Content Fragments are a Sites feature, but are stored as Assets. Following AEM Headless best practices, the Next. First, review AEM’s SPA npm dependencies for the React project, and the install them. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. If it is possible that I can render my app dynamic content in AEM using WebAPI. Level 2 27-07-2023 00:24 PDT. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). SPA Editor. js with a fixed, but editable Title component. Build a React JS app using GraphQL in a pure headless scenario. Setup your development environment and learn how to integrate a simple app with AEM Headless: 4: How to model your content:. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. The ui. The full code can be found on GitHub. It also provides an optional challenge to apply your AEM. Below is a summary of how the React application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Developer. frontend. Don’t worry - this grid system is only applicable to the editable containers, and you can use your grid system of choice to drive the layout of the rest of your SPA. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. AEM Headless SPA deployments. AEM Headless as a Cloud Service. Usually, it relies on invalidation techniques that ensure that any content changed in AEM is properly updated in the Dispatcher. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Requirements. A spa day is a fantastic treat to receive from your staff and I am so happy that you chose to spend your day with us at Willow Stream. Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. There are different tools in AEM available depending on what integration level you choose. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. AEM’s GraphQL APIs for Content Fragments. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it. A majority of the. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. Two modules were created as part of the AEM project: ui. How to map aem component and react component. The full code can be found on GitHub. Select Edit from the mode-selector in the top right of the Page Editor. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. Browse the following tutorials based on the technology used. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. js app. Persisted queries. Architecting a Headless Content Management Application. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. Previous page. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Don’t worry - this grid system is only applicable to the editable containers, and you can use your grid system of choice to drive the layout of the rest of your SPA. The React app is intentionally simple, to focus on the integration with AEM’s GraphQL APIs. js (JavaScript) AEM Headless SDK for Java™. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Create Azure storage configuration. In Image 2, you can see SPA hosted outside of AEM. SPA Editor. Documentation AEM AEM Tutorials AEM Headless Tutorial Extend a Core Component Learn how to extend an existing Core Component to be used with the AEM. Be aware of AEM’s headless integration levels. Using an AEM dialog, authors can set the location for the weather to be displayed. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. The ImageComponent component is only visible in the webpack dev server. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. Learn. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. A headless content management application is a more complex architecture with the WCM owning the content publication and acting as a provider service for Single. Mark as New; Follow; Mute; Subscribe to RSS Feed; Permalink; Print; Report; I have an angular SPA app that we want to render in AEM dynamically. Navigate to Tools > Cloud Services > Azure Storage. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The AEM Project contains configuration and content that must be deployed to AEM. Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing;. CIF enables AEM to access an Adobe Commerce instance and communicate with Adobe Commerce via GraphQL. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. 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 chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. They can be used to access structured data, including texts, numbers, and dates, amongst others. The Open Weather API and React Open Weather components are used. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. 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-app/us/en/. Following AEM Headless best practices, the Next. Populates the React Edible components with AEM’s content. Tap or click the Create button and select Create ContextHub Segment. The use of AEM Preview is optional, based on the desired workflow. 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 Android application demonstrates how to query content using the GraphQL APIs of AEM. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. Sign In. 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 implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. then my scenario would be feasible This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. To add an authorable page in the SPA, follow the same steps in the section Add Authorable Components to the Page. 0 or later. Server-to-server Node. 3. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Two modules were created as part of the AEM project: ui. We are going to achieve below flow as part of this blog. From the command line navigate into the aem-guides-wknd-spa. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. Prerequisites. Prerequisites. The React app should contain one instance of the <Page. Prerequisites AEM Headless SPA deployments. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. zip or greater This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). If it is possible that I can render my app dynamic content in AEM using WebAPI. @adobe/aem-spa-page-model-manager: provides the API for retrieving content from AEM. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Know the prerequisites for using AEM’s headless features. AEM Headless as a Cloud Service. The single-page app or single-page experience then has full control over how to layout and present this content. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. This tutorial requires the following: AEM as a Cloud Service. AEM Headless Web Component/JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. Select the application configured for AEM Forms, and tap Configure OAuth for Application. Below is a summary of how the Next. js (JavaScript) AEM Headless SDK for Java™. frontend. Tap in the Integrations tab. Creating a Configuration. apps and ui. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. The full code can be found on GitHub. then my scenario would be feasible See full list on experienceleague. The ui. It also provides an optional challenge to apply your AEM Headless learnings, coding expertise to enhance the WKND client application. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. The common use case for server-to-server AEM Headless apps is to sync Content Fragment data from AEM into other systems, however this application is intentionally. Create the Sling Model. SPA Editor. The two experiences sit side-by-side, share content through a headless integration and co-deliver to the glass. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. com Integrate a SPA Last update: 2022-10-26 Topics: SPA Editor Created for: Beginner Developer Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. js. What’s Next. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Learn how to add editable components to dynamic routes in a remote SPA. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. Author in-context a portion of a remotely hosted React application. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. Select Create. Headless is a method of using AEM as a source of data, and the primary way of achieving this is by using API and GraphQL for getting data out of AEM. js initializes and exports the AEM Headless Client used to communicate with AEM AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. The React app should contain one. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. 0 can enable direct in-content editing for specific areas or snippets in the app. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Take a look:SPA Editor 2. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. Following AEM Headless best practices, the Next. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. The Remote Content Renderer Configuration that is required to use SSR with your SPA in. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. SPA application will provide some of the benefits like. Configure OAuth settings for the Adobe Acrobat Sign application: Open a browser window and sign in to your Adobe Acrobat Sign developer account. 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. The Angular app is developed and designed to be. Single page applications (SPAs) can offer compelling experiences for website users. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. Wrap the React app with an initialized ModelManager, and render the React app. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. You will also collaborate with our internal partners, Solution Consultants and. Previous page. Remote DAM URL is the URL of the Assets location in the format [assets_servername]: [port]. Following AEM Headless best practices, the Next. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Persisted queries. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. The examples that follow demonstrate how to obtain and use the class objects in code. Map the SPA URLs to AEM Pages. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. The following table provides links to the reference documentation of several key Java objects to use when interacting programmatically with workflows. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. js with a fixed, but editable Title component. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Use the withMappable helper to. . TIP. Log into AEM as a Cloud Service and from the main menu select Tools > General > Configuration Browser. Persisted queries. Server-to-server Node. js (JavaScript) AEM Headless SDK for. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. It will allow us to create AEM forms and integrate with Form Data Model. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Integration approach. frontend module is a webpack project that contains all of the SPA source code. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. Define the trigger that will start the pipeline. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component;. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Don’t worry - this grid system is only applicable to the editable containers, and you can use your grid system of choice to drive the layout of the rest of your SPA. Navigate to Tools > Cloud Services > Adobe Acrobat Sign and open the configuration container you created in the previous step. This introduction. There are two editors for authoring Content Fragments. Learn. Edit the WKND SPA Project app in AEM. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. Other micro services can then be also integrated into the SPA. In the New ContextHub Segment, enter a title for the. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. Ensure only the components which we’ve provided SPA implementations for are allowed:The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Once the process completes, the sandbox program environment is active again. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. Developing SPAs for AEM. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Following AEM Headless best practices, the Next. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. The full code can be found on GitHub. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). ’. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component;. Create RESTful API (AEM Servlet having sample GET and POST method). Sign In. See the NPM documentation for both frameworks for further details. Build a React JS app using GraphQL in a pure headless scenario. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. AEM Headless Web Component/JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. Level 1: Content Fragments and. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to. Two modules were created as part of the AEM project: ui. A majority of the SPA. Persisted queries. A classic Hello World message. The ui. js (JavaScript) AEM Headless SDK for Java™. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. $ cd aem-guides-wknd-spa. AEM Headless is a CMS solution from Experience Manager that allows structured content (Content Fragments) in AEM to be consumed by any app over HTTP using GraphQL. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Select a folder to create the configuration and tap Create. 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 Title should be descriptive. After reading you should: Understand the basics of AEM’s headless features. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. 0 that can help in integrating your Adobe® Experience Manager. Command line parameters define: The AEM as a Cloud Service Author. src/api/aemHeadlessClient. Integration approach. View example. Following AEM Headless best practices, the Next. Prerequisites. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. apps and ui. SPA application will provide some of the benefits like. Therefore, SPA. A majority of the SPA. Sign In. apps and ui. Browse the following tutorials based on the technology used. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Prerequisites. Prerequisites. Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component;. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. The preview experience links the AEM Author’s Content Fragment editor with your custom app (addressable via HTTP), allowing for a deep link into the app that renders the Content Fragment being previewed. Integration approach. AEM 6. Headless content management is a key development for today’s web design that decouples the frontend, client-side applications from the backend, content management system. Below is a summary of how the Next. frontend module is a webpack project that contains all of the SPA source code. In Adobe documentation, it is called ‘in-context editable spots. The single-page app or single-page experience then has full control over how to layout and present this content. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. AEM Basics Tutorials by framework. Next Steps 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 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. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Persisted queries. The journey will define additional personas with which the content architect must interact for a successful project, but the point-of-view for the journey is that of the content architect. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. In the sites console, select the page to configure and select View Properties. You can create Adaptive Forms based on a. The ui. So for the web, AEM is basically the content engine which feeds our headless frontend. View the. 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. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. js with a fixed, but editable Title component. GraphQL serves as the “glue” between AEM and the consumers of headless content. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Remote Content Renderer. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. This tutorial requires the following: AEM as a Cloud Service. The project used in this chapter will serve as the basis for an implementation of the WKND SPA and is built upon in future chapters. Read real-world use cases of Experience Cloud products written by your peersEdge Delivery enables you to use images available in AEM Assets repositories while authoring documents in Microsoft Word or Google Docs.