Use out of the box components and templates to quickly get a site up and running. Deploy the starter code to a local instance of AEM, if you haven’t already:Check out these additional journeys for more information on how AEM’s powerful features work together. Stop the webpack dev server. Navigate to Tools > General > Content Fragment Models. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. Integrate React into the AEM instance. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. The Open Weather API and React Open Weather components are used. Option 2: Share component states by using a state library such as Redux. Learn to create a simple React application and integrate with AEM's single page editor to take advantage of content management capabilities. 4. To fully take advantage of this useful and flexible feature, it is important to understand how front-end. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. How to create react spa component. #aem #cms #dispatcherAEM as a Cloud Service - Local Development Environment setup - @h9ioHow to use Re-Fetching Flush Agent in Adobe Experience Manager(AEM). Select the correct front-end module in the front-end panel. Option 2: Share component states by using a state library such as Redux. Checkout Getting Started with AEM Headless - GraphQL. User fills out a form in React app. 4. If you wish to implement SPAs in AEM for a framework other than React or Angular or simply wish to take a deep dive into how the SPA SDK for AEM works, see the SPA Blueprint article. This will allow us to code directly. Finally, you'll discover how to utilize advanced installation. AEM pages. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. AEM as a Cloud Service videos and tutorials. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Adobe Experience Manager (AEM) Assets is a digital asset management tool on AEM Platform that allows users to create, manage, and share their digital assets (images, videos, documents, and audio clips) in a web-based repository. src/api/aemHeadlessClient. To accelerate the tutorial a starter React JS app is provided. Navigate to Tools > General > Content Fragment Models. An end-to-end tutorial illustrating how to build-out and expose content using AEM and consumed by a native mobile app, in a headless CMS scenario. 0. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Dispatcher: A project is complete only. Once the deploy is completed, access your AEM author instance. Developer. Clone the adobe/aem-guides-wknd-graphql repository:Option 1: Centralize the logic and broadcast to the necessary components for example by using React Context. 11 Service Pack. The build will take around a minute and should end with the following message:The SPA must use the Page Model library to be initialized and be authored by the SPA Editor. They are specifically designed to be used for creating Adaptive Forms, which are forms that adapt to the device,. Layouting. 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 SPA frameworks. After the folder is created, select the folder and open its Properties. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Select WKND Shared to view the list of existing. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Create Content Fragment Models. How to create react spa custom component. 0 or higher; Documentation. Create Content Fragments based on the. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Transcript. Anatomy of the React app. This is the pom. Feel comfortable using AEM to design your own components from scratch. Option 1: Centralize the logic and broadcast to the necessary components for example by using React Context. jar. Wrap the React app with an initialized ModelManager, and render the React app. Once deployed this will give you text and title component implementation in AEM. We will take it a step further by making the React app editable using the Universal Editor. Navigate to Tools > General > Content Fragment Models. Double-click the aem-publish-p4503. 3-SNAPSHOT. Next, inspect how React Router is integrated with the SPA and experiment using React Router’s Link component. New useEffect hooks can be created for each persisted query the React app uses. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Start the tutorial with the AEM Project Archetype. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). api> Previously, after project creation, it was like this: <aem. Organize and structure content for your site or app. This tutorial builds upon the WKND GraphQL App , a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide any in-context authoring. xml line that I have changed now: <aem. cd <src>/aem-guides-wknd-events/react-app mvn clean install # Through the frontend-maven-plugin plug-in, the configured NPM script is automatically run to compile the react-app. 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. Tap the checkbox next to My Project Endpoint and tap Publish. js (JavaScript) AEM Headless SDK for Java™. The basic goals for client-side libraries or clientlibs are: Store CSS/JS in small discrete files for easier development and maintenance. How to map aem component and react component. Components; Integration with AEM; Helpers. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Next Steps. Creation of AEM project using maven archetype generates AEM ui. Tutorials. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. For publishing from AEM Sites using Edge Delivery Services, click here. Enter a name for the library file, and in the Type list select cq:ClientLibraryFolder. To accelerate the tutorial a starter React JS app is provided. Tap the all-teams query from Persisted Queries panel and tap Publish. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM provides AEM React Editable Components v2, an Node. Learn the fundamental skills for AEM front-end development. To accelerate the tutorial a starter React JS app is provided. Wrap the React app with an initialized ModelManager, and render the React app. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. Clone and run the sample client application. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. js implements custom React hooks. All the AEM concepts required to work on real world projects. This tutorial uses a simple Node. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. With our headless CMS you can create structured content once and reuse it across any digital touchpoint via APIs. Manage dependencies on third-party frameworks in an organized fashion. Let’s create some Content Fragment Models for the WKND app. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. Adobe Experience Manager (AEM) Sites is a leading experience management platform. js) Remote SPAs with editable AEM content using AEM SPA Editor. Let’s create some Content Fragment Models for the WKND app. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM Core WCM. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. Open your page in the editor and verify that it behaves as expected. 5 locally. This React application demonstrates how to query content using. Learn to create a simple React application and integrate with AEM's single page editor to take advantage of content management capabilitie. Single page applications (SPAs) can offer compelling experiences for website users. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . SPA Editor Overview; Getting Started with the AEM SPA Editor and Angular; Getting Started with the AEM SPA Editor and React; Getting Started with the AEM SPA Editor and a remote React SPA; Features. Open CRXDE Lite in a web browser ( ). In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. For publishing from AEM Sites using Edge Delivery Services, click here. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. Exercise 1 Go to React Lists Tutorial. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. Add core component as maven dependency. xml file. Next, inspect how React Router is integrated with the SPA and experiment using React Router’s Link component. These are then mapped to project specific AEM components using the MapTo, just like with the Text component. The below video demonstrates some of the in-context editing features with the WKND SPA. You can also select the components to be available for use within a specific paragraph system. About The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries,. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. npm module; Github project; Adobe documentation; For more details and code. Adobe Experience Manager (AEM) Sites is a leading experience management platform. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. From the command line navigate into the aem-guides-wknd-spa. Browse the following tutorials based on the technology used. 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. React Lists. To accelerate the tutorial a starter React JS app is provided. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. Explore AEM’s GraphQL capabilities by building out a React App that consumes Content. js App. WKND Single Page App: Learn how to build a React or Angular webapp that is fully authorable in AEM. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. Learn how to create a custom weather component to be used with the AEM SPA Editor. The AEM Project Archetype includes an optional, dedicated front-end build mechanism based on Webpack. Learn. To accelerate the tutorial a starter React JS app is provided. 0. Option 3: Leverage the object hierarchy by customizing and extending the container component. Getting. 102 Students. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Adobe Cloud Manager integrates unit test execution and code coverage reporting into its CI/CD pipeline to help encourage and promote the best practice of unit testing AEM code. These are importing the React Core components and making them available in the current project. Clone the adobe/aem-guides-wknd-graphql repository:Populates the React Edible components with AEM’s content. A multi-part tutorial on how to develop for the AEM SPA Editor. Adobe Experience Manager (AEM) Gems is a series of technical deep dives into Adobe Experience Manager delivered by Adobe experts. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. Work with Adobe Experience Manager's SPA editor and learn how React and Angular frameworks can be used. 0 or higher; Documentation. Experience League. This is tide to the Authoring Experience, and again, Layouting content on the page might not be possible because when using AEM components and React Components there will be two sets of CSS. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. Later in the tutorial, additional properties are added and displayed. Browse the following tutorials based on the technology used. Learn to create a simple React application and integrate with AEM's single page editor to take advantage of content management capabilitie. 3. react. We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. jar file to install the Publish instance. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. In this tutorial, you learn how to integrate the requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless Client for JavaScript. Latest Code All of the tutorial code can be found on GitHub. npm module; Github project; Adobe documentation; For more details and code. Sign In. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. In this tutorial, you learn how to integrate the requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless Client for JavaScript. In this tutorial, I will show how to use Adobe's archetype to create an AEM application with React. You’ll learn how to set up your development environment, establish a connection between React and AEM, retrieve content using GraphQL queries, and render it dynamically in your web application. Learn how to generate an Adobe Experience Manager (AEM) Maven project as a starting point for a React application integrated with the AEM SPA Editor. 5 contents. apps. 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. For an overview of how a simple SPA in AEM is structured and how it works, see the getting started guide for both React and Angular. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. 5 and React integration. First, a model interface for the component that extends the ContainerExporter interface was created. Developer. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Anatomy of the React app. The benefit of this approach is cacheability. Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. This user guide contains videos and tutorials on the many features and capabilities of AEM Sites. Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. First, you'll cover the basics of AEM and learn about the history of the product. React Router is a collection of navigation components for React applications. Work with Adobe Experience Manager's SPA editor and learn how React and Angular frameworks can be used. This Next. Image part works fine, while text is not showing up. . ) package. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. Installation of AEM and React steps explained in upcoming blocks AEM and React Install AEM 6. AEM Headless as a Cloud Service. You will get hands on experience with Java Content Repository. For creating an AEM component using react we need at least 4 things, a skeleton AEM component with a dialog, a react component, an entry importing the component inside the import-components. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. Once headless content has been translated, and. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Included are the development tooling required to develop, build and compile AEM Projects, as well as local run times allowing developers to quickly validate. Once headless content has been translated,. Wrap the React app with an initialized ModelManager, and render the React app. Tap the ellipsis next to the environment in the Environments section, and select Developer Console. Last update: 2023-11-06. Abstract. The following tools should be installed locally: Node. Build a React JS app using GraphQL in a pure headless scenario. New useEffect hooks can be created for each persisted query the React app uses. Adobe Experience Manager (AEM) is now available as a Cloud Service. You will learn to design and create your own web pages. Extract the JAR Either through double-click on JAR or through command line with command java -jar aem-author-4502. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. React is the most favorite programming language amongst front-end developers ever since its release in 2015. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. This tutorial walks through setting up a local development environment for Adobe Experience Manager (AEM) using the AEM as a Cloud Service SDK. You should first be generating the project using AEM archetype and pass frontendModule value as react. This tutorial explains,1. Tap Home and select Edit from the top action bar. Post this you can follow the AEM react development. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries. For an overview of how a simple SPA in AEM is structured and how it works, see the getting started guide for both React and Angular. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Experience League. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. react project directory. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. What is AEM (a Content Management System or CMS by Adobe in which you can create. The React app should contain one. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. There are several other imports from @adobe/aem-core-components-react-spa and @adobe/aem-core-components-react-base. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. You can create, move, copy, and delete paragraphs in the paragraph system. AEM SPA Model Manager is installed and initialized. Beginner. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. There are several other imports from @adobe/aem-core-components-react-spa and @adobe/aem-core-components-react-base. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. In my opinion it’s possible to use react with AEM projects but it will depend on the type of project. Next Chapter: AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Create Content Fragments based on the. Getting Started with the AEM SPA Editor and React. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line. How to create react spa custom component. How to map aem component and react component. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. The build will take around a minute and should end with the following message:AEM pages. Clone the adobe/aem-guides-wknd-graphql repository: React Router is a collection of navigation components for React applications. all-1. Select WKND Shared to view the list of existing. Transcript. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. This tutorial builds upon the WKND GraphQL App , a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide. We do this by separating frontend applications from the backend content management system. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. AEM SPA Model Manager is installed and initialized. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Wrap the React app with an initialized ModelManager, and render the React app. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. Learn. The following tutorials are based off this archetype: WKND Site: Learn how to start a fresh new website. model. Click OK and then click Save All. To accelerate the tutorial a starter React JS app is provided. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. Use out of the box components and templates to quickly get a site up and running. Exercise 1 Go to React Hooks useEffect Tutorial. In this tutorial, I will show how to use Adobe's archetype to create an AEM application with React. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. In this tutorial, you learn how to integrate the requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless Client for JavaScript. maven archetype is a fork of the. This is the default build. 3. You will also learn how to use out of the box AEM React Core Components. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries. You’ll learn how to set up your development environment, establish a connection between React and AEM, retrieve content using GraphQL queries, and render it dynamically in your web application. Repeat the above steps to create a fragment representing Alison Smith:Client-Side Libraries provide a mechanism to organize and manage CSS and JavaScript files necessary for an AEM Sites implementation. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. NOTE. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Take full advantage of Vue's progressive and reactive ecosystem in creating scalable and production-ready AEM SPA applications. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of AEM. Reference Setup: Developers, Administrators with AEM experience: 20 minutes: Headless hands-on tutorial: If you prefer a hands-on approach and are familiar with AEM, this tutorial dives directly into. Adding the interactive REACT app to AEM Screens. Embed the web shop SPA in AEM, and. api>20. Follow the steps below to add the interactive REACT app to AEM Screens: Create a new AEM Screens project. This tutorial covers the following topics:Use these Adobe enterprise tutorials to leverage Adobe enterprise applications for your business needs. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. The project used in this chapter will serve as the basis for an implementation of the WKND SPA and is built upon in future chapters. The tutorial offers a deeper dive into AEM development. During the creation of the launch the production web site can continue to evolve and change day to day as it normally would. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. The React App in this repository is used as part of the tutorial. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Contribute to adobe/aem-react-spa development by creating an account on GitHub. npm module; Github project; Adobe documentation; For more details and code. Create Content Fragments based on the. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. This tutorial explains,1. Let’s create some Content Fragment Models for the WKND app. 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. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. If you just want to build the finished version of each project: React We can build projects for AEM with a SPA(Single Page Application) as frontend (can use either Angular or React). 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. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 2 Courses. Select WKND Shared to view the list of existing. The <Page> component has logic to dynamically create React. While unit testing code is a good practice for any code base, when using Cloud Manager it is important to take advantage. Transcript. 5. $ cd aem-guides-wknd-spa. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Learn how to create a custom weather component to be used with the AEM SPA Editor. AEM Site Templates - Also known as Quick Site Creation, a low-code approach to generating an AEM Site by using a pre-defined Site Template. Update the WKND App. The Open Weather API and React Open Weather components are used. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. Exercise 1 Go to React Hooks useState Tutorial. AEM Sites; AEM Assets; AEM Forms; AEM as Cloud Service; AEM Foundation; Tutorials for AEM Guides; AEM multi-step tutorials. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Next, you'll explore the five core sections of AEM. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Anatomy of the React app. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. AEM Headless GraphQL Video Series; AEM Headless GraphQL Hands-on Tutorial. src/api/aemHeadlessClient. This React application demonstrates how to query content using. . npm module; Github project; Adobe documentation; For more details and code. Tap Create new technical account button.