This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Previous page. Requirements. 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. The full code can be found on GitHub. resourceType: 'wknd-spa/components/text'. 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. apps and ui. If it is possible that I can render my app dynamic content in AEM using WebAPI. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Architecting a Headless Content Management Application. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend. Provide a Title and a Name for your configuration. CTA Text - “Read More”. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Implementing the Integration Levels. Headless implementations enable delivery of experiences across platforms and channels at scale. Populates the React Edible components with AEM’s content. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. The following tools should be installed locally: JDK 11;. Click De-Hibernate to confirm the step. To annotate a PDF document, perform the following steps: Go to the Assets interface, navigate to the PDF document that you want to annotate. As you consider implementing server-side rendering for your SPA, review for what parts of the app it is necessary. Prerequisites. Two modules were created as part of the AEM project: ui. js with a fixed, but editable Title component. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. Below is a summary of how the Next. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. 0. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Integration approach. The <Page> component has logic to dynamically create React components based on the. js app. js implements custom React hooks. Learn about deployment considerations for mobile AEM Headless deployments. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. If you currently use AEM, check the sidenote below. frontend. AEM 6. A CI/CD pipeline in Cloud Manager is a mechanism to build code from a source repository and deploy it to an environment. 2. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. A simple weather component is built. A single-page application is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the webserver, instead of the default method of a web browser loading entire new pages. In Image 2, you can see SPA hosted outside of AEM. Next, deploy the updated SPA to AEM and update the template policies. Enter the following values on the Text tab: Card Path - choose a page beneath the SPA homepage. View the source code on GitHub. Remote SPA editor will be the middle ground but the content slots needs to be premarked. Two modules were created as part of the AEM project: ui. Browse the following tutorials based on the technology used. Following AEM Headless best practices, the Next. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. js (JavaScript) AEM Headless SDK for Java™. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. 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. Product functional tests are a set of stable HTTP integration tests (ITs) of core functionality in AEM such as authoring and replication tasks. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. Server-to-server Node. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. Persisted queries. 0 This blog discusses a clever technique of using SPA 2. You can create Adaptive Forms based on a. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Next, deploy the updated SPA to AEM and update the template policies. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Create RESTful API (AEM Servlet having sample GET and POST method). Persisted queries. Map the SPA URLs to AEM Pages. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. Anatomy of the React app. Persisted queries. all-2. Open a new command prompt and. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. Developing SPAs for AEM. AEM container components use policies to dictate their allowed components. Below is a summary of how the Next. The JSON content is then consumed by the single-page app, which has been integrated with the AEM JS SDK. 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. Integration approach. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. js (JavaScript) AEM Headless SDK for Java™. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). A simple weather component is built. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. js v18 Java™ 11 Maven 3. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). This Android application demonstrates how to query content using the GraphQL APIs of AEM. 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. The full code can be found on GitHub. 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. Single page applications (SPAs) can offer compelling experiences for website users. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Browse the following tutorials based on the technology used. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Following AEM Headless best practices, the Next. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. js with a fixed, but editable Title component. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Using a REST API. frontend module is a webpack project that contains all of the SPA source code. 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. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. Once headless content has been. There is a specific folder structure that AEM requires projects to be built. Sign In. Authorization requirements. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Tap or click the Create button and select Create ContextHub Segment. It also provides an optional challenge to apply your AEM Headless learnings, coding expertise to enhance the WKND client application. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. WKND App project is the SPA to be integrated with AEM’s SPA Editor Latest code The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. Prerequisites This tutorial requires the following: AEM as a Cloud Service SDK Node. 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. Tutorial Set up. Two modules were created as part of the AEM project: ui. Each level builds on the tools used in the previous. The AEM Project contains configuration and content that must be deployed to AEM. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. I have an angular SPA app that we want to render in AEM dynamically. 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. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction; Authoring Basics for Headless with AEM; Learn about using references in Content Fragments; Learn about defining Metadata and Tagging for Content Fragments; Implementing. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. React App. To define your new segment: After accessing the segments, navigate to the folder where you would like to create the segment. The full code can be found on GitHub. Integrate the SPA - Learn how the SPA source code is integrated with the AEM Project and understand tools available to rapidly develop the SPA. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Experience LeagueThe Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. 5 or later. See how AEM powers omni-channel experiences. js app. View the source code on GitHub. Two modules were created as part of the AEM project: ui. AEM Headless applications support integrated authoring preview. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Integration approach. On this page. Experience Fragments are fully laid out. Each level builds on the tools used in the previous. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). A majority of the SPA. When authorizing requests to AEM as a Cloud Service, use. Overview; 1 - Configure AEM;. Get started by checking out the next article: Learn about. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Learn about deployment considerations for mobile AEM Headless deployments. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Log into AEM as a Cloud Service and from the main menu select Tools > General > Configuration Browser. Using a REST API introduce challenges: The SPA gains the ability to be authored in AEM, but still be delivered as an SPA. Navigate to Tools > Cloud Services > Azure Storage. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. A majority of the SPA. View example. It also provides an optional challenge to apply your AEM Headless learnings, coding expertise to enhance the WKND client application. Select the Cloud Services tab. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. AEM Preview is intended for internal audiences, and not for the general delivery of content. Below is a summary of how the Next. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. Learn how to extend an existing Core Component to be used with the AEM SPA Editor. 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. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. frontend. 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. 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. 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 options to use images within your documents are available only after configuring the AEM Assets sidekick plugin. Multiple requests can be made to collect as many results as required. A majority of the SPA. GraphQL, a flexible query language for APIs, provides an efficient and precise way to request specific data from your AEM instance, enabling a seamless integration between React and AEM. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Here, the developer controls the app by enabling authoring rights in selected application areas. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. Populates the React Edible components with AEM’s content. 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. The app is reusable and portable. Select Create. frontend module is a webpack project that contains all of the SPA source code. The full code can be found on GitHub. then my scenario would be feasible I have an angular SPA app that we want to render in AEM dynamically. Tap in the Integrations tab. This document helps you understand AEM Headless in the context of your own project. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js app uses AEM GraphQL persisted queries to query adventure data. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Integration approach. 5 has enhanced its digital customer experience services by providing better content personalization, content fragment enhancements, and easier authoring. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Next Chapter: Build an Image List component Install AEM SPA Editor JS SDK npm dependencies. GraphQL is the language that queries AEM for the. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). If you are not familiar with fluid grids, see the Introduction to Fluid Grids section at the bottom of this page. The page is now editable on AEM with a. AEM Headless as a Cloud Service. Dynamic navigation is implemented using React Router and React Core Components. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. frontend module is a webpack project that contains all of the SPA source code. Persisted queries. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. ’. This component is able to be added to the SPA by content authors. 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. Sign In. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. The com. On this page. 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. Developer. Headless Setup. frontend. 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. A majority of the 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. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Overview; 1 - Configure AEM;. AEM 6. Click Tools > Assets > Connected Assets Configuration and provide the following values: A Title of the configuration. AEM 6. 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 feature is core to the AEM Dispatcher caching strategy. This tutorial requires the following: AEM as a Cloud Service. Author in-context a portion of a remotely hosted React. 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. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and. 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. Tap the Technical Accounts tab. This page explains how you can integrate your fluid grid or an existing grid implementation (such as Bootstrap) into your AEM application. 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. AEM container components use policies to dictate their allowed components. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via. Experience League. A majority of the SPA. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. AEM Basics. SPA editor is excellent if you prioritise Author WYSIWYG experience over seperately hosted and deployed SPA. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. 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. This guide uses the AEM as a Cloud Service SDK. View the source code on GitHub. Persisted queries. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. This section covers the original editor, primarily accessed from the Assets console. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The ui. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. Ensure only the components which we’ve provided SPA implementations for are allowed:Create Content Fragment Models. SPA Editor. Learn how to add editable components to dynamic routes in a remote SPA. 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. Prerequisites. Sign In. Developer. Populates the React Edible components with AEM’s content. Use the withMappable helper to. Browse the following tutorials based on the technology used. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . The ImageComponent component is only visible in the webpack dev server. Here, the developer controls the app by enabling authoring rights in selected application areas. The AEM Headless client, provided by the AEM Headless. infinity. then my scenario would be feasible This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. There are two editors for authoring Content Fragments. 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. AEM’s GraphQL APIs for Content Fragments. 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. View the source code on GitHub. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction; Authoring Basics for Headless with AEM; Learn about using references in Content Fragments; Learn about defining Metadata and Tagging for Content Fragments; Implementing. Know the prerequisites for using AEM’s headless features. 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. If it is possible that I can render my app dynamic content in AEM using WebAPI. The journey lays out the requirements, steps, and approach of an AEM Headless project from the perspective of a Content Architect. 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 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. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. It also provides an optional challenge to apply your AEM. AEM Headless as a Cloud Service. Tutorials by framework. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend Adobe Experience Manager. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. The full code can be found on GitHub. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. frontend. Included in the WKND Mobile AEM Application Content Package below. With a traditional AEM component, an HTL script is typically required. Persisted queries. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. Persisted queries. 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/. The ui. 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 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. So in this regard, AEM already was a Headless CMS. The AEM Project contains configuration and content that must be deployed to AEM. Headless AEM is a Adobe Experience Manager setup in which the frontend. apps and ui. Experience League. Persisted queries. This component is able to be added to the SPA by content authors. An end-to-end tutorial illustrating how to build-out. Update Policies in AEM. frontend module is a webpack project that contains all of the SPA source code. Experience LeagueIn the previous chapter, you created and updated persisted queries using GraphiQL Explorer. View the source code on GitHub. js with a fixed, but editable Title component. Following AEM Headless best practices, the Next. Since the SPA renders the component, no HTL script is needed. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. Below is a summary of how the Next. js. 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 your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Below is a summary of how the Next. 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. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Tap Home and select Edit from the top action bar. Map the SPA URLs to AEM Pages. 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. Next page. The ui. Wrap the React app with an initialized ModelManager, and render the React app. The following list links to the relevant resources. react. The execution flow of the Node. Learn. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. The following list links to the relevant resources. A single-page application is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the webserver, instead of the default method of a web browser loading entire new pages. js with a fixed, but editable Title component. js app uses AEM GraphQL persisted queries to query. js (JavaScript) AEM Headless SDK for Java™. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Be able to define your project in terms of scope. Therefore, SPA. Following AEM Headless best practices, the Next. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of 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. Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing;. Prior to starting this tutorial ensure the following AEM instances are installed and running on your local machine:Learn about deployment considerations for mobile AEM Headless deployments. The walkthrough is based on standard AEM functionality and the sample WKND SPA Project app. 0 or later. 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. src/api/aemHeadlessClient. The SPA Editor offers a comprehensive solution for supporting SPAs. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component;. SPAs can be enabled with flexible levels of integration within AEM including SPAs developed and maintained outside of AEM. Wrap the React app with an initialized ModelManager, and render the React app. cq. From the command line navigate into the aem-guides-wknd-spa. Developer.