After you complete onboarding to the service, login to your AEM Forms as a Cloud Service environment, open Author and Publish instances, and add users to Forms-specific AEM groups, based on their persona. AEM 6. One could export an AEM page in JSON format via a REST call, however there are many fields in the JSON that the Spring Boot app does not use. x. directly; for example, NOTE. 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. Select WKND Shared to view the list of existing. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Frame Alert. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. Next, deploy the updated SPA to AEM and update the template policies. The interface should be installed separately, the interface can be. GraphQL API. 2. 5. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service. 17 and AEM 6. GraphQL query is an API for headless architecture to deliver content fragment data in the form of JSON. Tutorial Set up. </p> <p dir="auto">GraphQL endpoints then provide the paths that. 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. x. To address this problem I have implemented a custom solution. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. Update Policies in AEM. This tutorial — the first in the series — is about getting started with GraphQL on the frontend. AEM Headless quick setup using the local AEM SDK. Create Content Fragment Models. Update cache-control parameters in persisted queries. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted Queries; Basic Tutorial. 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. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. In AEM projects, frontend developers usually build a static prototype with a set of static components which are handed to the backend. Prerequisites. client. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. Improving microservice architecture with GraphQL API gateways. ; Render a Carousel with a list of Magento products defined in a Content Fragment (via CIF). In AEM 6. 5 the GraphiQL IDE tool must be manually installed. js implements custom React hooks. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. In the src/components/Hero. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. graphql. Ensure that the version of Dispatcher Tools is provided via the AEM SDK version matching the AEM as a Cloud Service version. View next: Learn. AEM GraphQL API requests. AEM Headless GraphQL queries can return large results. This architecture features some inherent performance flaws, but is fast to implement and. Prerequisites. 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 in a client application. Create Content Fragments based on the. With Adobe Experience Manager (AEM), Content Fragments let you design, create, curate, and publish page-independent content. Experience LeagueTo get started with GraphQL queries and how they work with AEM Content Fragments, it helps to see some practical examples. Prerequisites. 0. Prior to starting this tutorial ensure the following AEM instances are installed and running on your local machine:This document is part of a multi-part tutorial. Is there a way to. Use AEM GraphQL pre-caching. 2. GraphQL Query optimization Content Fragments. A simple React app is used to query and display Team and Person content exposed by AEM’s GraphQL APIs. Ensure you adjust them to align to the requirements of your. GraphQL is an open source server-side technology which was developed by Facebook to optimize RESTful API calls. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. properties file beneath the /publish directory. Install GraphiQL IDE on AEM 6. Once headless content has been translated, and. ) that is curated by the WKND team. 1. In AEM 6. Learn. To connect PWA Studio with the GraphQL endpoint of AEM, you can use the AEM Extension for PWA Studio. Persisted queries are similar to the concept of stored procedures in SQL databases. Navigate to Tools > General > Content Fragment Models. 5. Eventually, your architecture might look like this. Prerequisites. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Prerequisites. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible. Sign In. Figure 1 illustrates a simple and pretty typical deployment of AEM as a Cloud Services together with a single instance of Adobe Commerce. In previous releases, a package was needed to install the GraphiQL IDE. As a Library AuthorContent Fragments can also reference other assets in AEM. 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. e ~/aem-sdk/author. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably 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 in a client application. The following tools should be installed locally: JDK 11; Node. First, install the dependencies: npm install graphql-tag next-urql react-is urql isomorphic-unfetch Then, create a new file at /pages/_app. It also allows AEM Authors to use Product and Category Pickers and the Product Console to browse through product and. 10. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. Requires JDK 11; The React application is designed to connect to an AEM Publish environment, however it can source content from AEM Author if authentication is provided in the React application’s configuration. Prerequisites. Client type. AEM GraphQL API {#aem-graphql-api} . This will also enable the GraphiQL IDE. Select Create. GraphQL efficiently retrieves data from AEM, and we’ll set up and configure endpoints to expose desired data. 5. Prerequisites. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. in folder . Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Tutorials by framework. The example above enables CORS requests from along with If you want to use Apollo Studio Explorer as a GraphQL web IDE, you should include. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to improve. The following tools should be installed locally: JDK 11; Node. js application is invoked from the command line. Select the commerce configuration you want to change. Advanced Modeling for GraphQL | Adobe Experience Manager Documentation AEM AEM Tutorials AEM Headless Tutorial Advanced Modeling for GraphQL Learn how to create. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted Queries; Basic Tutorial. I am trying to make a call to a GraphQL endpoint (external, not controlled by me), all I can find on internet is how to setup a back-end GraphQL endpoint using Java Spring Boot. Before going to. 5. Recommendation. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. servlet. Learn how to query a list of. Explore the AEM GraphQL API. Build ReactJS (with Apollo Client library) and jQuery client applications to consume the API. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Move to the app folder. This tutorial explores how AEM Content Services can be used to power the experience of an Mobile App that displays Event information (music, performance, art, etc. To allow the client to access the GraphQL API, you need to also add Okta authentication to the Angular application. aem. Architecture. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js; How to set up a Gatsby app. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. 0 @okta/[email protected]. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. GraphQL efficiently retrieves data from AEM, and we’ll set up and configure endpoints to expose desired data. 3 and above. servlet. The zip file is an AEM package that can be installed directly. Cloud Service; AEM SDK; Video Series. Cloud Service; AEM SDK; Video Series. How to use. AEM Headless quick setup using the local AEM SDK 1. In this case, the AEM GraphQL API allows you to use GraphQL directives in order to change the behavior of your queries based on the provided criteria. 1 - Tutorial Set up; 2 - Defining. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. The initial set up of the mock JSON does require a local AEM instance. We set up headless content delivery and headless content management by using AEM’s GraphQL to deliver and Assets API to manage content (via Content Fragments). Add a copy of the license. x. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Using GraphQL on the other hand does NOT have the extra unwanted data. npm install -E @okta/okta-angular@4. In this example, we will use Hygraph as our content platform which will give us server-side GraphQL API to interact with. 1. x. They are channel-agnostic, which means you can prepare content for various touchpoints. Once headless content has been translated,. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Using this path you (or your app) can:</p> <ul dir="auto"> <li>access the GraphQL schema,</li> <li>send your GraphQL queries,</li> <li>receive the responses (to your. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. x. Developer. The zip file is an AEM package that can be installed directly. GraphQL API. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. Download the AEM core components and add a CIF code to your system. Prerequisites. The schema defines the types of data that can be queried and manipulated using GraphQL,. Build a React JS app using GraphQL in a pure headless scenario. Cloud Service; AEM SDK; Video Series. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). Download the latest GraphiQL Content Package v. Server-Side Setup. In AEM 6. src/api/aemHeadlessClient. Experience League The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. js implements custom React hooks. ui. (SITES. We're going to create a GraphQL schema – a type system that describes your universe of data – that wraps calls to your existing REST API. AEM. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. for the season, ignoring distant calls of civilization urging them to return to normal lives. Persisted queries will optimize performance and caching. The CIF Core Components and the Commerce Add-On connect to a Magento (or alternative) via GraphQL. Cloud Service; AEM SDK; Video Series. 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. Please ensure that the previous chapters have been completed before proceeding with this chapter. sites. content as a dependency to other project's. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. Next. Experience Manager. Content Fragments are used, as the content is structured according to Content Fragment Models. Content fragments contain structured content: They are based on a. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment. Cloud Service; AEM SDK; Video Series. Content Fragments in. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. This cross-site request requires CORS to be set up on AEM to allow request from the Netlify domain to access its content. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. Create Content Fragments based on the. AEM as a Cloud Service and AEM 6. To set up your PWA Studio app, follow the Adobe Commerce PWA Studio documentation. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. This repository demonstrates how to use the Vue Storefront AEM integration with these examples:. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. Created for: Developer. The version of Dispatcher Tools is different from that of the AEM SDK. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. Cloud Service; AEM SDK; Video Series. This tutorial will introduce you to the fundamental concepts of GraphQL including −. Experience League 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. Querying AEM using GraphQL using persisted queries (as opposed to client-defined GraphQL queries) allows developers to persist a query (but not its results) in AEM, and then request the query to be executed by name. Using GraphQL on the other hand does NOT have the extra unwanted data. 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. Review existing models and create a model. Magento does indeed expose a rich GraphQL API that is used on the AEM side to integrate both e-commerce data (product catalog) and functionalities (cart and checkout) into AEM. Enabling your GraphQL Endpoint. It works perfectly fine for one or multiple commerce websites. graphql. TIP. js implements custom React hooks return data from AEM. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. User. x. Understand the benefits of persisted queries over client-side queries. Prerequisites. After a user creates a Content Fragment based on the Article model, it can then be interrogated through GraphQL. 1. Changes in AEM as a Cloud Service. The developer performs most of the technical configurations to enable Content Architect and Content Authors to produce headless content. The first step is to set up an Express server, which you can do before writing any GraphQL code. Now that you’ve initialized the project, install the packages you need to set up the GraphQL server: sudo npm install --save express express-graphql graphql Create a new file called index. Search for “GraphiQL” (be sure to include the i in GraphiQL). Browse the following tutorials based on the technology used. x. 0 or later Included in the WKND Mobile AEM Application Content Package below; Prior to starting this tutorial ensure the following AEM instances are installed and running on your local machine:. We will be using ES Modules in setting up the project. Developer. This guide uses the AEM as a Cloud Service SDK. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Also, review How to execute a Persisted query, Using query variables, and Encoding the query URL for use by an app to learn persisted query execution by client applications. AEM Headless quick setup using the local AEM SDK. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. Run AEM as a cloud service in. Select the commerce configuration you want to change. Prerequisites. The query could look like this: query GetAlbumById { album (id: "1") { title genre artist { name } } } And in the resolver on the server, we’d pull the id value out from args and use it to filter our data. PrerequisitesQuick setup. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. 5 the GraphiQL IDE tool must be manually installed. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. 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. This cross-site request requires CORS to be set up on AEM to allow request from the Netlify domain to access its content. In this video you will: Understand the power behind the GraphQL language. Rename the jar file to aem-author-p4502. It does not look like Adobe is planning to release it on AEM 6. Project Configurations; GraphQL endpoints;. Prerequisites. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. CRXDE Lite is embedded into CRX/AEM and enables you to perform standard development tasks in the browser. cd next-graphql-app. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM WCM Core Components 2. As your organization grows, it’s common for multiple API services to be created, each one providing its own feature set. Also, review How to execute a Persisted query, Using query variables, and Encoding the query URL for use by an app to learn persisted query execution by client applications. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. AEM Headless Developer Portal; Overview; Quick setup. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Let’s create some Content Fragment Models for the WKND app. Learn how to create GraphQL queries to return content from Adobe Experience Manager (AEM) and how to use the GraphiQL tool to quickly test, refine, and debug queries. This guide uses the AEM as a Cloud Service SDK. js installed on your machine, run the following commands to set up your server environment: --CODE language-markup line-numbers--npm init //creates your package. GraphQL API. Create Content Fragment Models. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. The content resides in AEM. Explore the AEM GraphQL API. Actually Using the AEM GraphQL API Initial Setup. Understand how the Content Fragment Model. Instead of configuring and maintaining Indexes on single AEM instances, the Index configuration has to be specified. Experience LeagueThe 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. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. zip file. I had completely setup the AEM SDK with the Venia store front, the products are coming on the page but i could observe that , I am encountering one issue. Prerequisites. AEM performs best, when used together with the AEM Dispatcher cache. Gatsby is able to automatically infer a GraphQL Schema from your data, and in many cases, this is really all you need. On your terminal run the following command. Clone the adobe/aem-guides-wknd-graphql repository: 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 in a client application. By “mocking” the JSON, we remove the dependency on a local AEM instance. Navigate to Tools > General > Content Fragment Models. Cloud Service; AEM SDK; Video Series. In AEM 6. 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 in a client application. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably 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 in a client application. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Requires JDK 11; The React application is designed to connect to an AEM Publish environment, however it can source content from AEM Author if authentication is provided in the React application’s configuration. 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 in a client application. It require basic understanding of below mentioned points to look into GraphQL implementation: Setup AEM as a cloud service in local; Headless Architecture; Content. The GraphQL schema can contain sensitive information. Take an exam and earn a credential that validates your skills and knowledge. Click Install. TIP. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. Querying AEM using GraphQL using persisted queries (as opposed to client-defined GraphQL queries) allows developers to persist a query (but not its results) in AEM, and then request the query to be executed by name. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. Link to Non-frame version. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. Requirements. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Courses. Throughout the tutorial, we’ll provide explanations, code examples, and practical tips. Content Fragments in AEM provide structured content management. Persisted GraphQL queries. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted Queries; Basic Tutorial. Further Reference. Included in the WKND Mobile AEM Application Content Package below. zip or greater aem-guides-wknd-graphql source code This tutorial. Use GraphQL schema provided by: use the drop-down list to select the required. Open command prompt and navigate to the aem-forms-addon-native-<version> folder. This is done by sending a GraphQL query to the endpoint, which will then return the requested data in a JSON format. The following table lists Forms-specific AEM groups, available out of the box, and corresponding user types. From the AEM Start menu, navigate to Tools > Deployment > Packages. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. AEM Headless Developer Portal; Overview; Quick setup. The following configurations are examples. @pradeepdubey82 Does the above mean, that you have defined a custom Endpoint instead of OOTB Global Endpoint?If that is so, custom Global Endpoint will work perfectly with External System, it is only the graphiQL interface that is bound to global. GraphqlClientImpl-default. AEM GraphQL API requests. x. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. js and subsequently open this file by running: sudo nano index. Learn how to query a list of Content. 1. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development)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. It only takes about 20–30 minutes, and by the end of it you’ll have a very simple React UI that loads its data with. supports headless CMS scenarios where external client applications render. 1. Create Content Fragments based on the. 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. Experience LeagueAn 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. Quick setup. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Persisted GraphQL queries. Learn about the various data types used to build out the Content Fragment Model. Create Content Fragments based on the. Add a copy of the license. This video is an overview of the GraphQL API implemented in AEM. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). Learn how to configure Cross-origin resource sharing (CORS) for use with AEM GraphQL. Persisted GraphQL queries. Contact Adobe to enable this capability for your AEM Cloud Service program and environments. The Create new GraphQL Endpoint dialog opens. AEM GraphQL API requests. . 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted Queries; Basic Tutorial. TIP. Content Fragments. Experience LeagueThe GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Contact Adobe to enable this capability for your AEM Cloud Service program and environments. can you validate couple of things ? Ensure that all the GraphQL related necessary dependencies and configurations are properly resolved. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service. Double-click the aem-author-p4502. Learn how to configure AEM hosts in AEM Headless app. Created for: Beginner. Now that you have created a Content Fragment, you can move on to the final part of the getting started guide and create API requests to access and deliver content fragments. I have a bundle project and it works fine in the AEM. This guide uses the AEM as a Cloud Service SDK. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted Queries; Basic Tutorial. As the stars come out, we set up our cameras for timelapses, hoping to capture some of the magic.