Select the application configured for AEM Forms, and tap Configure OAuth for Application. There are different tools in AEM available depending on what integration level you choose. Persisted queries. 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. js app uses AEM GraphQL persisted queries to query adventure data. frontend module is a webpack project that contains all of the SPA source code. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. The build will take around a minute and should end with the following message: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. Below is a summary of how the Next. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. js app uses AEM GraphQL persisted queries to query. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. 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 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. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. Command line parameters define: The AEM as a Cloud Service Author. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. Select a folder to create the configuration and tap Create. It also provides an optional challenge to apply your AEM Headless learnings, coding expertise to enhance the WKND client application. Following AEM Headless best practices, the Next. 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 context of any. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Persisted queries. 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 AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. Learn to use the delegation pattern for extending Sling Models and. Select Edit from the mode-selector in the top right of the Page Editor. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. apps and ui. Headless AEM Installation Guide - Cloud. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Take a look: SPA Editor 2. Using a REST API. Following AEM Headless best practices, the Next. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. js. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. 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. Persisted queries. The ui. 2. 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. SPA Editor. Persisted queries. To add an authorable page in the SPA, follow the same steps in the section Add Authorable Components to the Page. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Below is a summary of how the Next. js (JavaScript) AEM Headless SDK for Java™. An end-to-end tutorial. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. AEM Headless as a Cloud Service Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Dynamic navigation is implemented using Angular routes and added to an existing Header component. js (JavaScript) AEM Headless SDK for. js app uses AEM GraphQL persisted queries to query adventure data. Learn how to extend the JSON Model for an existing Core Component to be used with the AEM SPA Editor. html with . ’. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The ui. 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. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via. The full code can be found on GitHub. 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 content author can edit the app using AEM's content authoring experience. AEM Headless as a Cloud Service. View the source code on GitHub. This component is able to be added to the SPA by content authors. Developer. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the image, so change the. Therefore, SPA. Level 1: Content Fragments and. frontend module is a webpack project that contains all of the SPA source code. then my scenario would be feasible See full list on experienceleague. Usually, it relies on invalidation techniques that ensure that any content changed in AEM is properly updated in the Dispatcher. src/api/aemHeadlessClient. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. AEM 6. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 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. 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. Sign In. In Image 2, you can see SPA hosted outside of AEM. Experience League. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). A majority of the SPA. Experience Fragments are fully laid out. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM Headless as a Cloud Service. Implementing the Integration Levels. 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. A majority of the SPA. 5 and React integration. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. The following video provides a high-level overview of the concepts that are covered in this tutorial. Navigate to Tools > General > Content Fragment Models. 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. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . $ cd aem-guides-wknd-spa. 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. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. 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. 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. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. Remote SPA editor will be the middle ground but the content slots needs to be premarked. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. Integration of Custom JavaScript Applications with AEM Made Easy with SPA 2. 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. frontend module is a webpack project that contains all of the SPA source code. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. 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. 0 can enable direct in-content editing for specific areas or snippets in the app. 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 journey lays out the requirements, steps, and approach of an AEM Headless project from the perspective of a Content Architect. vaibhavtiwari260. SPA Editor. In Adobe documentation, it is called ‘in-context editable spots. 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. AEM Headless as a Cloud Service. Congratulations, you have updated the SPA and explored the integration with AEM! You now know two different approaches for developing the SPA against the AEM JSON model API using a webpack dev server. Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component;. The React app should contain one. Developing SPAs for AEM. Next page. This tutorial requires the following: AEM as a Cloud Service SDK. js app uses AEM GraphQL persisted queries to query. This Android application demonstrates how to query content using the GraphQL APIs of AEM. This component is able to be added to the SPA by content authors. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Here, you can skip the itemPath property. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Below is a summary of how the Next. The full code can be found on GitHub. The below video demonstrates some of the in-context editing features with the WKND SPA. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the content over AEM Headless GraphQL APIs. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Requirements. Sign In. AEM 6. WKND App project is the SPA to be integrated with AEM’s SPA Editor; Latest code. Rename the jar file to aem-author-p4502. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. User. Browse the following tutorials based on the technology used. apps and ui. If it is possible that I can render my app dynamic content in AEM using WebAPI. View example. This article presents important questions to consider when. 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. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Since the SPA renders the component, no HTL script is needed. In the Redirect URL box, add the URL copied in a previous step (Step 8) and click Save. 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 you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. The sidekick plugin for AEM Assets supports access to: AEM Assets as. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. day. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. I have an angular SPA app that we want to render in AEM dynamically. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. SPA editor is excellent if you prioritise Author WYSIWYG experience over seperately hosted and deployed SPA. Learn how to create a custom weather component to be used with the AEM SPA Editor. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. When you create an Adaptive Form, specify the container name in the Configuration Container field. Objects. Remote Content Renderer. frontend. Prerequisites. The following tools should be installed locally: JDK 11;. Define the trigger that will start the pipeline. js (JavaScript) AEM Headless SDK for. The following list links to the relevant resources. From AEM perspective, 1. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. Integration approach. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. Tap Home and select Edit from the top action bar. Select WKND Shared to view the list of existing. Single page applications (SPAs) can offer compelling experiences for website users. Next Steps. 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. The DAM Users is an out of the box group in AEM that can be used for “everyday” users that manage digital. Tap in the Integrations tab. 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. The single-page app or single-page experience then has full control over how to layout and present this content. 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 below video demonstrates some of the in-context editing features with. Once headless content has been. Navigate to Tools > Cloud Services > Azure Storage. js (JavaScript) AEM Headless SDK for Java™. Client type. The full code can be found on GitHub. 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. Prerequisites. apps and ui. Chapter 4 of the AEM Headless tutorial covers the role of AEM Editable Templates in the context of AEM Content Services. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. 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. Last update: 2023-08-16. Experience League. You can always view the finished code on GitHub or check the code out locally by switching to the branch Angular/integrate-spa-solution. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Front-end Apps: Front-end apps like, SPA (Single Page Applications), Mobile Apps, JavaScript Apps, consume Headless adaptive forms (the JSON Form Representation) and render the form on a client. Persisted queries. 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. Map the SPA URLs to AEM Pages. Tap Create new technical account button. If you currently use AEM, check the sidenote below. SPA application will provide some of the benefits like. AEM container components use policies to dictate their allowed components. In the Developer Console you can also click the Environments link in the breadcrumbs above. The Story So FarThis 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 allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Two modules were created as part of the AEM project: ui. . This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. apps and ui. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. A majority of the SPA. Create Azure storage configuration. This Android application demonstrates how to query content using the GraphQL APIs of AEM. json to be more correct) and AEM will return all the content for the request page. 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 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. SPA Editor Overview. Configure OAuth settings for the Adobe Acrobat Sign application: Open a browser window and sign in to your Adobe Acrobat Sign developer account. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. The Title should be descriptive. Update Policies in AEM. You will educate customers of any / all integration options including APIs - both native and custom. src/api/aemHeadlessClient. Learn about deployment considerations for mobile AEM Headless deployments. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. 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. Open a new command prompt and. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. The project fully uses the SPA Editor SDK and the frontend components are developed as a library and the content structure of the app is delegated to AEM. Tap the Technical Accounts tab. resourceType: 'wknd-spa/components/text'. apps and ui. 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. Wrap the React app with an initialized ModelManager, and render the React app. Sign In. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . frontend module is a webpack project that contains all of the SPA source code. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. Clients interacting with AEM Author need to take special care, as. Persisted queries. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. The <Page> component has logic to dynamically create React components based on the. Anatomy of the React app. Overview 1 - Create Project 2 - Integrate the SPA 3 - Map SPA components 4 - Navigation and routingOverview 1 - Content modeling 2 - AEM Headless APIs and React 3 - Complex components Overview Single-page app Web Component Mobile Server-to. Now even AEM as a cloud service has react as inbuilt program into its archetype as part of Adobe’s best practices known to its Headless CMS architecture. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. An end-to-end tutorial. It also provides an optional challenge to apply your AEM Headless learnings, coding expertise to enhance the WKND client application. Single page applications (SPAs) can offer compelling experiences for website users. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. 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. Front end developer has full control over the app. 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 SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. Start by creating the components that will make up the composite component, that is, components for the image and its text. The full code can be found on GitHub. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. The ui. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. 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. If you are not familiar with fluid grids, see the Introduction to Fluid Grids section at the bottom of this page. This document helps you understand AEM Headless in the context of your own project. SPA components could be rendered by the client (in the browser) or server side. I have an angular SPA app that we want to render in AEM dynamically. Author in-context a portion of a remotely hosted React application. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. Integration approach. Developer. AEM Headless Developer Journey - Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to use them on your first development project. Prerequisites. Next, deploy the updated SPA to AEM and update the template policies. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. In addition to pure AEM-managed content CIF, a page can. The examples below use small subsets of results (four records per request) to demonstrate the techniques. See how AEM powers omni-channel experiences. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Each level builds on the tools used in the previous. GraphQL serves as the “glue” between AEM and the consumers of headless content. 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. Be able to define your project in terms of scope. AEM Headless APIs allow accessing AEM content from any. frontend module is a webpack project that contains all of the SPA source code. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to. Overview; 1 - Configure AEM;. View the source code on GitHub. Wrap the React app with an initialized ModelManager, and render the React 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. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The ui. frontend. The ui. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. This tutorial requires the following: AEM as a Cloud Service. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. 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. Prerequisites. Overview; 1 - Configure AEM;. In Edit mode, add the Card component to the Layout Container: Drag and drop an image from the Asset finder onto the Card component: Open the Card component dialog and notice the addition of a Text Tab. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. The. Developer. These tests are maintained by Adobe and are intended to prevent changes to custom application code from being deployed if it breaks core functionality. 6+ Git aem-guides-wknd. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. AEM Headless as a Cloud Service. Developing an SPA using SSR. A majority of the SPA. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. 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. You can always view the finished code on GitHub or check the code out locally by switching to the branch Angular/integrate-spa-solution. How to create react spa component. js with a fixed, but editable Title component. Persisted queries. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. The first step to implement data integration to send Adaptive Form to a database, is to identify and configure data sources that store information you want to use in Adaptive Forms. This introduction. Headless integration with AEM. 4. Browse the following tutorials based on the technology used. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. The use of AEM Preview is optional, based on the desired workflow. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. When rendered server side, browser properties such as window size and location are not present. Also, SPAs can be used within AEM while also using AEM to deliver content to additional endpoints headlessly.