AEM as a Cloud Service technical documentation - If you already have a firm understanding of AEM and headless technologies, you may want to. 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. Enhance your skills, gain insights, and connect with peers. The current implementation of the Assets HTTP API is based on the REST architectural style and enables you to access content (stored in AEM) via CRUD operations (Create, Read, Update, Delete). Commerce User Guide: Learn about Commerce Integration Framework. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. AEM GraphQL API requests. Each environment contains different personas and with different needs. Introduction. The SPA is implemented using: Maven AEM Project Archetype; AEM SPA Editor; Core. AEM Headless APIs allow accessing AEM. Adobe’s visual style for cloud UIs, designed to provide consistency. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. With Adobe Experience Manager (AEM) as a Cloud Service, Content Fragments lets you design, create, curate, and publish page-independent content. Provides important information about the latest release of AEM, including what’s new, supported platforms, deprecated and removed features, and known issues. 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. Assets. 0. e. Provide a Title and a Name for your folder. Before you configure front-end pipelines, review the AEM Quick Site Creation Journey for an end-to-end guide through the easy-to-use AEM Quick Site Creation tool. Enhanced Personalization and Customer Journey MappingThe goal for this multi-part tutorial is to teach a developer who is new to AEM how to implement a website in AEM using the latest standards and technologies. The Story So Far. AEM provides robust content management capabilities and exposes Headless APIs that allow developers to access content and data stored in AEM through a variety of channels and applications. Log into AEM as a Cloud Service and from the main menu select Navigation -> Content Fragments. TIP. Developer. For authoring AEM content for Edge Delivery Services, click here. In addition to offering robust tools to create, manage, and deliver traditional webpages in the full-stack fashion, AEM also offers the ability to author self-contained selections of content and serve them headlessly. Developers can use the JSON Preview in the Content Fragment editor to show all values of the current Content Fragment that can be returned using the GraphQL API. First select which model you wish to use to create your content fragment and tap or click Next. It is the main tool that you must develop and test your headless application before going live. Log into AEM as a Cloud Service and from the main menu select Navigation > Assets > Files. For Java and WebDriver, use the sample code from the AEM Test Samples repository. One of the major goals for AEM as a Cloud Service is to allow experienced customers (having used AEM either on-premise or in the context of the Adobe Managed Services) to migrate to AEM as a Cloud Service as. Preview URLs, using URL expressions, are set on the Content Fragment Model’s Properties. For an overview of all of the available components in your AEM instance, use the Components Console. Creating a. Learn how Experience Manager as a Cloud Service works and what the software can do for you. AEM as a Cloud Service lets you capitalize on the AEM applications in a cloud-native way, so that you can: Scale your DevOps efforts with Cloud Manager: CI/CD framework, autoscaling, API connectivity, flexible deployment modes, code quality gates, service delivery transparency, and guided updates. Anyone with administrator access to a test AEM instance can follow these guides to understand headless delivery in AEM, though someone with developer experience is ideal. It has Logo, Tagline. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access that content. Learn how to build next-generation apps using headless technologies in Experience. With a headless implementation, there are several areas of security and permissions that should be addressed. For full details about authoring with AEM see: Concepts of Authoring; Basic Handling; For authoring AEM content for Edge Delivery. Navigate to Tools, General, then select GraphQL. 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 endpoint can use all Content Fragment Models from all Sites configurations (defined in the Configuration Browser ). js) Remote SPAs with editable AEM content using AEM SPA Editor. Granite UI. To build and deploy successfully with Cloud Manager, AEM projects need to adhere to the following guidelines: Projects must be built using Apache Maven. TIP If you are new to AEM as a Cloud Service and familiar with AEM. AEM_Forum. x. In Projects, tap/click Create to open the Create Project wizard: Select a template and click Next. 4. After the folder is created, select the folder and open its Properties. Unlike the traditional AEM solutions, headless does it without the presentation layer. It also provides guidance on next steps to adopt AEM best practices. This guide uses the AEM as a Cloud Service SDK. Last update: 2023-08-16. Enable developers to add. You can personalize content and pages, track conversion rates, and uncover which ads drive. Authoring Concepts. AEM makes it easy to manage your marketing content and assets. You will learn how to set up dependencies, design the component structure, retrieve and parse Content Fragments, and make the app editable using the. Understand the steps to implement headless in AEM. This journey lays out the requirements, steps, and approach to translate headless content in AEM. adobe. Enabling Content Fragments in AEM allows modular content creation, enhancing consistency and adaptability. Introduction. 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. 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. It is not intended as a getting-started guide. AEM offers the flexibility to exploit the advantages of both models in one project. For the purposes of this getting started guide, we only need to create one folder. . Developer. Adobe Experience Manager (AEM) components and templates comprise a powerful toolkit. Prerequisites. Adobe Experience Manager’s Referrer Filter enables access from third-party hosts. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access that content. js, among others; EnvironmentsResource Description Type Audience Est. For publishing from AEM Sites using Edge Delivery Services, click here. The models available depend on the Cloud Configuration you defined for the assets. : Guide: Developers new to AEM and headless: 1. When creating a GraphQL query, developers can choose different response types from html, plaintext, markdown, and json from a multi-line field. Prerequisites. Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. 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. You have learned the basics of Headless CMS Authoring, with an introduction to authoring with AEMaaCS and in particular, authoring Content Fragments. Formerly referred to as the Uberjar. 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. Moving to AEM as a Cloud Service: Understand the transition journey to Cloud. by: Kirill Efimov Posted on: July 10, 2023 Headless AEM: Unlocking Flexibility and Scalability in Content Delivery In today’s rapidly evolving digital landscape,. Developer and Deployment Manager Tasks. Contentstack CMS for developers is a content management system for IT, offering multiple development environments and coding in your preferred SDK. The AEM Forms Cloud Service Rapid Development Environment (RDE) has no support for Communication APIs. Understand Headless in AEM; Learn about CMS Headless Development;. Customise and extend the functionality of your CMS with our headless capabilities, API-first architecture and vast number of integrations. In this optional continuation of the AEM Headless Developer Journey, you learn how Adobe Experience Manager (AEM) can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. Clone the app from Github by executing the following command on the command line. Objective This document helps you understand headless content delivery and why it should be used. Here you can specify: Name: name of the endpoint; you can enter any text. The new architecture supporting AEM as a Cloud Service involves some key changes to the overall developer experience. The command creates a directory called react-starter-kit-aem-headless-forms in your current location and clones the Headless adaptive forms React starter app into it. Developer. The Experience Manager Developer Tools for Eclipse comes with a sample, multi-module project that helps you quickly get up to speed with a project setup in Eclipse. Create basic components based on core OOTB components. The complete code can be found on GitHub. 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. React is a popular JavaScript library for building user interfaces, known for its simplicity, reusability, and component-based architecture. A name will be automatically generated based on the title and adjusted according to AEM naming conventions. This content is consumed by the client applications using AEM as a Cloud Service in a headless way, by making API calls to the AEM Cloud publish tier to retrieve the structured content as JSON streams, and by using the Content Delivery Network (CDN) in AEM as a Cloud Service to serve both structured and unstructured content with optimal. This user guide contains videos and tutorials helping you maximize your value from AEM. This document provides an overview of the different models and describes the levels of SPA integration. Developer. For authentication, the third-party service must retrieve an Access Token that can then be used in the GraphQL Request. Instead of an out-of-the-box solution, Adobe Developer App Builder provides a common, consistent, standardized development platform for extending Adobe Cloud solutions such as AEM including: Adobe Developer Console — For custom microservice and extension development, letting developers build and manage projects while. Tap AEM Forms Assets Migration, and in the next screen, tap Start Migration. Experience Manager Developer Tools for Eclipse is an Eclipse plugin based on the Eclipse plugin for Apache Sling released under the Apache License 2. They can be used by developers to provide website business users, editors, and administrators with the functionality to adapt their websites to changing business needs (content agility). When editing pages in Adobe Experience Manager (AEM), several modes are available, including Developer mode. Experience League. In this part of the journey, you learn how to plan and perform the migration once both the code and the content are ready to be moved over to AEM as a Cloud Service. Or in a more generic sense, decoupling the front end from the back end of your service stack. You can retrieve a developer token in. For the purposes of this getting started guide, we only need to create one configuration. Browse the following tutorials based on the technology used. AEM offers the flexibility to exploit the advantages of both models in one project. . On AEM 6. This article provides insights into how Headless Adaptive Forms work, and how they can be integrated with different applications to simplify the form building process. Tap or click Create -> Content Fragment. The two only interact through API calls. js (JavaScript) AEM. These environments interact to let you make content available on your website so that your visitors can access it. AEM Headless Content Architect Journey Overview; Content Modeling for Headless with AEM - An Introduction; Learn the Content Modeling Basics for Headless with AEM; Learn about Creating. They can be used by developers to provide website business users, editors, and administrators with the functionality to adapt their websites to changing business needs (content agility). AEM Headless Developer Journey. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Additional resources can be found on the AEM Headless Developer Portal. I am not able to understand how the Template is designed. AEM is a robust platform built upon proven, scalable, and flexible technologies. AEM Headless Developer Journey. Sample Multi-Module Project. An AEM installation generally consists of at least two environments: Author. In this part of the AEM Headless Developer Journey, learn how to use the REST API to access and update the content of your Content Fragments. Provide a Model Title, Tags, and Description. Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and. For the purposes of this getting started guide, we will only need to create one. 5 Developing User Guide; Get started with AEM Sites - WKND Tutorial; AEM 6. Select Create. 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. By adding the Adobe Target extension to Experience Platform Launch, you can use the features of Adobe Target on AEM web pages. Adobe Experience Manager (AEM) is the leading experience management platform. AEM’s GraphQL APIs for Content Fragments. Guide: Developers new to AEM and headless: 1 hour: Headless Setup: For experienced AEM users who need a short summary of the key AEM headless features, check out this quick start overview. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) as a Cloud Service server. AEM Technical Foundations. : Guide: Developers new to AEM and. A name will be automatically generated based on the title and adjusted according to AEM naming conventions. Select Create > Folder. Authoring for AEM Headless - An Introduction. Use GraphQL schema provided by: use the drop-down list to select the required configuration. Permissions and personas can broadly be considered based on the AEM environment Author or Publish. Enable developers to add automation to. This setup establishes a reusable communication channel between your React app and AEM. 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. These users will need to access AEM to do their tasks. Universal Editor Introduction. ” Tutorial - Getting Started with AEM Headless and GraphQL. The diagram above depicts this common deployment pattern. It is not intended as a getting-started guide. In the previous document of the AEM headless journey, Path to Your First Experience Using AEM Headless, you then learned the steps needed to implement your first project. Run the following command to start the SDK: (on Microsoft® Windows) sdk. You also add or delete users and what group they belong to. 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. Headless Developer Journey. Author in-context a portion of a remotely hosted React. Each guide builds on the previous, so it is recommended to explore them thoroughly and in order. AEM Sites videos and tutorials. Understand how it can help content authors deliver exceptional experiences, increase their content velocity, and how provides a state-of-the-art developer experience. 5 Deploying User Guide; AEM 6. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM so you can prepare for your first headless project. 5. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. Looking for a hands-on tutorial? Last update: 2023-08-16. With your site selected, open the rail selector at the left and choose Site. Define the developer’s process. Instead, you control the presentation completely with your own code. (before jumping on a job-specific role). Last update: 2023-06-23. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. The endpoint is the path used to access GraphQL for AEM. The Cloud Manager. With our headless CMS you can create structured content once and reuse it across any digital touchpoint via APIs. API. A developer uses the underlying configuration mechanism that implements configurations to persist and look up settings in AEM. Created for: Developer. Translating Headless Content in AEM. Provides links to the detailed documentation. The creation of a Content Fragment is presented as a wizard in two steps. This document is intended as a high-level quick start guide for the key page authoring actions in AEM. Start. The Experience Manager Developer Tools for Eclipse comes with a sample, multi-module project that helps you quickly get up to speed with a project setup in Eclipse. Headless Getting Started Guide by Adobe Abstract The Headless Getting Started Guides lay out a simple path for 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. js) Remote SPAs with editable AEM content using AEM SPA Editor. These are defined by information architects in the AEM Content Fragment Model editor. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. Cloud Service; AEM SDK; Video Series. Sign In. Looking for a hands-on. Connectors User GuideAEM devs, join us on Nov 6 (EMEA, LATAM, NA) & Nov 15 (APAC) for Adobe Developers Live. 0 or 3. 5. In addition, click Advanced to add a name used in the URL. Select the Content Fragment Model and select Properties form the top action bar. But with the AEM Headless Developer Journey you are mentioning you’ll work with both solutions so I think at the end of the journey you can see the pro’s and con’s from both solutions. Objective. Synchronization for both content and OSGi. Headful and Headless in AEM; Headless Experience Management. Learn how AEM can go beyond a pure headless use case, with. It offers several features that make AEM development easier: Seamless integration with AEM instances through Eclipse Server Connector. That is why the API definitions are really. Log into AEM and from the main menu select Tools -> Assets -> Content Fragment Models. Log into AEM as a Cloud Service and from the main menu select Tools, General, Content Fragment Models. Click into the new folder and create a teaser. Navigate to Tools > General > Content Fragment Models. For example, C:aemauthor. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. This document helps you understand the AEM headless publication pipeline and the performance considerations you must be aware of before you go live with your application. The Create new GraphQL Endpoint dialog box opens. We believe it is beneficial for any developer involved in an AEM SPA Editor project to complete this tutorial. Here you can specify: Name: name of the endpoint; you can enter any text. 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. The AEM Quick Site Creation tool allows non-developers to quickly create a site from scratch by using site templates. BPA utilizes a system service user account named repository-reader-service to execute the Pattern Detector. The article contains recommendations, reference materials, and resources for developers of Assets as a Cloud Service. Developer. Start here for a guided journey through the powerful and flexible headless features of AEM, their capabilities, and how to use them on your project. To get your AEM headless application ready for. Product abstractions such as pages, assets, workflows, etc. In a headless setup, the presentation system (the head) is decoupled from the content management (the tail). 20. Before you Configure Front-End Pipelines. On. AEM offers an out of the box integration with Experience Platform Launch. Each guide builds on the previous, so it is recommended to explore them thoroughly and in. Monitor Performance and Debug Issues. Headless Developer Journey - Start here for a guided course for developing headless applications with AEM. The GraphQL API lets you create requests to access and deliver Content Fragments. You also learn how you can create editable SPAs using AEM’s SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required. The following tools should be installed locally: JDK 11;. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Tap or click Create. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Created for: Beginner. Last update: 2023-11-16. In this part of the AEM Headless Developer Journey, learn about what is required to get your own project started with AEM Headless. 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 the previous document of the AEM headless translation journey, Get started with AEM headless translation you learned how to organize your headless content and how AEM’s translation tools work and you should now: Understand the importance. The tasks described in the Headless Getting Started Guides are necessary for a basic end-to-end demonstration of AEM’s headless capabilities. Tutorials by framework. For Production programs, access to the Developer Console is defined by the “Cloud Manager - Developer Role” in the Admin Console, while for sandbox programs, the Developer Console is available to any user with a product profile giving them access to AEM as a Cloud Service. 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. Headless Developer Journey. Learn About CMS Headless DevelopmentIn this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM's SPA Editor framework. They can be used by developers to provide website business users, editors, and administrators with the functionality to adapt their websites to changing business needs (content agility). The models available depend on the Cloud Configuration you defined for the assets folder. Front end developer has full control over the app. Commerce User Guide: Learn about Commerce Integration Framework on AEM as a Cloud Service. It also serves as a best-practice guide to several AEM features. The developer develops the client that will consume content from AEM headless as the content authors are still creating the content. Connectors User Guide: Learn how to integrate Connectors into Experience Manager as a Cloud Service. WKND Developer TutorialThe UI caters for both mobile and desktop devices, though rather than creating two styles, AEM uses one style that works for all screens and devices. Install, and use, the AEM SDK for development; AEM Headless Developer Resources; Examples, including React, Next. CRXDE Lite is embedded into CRX/AEM and enables you to perform standard development tasks in the browser. The Experience Manager Developer Tools for Eclipse comes with a sample, multi-module project that helps you quickly get up to speed with a project setup in Eclipse. It offers several features that make AEM development easier: Seamless integration with AEM instances through Eclipse Server Connector. After reading it, you can do the following: From these takeaways we can recommend AEM headless or hybrid to be considered when the following points are met: You aim to deliver the same experience and code base for a content-focused page on the web and a hybrid mobile app. The page is immediately copied to the language copy, and included in the project. Operations. For full details about authoring with AEM see: Concepts of Authoring; Basic Handling; For authoring AEM content for Edge Delivery Services. Enter the preview URL for the Content Fragment. AEM Technical Foundations. For the purposes of this getting started guide, you are creating only one model. It makes Adaptive Forms and themes on your AEM Forms environment compatible with AEM as a Cloud Service . By adding the Adobe Target extension to Experience Platform Launch, you can use the features of Adobe Target on AEM web pages. This journey is designed for the translation specialist persona, often referred to as the Translation Project Manager or TPM. Retrieving an Access Token. Confirm with Create. New Reference Site and Tutorial. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. Using a REST API introduce challenges: By allowing developers to submit form data directly through APIs or backend code, headless forms help streamline workflows and improve the overall performance of web applications. Headless Developer Journey. Now that you have completed this part of the AEM Headless Developer Journey, you should: Understand important planning considerations for designing your content. Provide a Title for your configuration. props. env at the root of the project. A development environment allows your developers to implement, and test AEM applications under the same runtime conditions as the stage and production environments. The AEM SDK. Asset microservices provides for scalable and resilient processing of assets using cloud-native applications (also called workers). Visit the AEM Headless developer resources and documentation. Reference Setup: Developers, Administrators with AEM experience: 20 minutes: Headless hands-on tutorial: If you prefer a hands-on approach and are familiar. Integrating Adobe Target on AEM sites by using Adobe Launch. ). To tag content and use the AEM Tagging infrastructure : The tag must exist as a node of type cq:Tag under the taxonomy root node. Allow the candidate to ask questions (about the company, team, position, etc. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Last update: 2023-11-17. Experience Manager Developer Tools for Eclipse is an Eclipse plugin based on the Eclipse plugin for Apache Sling released under the Apache License 2. Looking for a hands-on. After reading it, you can do the following:From these takeaways we can recommend AEM headless or hybrid to be considered when the following points are met: You aim to deliver the same experience and code base for a content-focused page on the web and a hybrid mobile app. In the previous document of the AEM headless journey, Learn About CMS Headless Development you learned the basic theory of what a headless CMS is and you should. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Learn. My requirement is the opposite i. Log into AEM and from the main menu select Tools -> General -> Configuration Browser. Prerequisites. WKND, a new AEM reference site, has been updated and published to reflect best practices to build a web site with AEM, and with the comprehensive set of capabilities, components, and deployment models that are available in AEM. At the beginning of the AEM Headless Content Author Journey the Introduction covered the basic concepts and terminology relevant to authoring for headless. Select the location and model you wish. 2. Be aware of AEM’s headless integration levels. Guide: Developers new to AEM and headless: 1 hour: Headless Setup: For experienced AEM users who need a short summary of the key AEM headless features, check out this quick start overview. 5 is a flexible tool for the headless implementation model by offering three powerful services: Content Models. Access Package Manager. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. Documentation AEM as a Cloud Service User Guide Effortless Bulk PDF Creation - Master the Art with Batch Processing – Your Self-Help Guide to Generating Millions of PDF Documents!Learn about Creating Content Fragment Models in AEM The Story so Far. Select the root of the site and not any child pages. Regardless of which model you choose to implement for SSR,, you need to specify to AEM how to access this remote rendering service. We believe it is beneficial for any developer involved in an AEM SPA Editor project to complete this tutorial. At the beginning of the AEM Headless Content Author Journey the Content Modeling Basics for Headless with AEM covered the basic concepts and terminology relevant to authoring for headless. AEM 6. Confirm the new version with Create. In the future, AEM is planning to invest in the AEM GraphQL API. 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. The Story So Far. Navigate to show the page for which you want to create a version. Guide: Developers new to AEM and headless: 1 hour: Headless Getting Started Guide: For experienced AEM users who need a short summary of the. The journey defines additional personas with which the developer must interact for a successful project, but the point-of-view for the journey is that of the developer. Select Create. Tap or click Create -> Content Fragment. x. . The roles of AEM users, developers, and deployment managers are explored briefly as additional, optional parts of the journey. AEM is a robust platform built upon proven, scalable, and flexible technologies. A launch is created and a copy of the page is added to the. Prerequisites. Tap/click Create. Browse the following tutorials based on the technology used. This document provides an overview of the different models and describes the levels of SPA integration. This user guide contains videos and tutorials helping you maximize your value from AEM. For the purposes of this getting started guide, we only need to create one folder. In the future, AEM is planning to invest in the AEM GraphQL API. In a headless model, the content is managed in the AEM repository, but delivered via. Navigate to the folder you created previously. This setup establishes a reusable communication channel between your React app and AEM. Widgets are a way of creating AEM authoring components. All this while retaining the uniform layout of the sites. In this tutorial, we’ll guide you through the process of creating a dynamic and interactive web application by combining the power of React, Adobe Experience Manager (AEM) Headless APIs, and GraphQL.