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. Anatomy of the React app. Following AEM Headless best practices, the Next. 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. 5 and React integration. This tutorial requires the following: AEM as a Cloud Service. Here, the developer controls the app by enabling authoring rights in selected application areas. Learn. then my scenario would be feasible See full list on experienceleague. 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. 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. apps and ui. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. apps and ui. js with a fixed, but editable Title component. Edit the WKND SPA Project app in AEM. 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. 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. Two modules were created as part of the AEM project: ui. The walkthrough is based on standard AEM functionality and the sample WKND SPA. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend Adobe Experience Manager. Prerequisites. I have an angular SPA app that we want to render in AEM dynamically. Requirements. 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. Next Chapter: Build an Image List 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. Next page. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to. Following AEM Headless best practices, the Next. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. 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. First, review AEM’s SPA npm dependencies for the React project, and the install them. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Next page. In Adobe documentation, it is called ‘in-context editable spots. Sign In. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. html with . The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. Wrap the React app with an initialized ModelManager, and render the React app. 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. It also provides an optional challenge to apply your AEM. Below is a summary of how the React application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. 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. Integration approach. 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. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. js app. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. 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 Steps 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. Server-to-server Node. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. 2 - Integrate the SPA; 3 - Map SPA components; 4 - Navigation and routing; 5 - Custom component; 6 - Extend component; Remote SPA. A majority of the 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. This guide uses the AEM as a Cloud Service SDK. Overview; 1 - Configure AEM;. Two modules were created as part of the AEM project: ui. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. Persisted queries. day. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Prerequisites. Once the process completes, the sandbox program environment is active again. 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. js with a fixed, but editable Title component. Sling Models are annotation driven Java™ “POJOs” (Plain Old Java™ Objects) that facilitate the mapping of data from the JCR to Java™ variables. The Open Weather API and React Open Weather components are used. Prerequisites. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. frontend module is a webpack project that contains all of the SPA source code. 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. then my scenario would be feasible 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. Lastly, at the top of the stack, is the AEM SPA Editor. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. Persisted queries. js (JavaScript) AEM Headless SDK for Java™. 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. 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 completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. 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. Browse the following tutorials based on the technology used. frontend module is a webpack project that contains all of the SPA source code. When authorizing requests to AEM as a Cloud Service, use. Edit the WKND SPA Project app in AEM. Persisted queries. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. src/api/aemHeadlessClient. Usually, it relies on invalidation techniques that ensure that any content changed in AEM is properly updated in the Dispatcher. The SPA Editor offers a comprehensive solution for supporting SPAs. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. The AEM Project contains configuration and content that must be deployed to AEM. Select WKND Shared to view the list of existing. js app uses AEM GraphQL persisted queries to query. Two. Persisted queries. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. How to create react spa custom component. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the 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. View example. jar) to a dedicated folder, i. 5 also includes several digital experience platform features such as GraphQL support, built-in Adobe Target integration, and a new user interface for the AEM Screens device. The JSON content is then consumed by the single-page app, which has been integrated with the AEM JS SDK. 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. 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. 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. Learn how to add editable components to dynamic routes in a remote SPA. Tap Home and select Edit from the top action bar. Below is a summary of how the Next. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. js (JavaScript) AEM Headless SDK for Java™. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. 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. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). An end-to-end tutorial illustrating how to. js application is invoked from the command line. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. This React. SPA Editor. 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 should contain one instance of the <Page. 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. Populates the React Edible components with AEM’s content. Two modules were created as part of the AEM project: ui. Author in-context a portion of a remotely hosted React application. This page explains how you can integrate your fluid grid or an existing grid implementation (such as Bootstrap) into your AEM application. Prerequisites. The new Adobe Developer App Builder provides an extensibility framework for a developer to easily extend functionalities in AEM as a Cloud Service. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Content Fragments are a Sites feature, but are stored as Assets. Previous page. The full code can be found on GitHub. Each level builds on the tools used in the previous. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. 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. Authorization requirements. Following AEM Headless best practices, the Next. Two modules were created as part of the AEM project: ui. json to be more correct) and AEM will return all the content for the request page. Learn. 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. Let’s create some Content Fragment Models for the WKND app. The <Page> component has logic to dynamically create React components based on the. In Adobe documentation, it is called ‘in-context editable spots. Map the SPA URLs to AEM Pages. AEM as a Cloud Service technical documentation - If you already have a firm understanding of AEM and headless technologies, you may want to. 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 Next. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 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. 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. This Android application demonstrates how to query content using the GraphQL APIs of AEM. With a traditional AEM component, an HTL script is typically required. Prerequisites. frontend. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. You can use the React renderer component shipped with Headless adaptive forms to render an Adaptive Form or build your own. js app uses AEM GraphQL persisted queries to query. The following video provides a high-level overview of the concepts that are covered in this tutorial. Using an AEM dialog, authors can set the location for the weather to be displayed. This example, loosely based on the AEM Headless React app, illustrates how AEM GraphQL API requests can be configured to connect to different AEM Services based on environment variables. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and. There are different tools in AEM available depending on what integration level you choose. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Implementing Applications for AEM as a Cloud Service; Using. AEM Headless as a Cloud Service. SPA application will provide some of the benefits like. Depending on the client and how it is deployed, AEM Headless deployments have different considerations. js app uses AEM GraphQL persisted queries to query adventure data. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. The ui. Below is a summary of how the Next. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Learn how to bootstrap a remote SPA for AEM SPA Editor compatibility. Experience League. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. Headless mode is excellent if you prefer content to be delivered as an API and content editing is more form. 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. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. Level 1: Content Fragments. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The examples that follow demonstrate how to obtain and use the class objects in code. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Select a folder to create the configuration and tap Create. App Builder provides a unified third-party extensibility framework for integrating and creating custom experiences that extend. 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. The full code can be found on GitHub. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. Select Save & Close. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Experience League. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. js (JavaScript) AEM Headless SDK for Java™. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. Integrate the SPA - Learn how the SPA source code is integrated with the AEM Project and understand tools available to rapidly develop the SPA. Sign In. In the New ContextHub Segment, enter a title for the. Following AEM Headless best practices, the Next. On this page. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. This section covers the original editor, primarily accessed from the Assets console. The approach I am thinking of is, all fields on the SPA app can be rendered in XML/JSON via Web API. Learn. You will educate customers of any / all integration options including APIs - both native and custom. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. 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. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. A majority of the SPA. This tutorial uses a simple Node. AEM Headless as a Cloud Service. 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. 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. The walkthrough is based on standard AEM functionality and the sample WKND SPA Project app. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing. To support SPA Editor’s layout mode for editable areas in the SPA, we must integrate AEM’s Responsive Grid CSS into the SPA. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Sign In. SPA components could be rendered by the client (in the browser) or server side. 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. Create the text component in your AEM project. AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA, web site, mobile app, or even server-to-server process. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. 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. 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. Learn how to add editable fixed components to a remote SPA. frontend module is a webpack project that contains all of the SPA source code. 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. View the source code on GitHub. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Creating a Configuration. Lastly, at the top of the stack, is the AEM SPA Editor and UI. Anatomy of 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. Modified on Mon, 17 Oct 2022 at 09:29 AM. Persisted queries. Below is a simple path for creating, managing, and delivering experiences using AEM as a Cloud Service in five steps for users who are already familiar with AEM and headless technology. Depending on the client and how it is deployed, AEM Headless deployments have different considerations. apps and ui. js app uses AEM GraphQL persisted queries to query. js (JavaScript) AEM Headless SDK for. View example. It also provides an optional challenge to apply your AEM. In the sites console, select the page to configure and select View Properties. Tutorials by framework. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. An end-to-end tutorial. js app uses AEM GraphQL persisted queries to query. The ui. SPA application will provide some of the benefits like. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. The React WKND App is used to explore how a personalized Target. Build a React JS app using GraphQL in a pure headless scenario. The ui. Persisted queries. Following AEM Headless best practices, the Next. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. A PDF document can have multiple annotations. 0 This blog discusses a clever technique of using SPA 2. This tutorial explains,1. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor. Using an AEM dialog, authors can set the location for the weather to be displayed. Take a look:SPA Editor 2. An example Java™ Android™ app that consumes content from AEM Headless GraphQL APIs. AEM GraphQL API requests. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. The starting point of this tutorial’s code can be found on GitHub in the remote-spa-tutorial folder. 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. js implements custom React hooks. 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 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. Developer. 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. The content author can edit the app using AEM's content authoring experience. AEM Headless as a Cloud Service Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Map the SPA URLs to AEM Pages. 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. 0. Server-to-server 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. frontend. Prerequisites. If it is possible that I can render my app dynamic content in AEM using WebAPI. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. What is App Builder for AEM as a Cloud Service. Since the SPA renders the component, no HTL script is needed. In addition to pure AEM-managed content CIF, a page can. Headless AEM Installation Guide - Cloud. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it. Learn. In Image 2, you can see SPA hosted outside of AEM. Learn about the various deployment considerations for AEM Headless apps. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Level 1: Content Fragments and. This chapter is a continuation of the Create Project chapter, however to follow along all you need is a working SPA-enabled AEM project. @adobe/aem-spa-component-mapping: provides the API that map AEM content to SPA components. 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. Experience League. AEM Headless as a Cloud Service. Production Pipelines: Product functional. How to map aem component and react component. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. The AEM Project contains configuration and content that must be deployed to AEM. Integration approach. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Other micro services can then be also integrated into the SPA. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. apps and ui. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. 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 DAM URL is the URL of the Assets location in the format [assets_servername]: [port]. The SPA gains the ability to be authored in AEM, but still be delivered as an SPA. In Image 2, you can see SPA hosted outside of AEM. AEM 6. AEM WCM Core Components 2. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. 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 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 Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. frontend module is a webpack project that contains all of the SPA source code. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Select the application configured for AEM Forms, and tap Configure OAuth for Application. Next page. Developer. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components.