SPA Editor. Following AEM Headless best practices, the Next. With a traditional AEM component, an HTL script is typically required. Headless AEM. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. 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 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. 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. The full code can be found on GitHub. The use of AEM Preview is optional, based on the desired workflow. AEM 6. Headful and Headless in AEM. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Client type. Next, deploy the updated SPA to AEM and update the template policies. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. adobe. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. Requirements. (SPA), progressive web app (PWA), web shop, or other service external to AEM. apps and ui. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. This React. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Remote DAM URL is the URL of the Assets location in the format [assets_servername]: [port]. The React app should contain one instance of the <Page. 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. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend. frontend module is a webpack project that contains all of the SPA source code. Open a new command prompt and. Learn how to add editable fixed components to a remote 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. Integration approach. Prerequisites This tutorial requires the following: AEM as a Cloud Service SDK Node. Persisted queries. 0 or later. Typical AEM as a Cloud Service headless deployment. Wrap the React app with an initialized ModelManager, and render the React app. The page is now editable on AEM with a. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. AEM Headless as a Cloud Service Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (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. react project directory. Learn how to use Adobe Experience Manager (AEM) as a Headless CMS (Content Management System), with features such as Content Fragment. Wrap the React app with an initialized ModelManager, and render the React app. In the Redirect URL box, add the URL copied in a previous step (Step 8) and click Save. 5 and React integration. 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 approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. This tutorial requires the following: AEM as a Cloud Service. AEM enables you to efficiently and effectively implement fluid grids. With this complete extensibility framework, built on Adobe’s infrastructure, developers can build custom microservices, extend, and integrate Adobe Experience Manager across. The following list links to the relevant resources. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. I have an angular SPA app that we want to render in AEM dynamically. If you currently use AEM, check the sidenote below. 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. Locate the Layout Container editable area beneath the Title. There are many ways to build the web; most of the ways can be implemented in AEM, which one works best is going to depend on your authors. Tap the Technical Accounts tab. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. src/api/aemHeadlessClient. We are going to achieve below flow as part of this blog. 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. Wrap the React app with an initialized ModelManager, and render the React app. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it. This guide uses the AEM as a Cloud Service SDK. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . I have an angular SPA app that we want to render in AEM dynamically. SPA Editor. A majority of the SPA. js (JavaScript) AEM Headless SDK for. The full code can be found on GitHub. What’s Next. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Remote Content Renderer. 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. Browse the following tutorials based on the technology used. Sign In. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. js application is invoked from the command line. SPA Editor. Headful and Headless in AEM. Prerequisites. The options to use images within your documents are available only after configuring the AEM Assets sidekick plugin. The full code can be found on GitHub. On this page. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. Navigate to Tools > Cloud Services > Adobe Acrobat Sign and open the configuration container you created in the previous step. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. If it is possible that I can render my app dynamic content in AEM using WebAPI. The use of Android is largely unimportant, and the consuming mobile app. Since the SPA renders the component, no HTL script is needed. apps and ui. The JSON content is then consumed by the single-page app, which has been integrated with the AEM JS SDK. Other micro services can then be also integrated into the SPA. The examples that follow demonstrate how to obtain and use the class objects in code. js with a fixed, but editable Title component. 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. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The full code can be found on GitHub. Following AEM Headless best practices, the iOS application uses AEM GraphQL persisted queries to. frontend. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. 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. Experience Manager Assets lets you add comments to a PDF document. See the Sites documentation, Content Fragments - Authoring, for details of the new editor (primarily accessed from the Content Fragments console). Prerequisites. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. Requirements. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. AEM Headless as a Cloud Service. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Prerequisites. English is the default language for the. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The AEM Project contains configuration and content that must be deployed to AEM. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. If it is possible that I can render my app dynamic content in AEM using WebAPI. Browse the following tutorials based on the technology used. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. This server-side Node. Map the SPA URLs to AEM Pages. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The two experiences sit side-by-side, share content through a headless integration and co-deliver to the glass. Learn about deployment considerations for mobile AEM Headless deployments. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. 1. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. 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. Headless AEM Installation Guide - Cloud. Implementing Applications for AEM as a Cloud Service; Using. 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. frontend module is a webpack project that contains all of the SPA source code. 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. Next page. Edit the WKND SPA Project app in AEM. 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. Two modules were created as part of the AEM project: ui. 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. day. Headless mode is excellent if you prefer content to be delivered as an API and content editing is more form. 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. AEM Headless applications support integrated authoring preview. Following AEM Headless best practices, the Next. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. View the. js with a fixed, but editable Title component. 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. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Content Fragments are editorial content, with definition and structure, but without additional visual design and/or layout. A majority of the SPA. Using an AEM dialog, authors can set the location for the weather to be displayed. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. 2. On this page. js (JavaScript) AEM Headless SDK for Java™. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. AEM Basics Tutorials by framework. To manage groups in AEM, navigate to Tools > Security > Groups. 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 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. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. 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. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The ui. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. 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. Since the SPA renders the component, no HTL script is needed. Configure OAuth settings for the Adobe Acrobat Sign application: Open a browser window and sign in to your Adobe Acrobat Sign developer account. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Command line parameters define: The AEM as a Cloud Service Author. 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 React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. 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. js with a fixed, but editable Title component. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Start by creating the components that will make up the composite component, that is, components for the image and its text. It also provides an optional challenge to apply your AEM Headless learnings, coding expertise to enhance the WKND client application. Create the Sling Model. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. In the sites console, select the page to configure and select View Properties. The com. js. Also, SPAs can be used within AEM while also using AEM to deliver content to additional endpoints headlessly. Following AEM Headless best practices, the Next. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. View the source code on GitHub. View the source code on GitHub. Be aware of AEM’s headless integration levels. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. 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. frontend module is a webpack project that contains all of the SPA source code. js (JavaScript) AEM Headless SDK for Java™. Integration approach. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Log into AEM as a Cloud Service and from the main menu select Tools > General > Configuration Browser. When authorizing requests to AEM as a Cloud Service, use. 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. AEM Headless as a Cloud Service. then my scenario would be feasible I have an angular SPA app that we want to render in AEM dynamically. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM GraphQL API requests. 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. AEM container components use policies to dictate their allowed components. AEM 6. It is simple to create a configuration in AEM using the Configuration Browser. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Welcome to the multi-part tutorial for developers looking to augment an existing Remote SPAs with editable AEM content using AEM SPA Editor. The React app is developed and designed to be. Populates the React Edible components with AEM’s content. AEM Basics. 0 can enable direct in-content editing for specific areas or snippets in the app. The full code can be found on GitHub. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web. 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. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Anatomy of the React app. Persisted queries. Caching AEM pages or fragments in the AEM Dispatcher is a best practice for any AEM project. Features. 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. In this part of the AEM Headless Content Author Journey, you can learn the (basic) concepts and terminology necessary to understand authoring content when using Adobe Experience Manager (AEM) as a Cloud Service as a Headless CMS. Below is a summary of how the Next. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via. Therefore, SPA. The single-page app or single-page experience then has full control over how to layout and present this content. Just as AEM supports the Angular and React SPA frameworks out-of-the box, server-side rendering is also supported for Angular and React apps. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. SPA application will provide some of the benefits like. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Persisted queries. 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. Learn how to configure segmentation using ContextHub. AEM container components use policies to dictate their allowed components. 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. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. 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. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. 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. Prerequisites. AEM GraphQL API requests. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. 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. Learn. Persisted queries. This guide uses the AEM as a Cloud Service SDK. 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. Usually, it relies on invalidation techniques that ensure that any content changed in AEM is properly updated in the Dispatcher. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The full code can be found on GitHub. AEM Headless as a Cloud Service. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. 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. Prerequisites 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. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. 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. Below is a summary of how the Next. Persisted queries. Overview; 1 - Configure AEM;. The single-page app or single-page experience then has full control over how to layout and present this content. AEM Headless as a Cloud Service. Developer. 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. Experience LeagueThe Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. 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 full code can be found on GitHub. With a traditional AEM component, an HTL script is typically required. Depending on the client and how it is deployed, AEM Headless deployments have different considerations. Explore how to combine headful and headless delivery and learn how you can create editable SPAs using AEM’s SPA Editor framework. 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. js (JavaScript) AEM Headless SDK for Java™. 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. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. The sidekick plugin for AEM Assets supports access to: AEM Assets as. 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. Map the SPA URLs to AEM Pages. Depending on the client and how it is deployed, AEM Headless deployments have different considerations. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. Following AEM Headless best practices, the Next. A simple weather component is built. Since the SPA renders the component, no HTL script is needed. Following AEM Headless best practices, the Next. This guide uses the AEM as a Cloud Service SDK. The use of AEM Preview is optional, based on the desired workflow. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. In addition to pure AEM-managed content CIF, a page can. A majority of the SPA. The React app should contain one. Two modules were created as part of the AEM project: ui. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Implementing the Integration Levels. Accessing a workflow. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Get started by checking out the next article: Learn about. The AEM Project contains configuration and content that must be deployed to AEM. SPA Editor. Select Edit from the mode-selector in the top right of the Page Editor. This guide uses the AEM as a Cloud Service SDK. AEM as a Cloud Service technical documentation - If you already have a firm understanding of AEM and headless technologies, you may want to. Learn how to create a custom weather component to be used with the AEM SPA Editor. ’. This tutorial explains,1. 0. 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 Remote Content Renderer Configuration that is required to use SSR with your SPA in. The Angular app is developed and designed to be. 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 section covers the original editor, primarily accessed from the Assets console. Populates the React Edible components with AEM’s content. 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 (JavaScript) AEM Headless SDK for Java™. It also provides an optional challenge to apply your AEM. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. 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;. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. View example. Tutorials by framework. What is App Builder for AEM as a Cloud Service. The new Adobe Developer App Builder provides an extensibility framework for a developer to easily extend functionalities in AEM as a Cloud Service. 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. Open a new command prompt and. AEM container components use policies to dictate their allowed components. Swagger file to read document, build and consume RESTful API’s created as. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. Open a new command prompt and. Ensure only the components which we’ve provided SPA implementations for are allowed:AEM Headless as a Cloud Service. Implementing Applications for AEM as a Cloud Service;. 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. An end-to-end tutorial illustrating how to. react. This component is able to be added to the SPA by content authors. 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. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Experience League. The ImageComponent component is only visible in the webpack dev server. So in this regard, AEM already was a Headless CMS.