This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. This guide uses the AEM as a Cloud Service SDK. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. A client-side REST wrapper #. e ~/aem-sdk/author. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. Add Sling Mappings to AEM that map the SPA routes to resources in AEM; Set up AEM’s Cross-Origin Resource Sharing security policies that allow the Remote SPA to consume content from AEM; Deploy the AEM project to your local AEM SDK Author service; Mark an AEM Page as the Remote SPA’s root using the SPA Host URL page property; Next Steps 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. 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. This starts the author instance, running on port 4502 on the local computer. 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. Rich text with AEM Headless. xml, updating the <target> to match the embedding WKND apps' name. Download the latest GraphiQL Content Package v. This guide uses the AEM as a Cloud Service SDK. Cloud Service; AEM SDK; Video Series. Project Configurations; GraphQL endpoints;. They are channel-agnostic, which means you can prepare content for various touchpoints. There are a couple ways to do this in this case we will use the create-next-app command. Fetching structured data with GraphQL. Open your page in the editor and verify that it behaves as expected. Query for fragment and content references including references from multi-line text fields. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service. This setup establishes a reusable communication channel between your React app and AEM. Persisted GraphQL queries. Prerequisites. 5. Learn about the various data types used to build out the Content Fragment Model. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 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. To enable the corresponding endpoint: . Quick setup. Learn how to create relationships between Content Fragment Models in Adobe Experience Manager (AEM) and how to leverage these relationships in 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. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) as a Cloud Service server. Prerequisites. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. properties file beneath the /publish directory. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Quick Setup in AEM Let's start with the basic setup to see how simple the configuration is. The WKND client application connects to AEM publish service, so it is important that you published the following to the AEM publish service. ; We're using Magento in this example but the AEM. Prerequisites. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. In previous releases, a package was needed to install the GraphiQL IDE. Hence, AEM uses GraphQL to exchange commerce data with Adobe Commerce and with any commerce engine via I/O Runtime. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. Persisted queries are similar to the concept of stored procedures in SQL databases. This is, as mentioned, usually a very inefficient process. From the developer perspective, you gain simplicity and a central place to setup libraries, tools and your IDE extensions. Add the aem-guides-wknd-shared. The ImageRef type has four URL options for content references: _path is the referenced path in AEM, and does not include an AEM origin (host name) _dynamicUrl is the full URL to the preferred, web-optimized image asset. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. AEM Headless Developer Portal; Overview; Quick setup. Anatomy of the React app. Search for “GraphiQL” (be sure to include the i in GraphiQL ). This should typically stay at default. js application is invoked from the command line. GraphQL efficiently retrieves data from AEM, and we’ll set up and configure endpoints to expose desired data. Setup PWA Studio. Set up your basic Node. The following tools should be installed locally: JDK 11; Node. The zip file is an AEM package that can be installed directly. Learn how to model content and build a schema with Content Fragment Models in AEM. Prerequisites. Next, deploy the updated SPA to AEM and update the template policies. Update Policies in AEM. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. You need to send the queries from the client, you can just send strings but if you want more comfort and caching you'll use a client library -> extra code in your client. Assuming you already have Node. methods must be set to [GET]Quick setup. You need to have access to Cloud Manager. 1. Imagine a standalone Spring boot application (outside AEM) needs to display content. 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. 10. This schema will receive and resolve GraphQL queries all on the client side. Prerequisites. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. To help with this see: A sample Content Fragment structureThe other fields were added automatically by AEM, and represent helpful methods to provide information about a certain Content Fragment; in this example, (the helper fields) _path, _metadata, _variations. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. In previous releases, a package was needed to install the GraphiQL IDE. content artifact in the other WKND project's all/pom. In previous releases, a package was needed to install the GraphiQL IDE. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. The basic idea is to have one configuration file that any GraphQL tool could consume. The schema defines the types of data that can be queried and manipulated using GraphQL,. 2. The zip file is an AEM package that can be installed directly. Here you can specify: ; Name: name of the endpoint; you can enter any text. Install GraphiQL IDE on 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 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. ViewsCreated for: User. 10. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. 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. 5. x. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. Cloud Service; AEM SDK; Video Series. Additionally, enable the GraphQL endpoint configurations that can be consumed by external applications to fetch headless content. Recommended courses. Before starting with queries on your content you need to: Enable your endpoint Use Tools -> General -> GraphQL; Enabling your GraphQL Endpoint. The ImageComponent component is only visible in the webpack dev server. The Create new GraphQL Endpoint dialog will open. ) that is curated by the. The latest version of AEM and AEM WCM Core Components is always recommended. zip file. Experience League The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. In AEM 6. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Clone the adobe/aem-guides-wknd. Tutorial Set up. Using an AEM dialog, authors can set the location for the. Navigate to Tools > General > Content Fragment Models. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. It does not look like Adobe is planning to release it on AEM 6. ui. 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. 18, from inside the Page Editor, if you select [!UICONTROL Publish Page], you are redirected to a URL that does not exist. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. Figure 1 illustrates a simple and pretty typical deployment of AEM as a Cloud Services together with a single instance of Adobe Commerce. js v18; Git; 1. TIP. json file. Using GraphQL on the other hand does NOT have the extra unwanted data. Navigate to the Software Distribution Portal > AEM as a Cloud Service and download the latest version of the AEM SDK. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. Navigate to Tools > General > Content Fragment Models. Quick setup. 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. 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. AEM and Adobe Commerce are seamlessly integrated using the Commerce Integration Framework (CIF). The content resides in AEM. x. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. First, install the dependencies: npm install graphql-tag next-urql react-is urql isomorphic-unfetch Then, create a new file at /pages/_app. Cloud Service; AEM SDK; Video Series. The use of React is largely unimportant, and the consuming external application could be written in any framework for any platform. Content fragments in AEM enable you to create, design, and publish page-independent content. In this video you will: Learn how to create and define a Content Fragment Model. In addition, endpoints also dont work except /global endpoint in AEM 6. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development) Adobe has adopted Adobe Commerce’s GraphQL APIs as its official commerce API for all commerce-related data. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. 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. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Prerequisites. Select Create. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. 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. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. AEM as a Cloud Service and AEM 6. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the content over AEM Headless GraphQL APIs. 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 first step is to set up an Express server, which you can do before writing any GraphQL code. GraphQL for AEM - Summary of Extensions. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). Dynamic navigation is implemented using Angular routes and added to an existing Header component. 5(latest service pack — 6. The ecosystem is still rapidly evolving so you have to keep up. Learn how to configure Cross-origin resource sharing (CORS) for use with AEM GraphQL. Get started with Adobe Experience Manager (AEM) and GraphQL. . Before going to. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. In AEM 6. AEM 6. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. 6. 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. This repository demonstrates how to use the Vue Storefront AEM integration with these examples:. This article describes how to work with large results in AEM Headless to ensure the best performance for your application. x. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. 12) Java 11; Node JS; NPM; CIF addon/Venia sample project setup: As a first step, download the CIF addon compatible with AEM 6. To connect PWA Studio with the GraphQL endpoint of AEM, you can use the AEM Extension for PWA. for the season, ignoring distant calls of civilization urging them to return to normal lives. 6+ Git macOS only prerequisites Xcode or Xcode command line tools aem-guides-wknd. Program ID: Copy the value from Program Overview >. GraphQL API. 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. 5 service pack 12. Once headless content has been translated, and. They let you prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. js server. Even in a query, one can. 5. js implements custom React hooks. Cloud Service; AEM SDK; Video Series. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development)Imagine a standalone Spring boot application (outside AEM) needs to display content. AEM as a Cloud Service and AEM 6. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. js and subsequently open this file by running: sudo nano index. CRXDE Lite is embedded into CRX/AEM and enables you to perform standard development tasks in the browser. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. View next: Learn. See Generating Access Tokens for Server-Side APIs for full details. Update cache-control parameters in persisted queries. jar) to a dedicated folder, i. npx create-next-app --ts next-graphql-app. As your organization grows, it’s common for multiple API services to be created, each one providing its own feature set. AEM Headless quick setup using the local AEM SDK. Developer. 3. src/api/aemHeadlessClient. Wrap the React app with an initialized ModelManager, and render the React app. Contribute to adobe/aem-react-spa development by creating an account on GitHub. An end-to-end tutorial illustrating how to build-out and expose content. Install the AEM SDK. By “mocking” the JSON, we remove the dependency on a local AEM instance. This guide uses the AEM as a Cloud Service SDK. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the. This part of the journey applies to the Cloud Manager administrator. Previous page. x. With CRXDE Lite,. Download the AEM core components and add a CIF code to your system. 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. Author in-context a portion of a remotely hosted React. Select Create. It also allows AEM Authors to use Product and Category Pickers and the Product Console to browse through product and. 17 and AEM 6. This component is able to be added to the SPA by content authors. Anatomy of the React app. PrerequisitesFor authentication, the third-party service must retrieve an Access Token that can then be used in the GraphQL Request. 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. 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. AEM GraphQL API requests. in folder . Can you also check the GraphQL endpoint, schema definitions, and permissions. 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. Imagine a standalone Spring boot application (outside AEM) needs to display content. Last update: 2023-04-26 Topics: GraphQL API Created for: Intermediate Developer Deploying an AEM Headless application requires attention to how AEM URLs are. Learn. Prerequisites. 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. x. 13. This guide uses the AEM as a Cloud Service SDK. Developer. This can be done by creating a new GraphQL servlet in the AEM configuration manager, and then adding the required GraphQL schema and queries to the servlet. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. 1 - Tutorial Set up; 2 - Defining. This setup uses the AEM as a Cloud Service SDK to explore AEM’s GraphQL. The CIF Core Components and the Commerce Add-On connect to a Magento (or alternative) via GraphQL. js Next, add the following code block into the newly created file to set up the GraphQL server:Tools like GraphiQL and GraphQL Playground use the introspection Query to then be able to give the user autocompletion functionalities. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. They can be requested with a GET request by client applications. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to. This video is an overview of the GraphQL API implemented in AEM. Using GraphQL on the other hand does NOT have the extra unwanted data. AEM GraphQL API requests. Add a copy of the license. I personally prefer yarn, but you can use npm as well, there’s no issue there. The initial set up of the mock JSON does require a local AEM instance. Cloud Service; AEM SDK; Video Series. 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). We have done a small schema setup wherein we have one model named NextUser and another model named Post. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. AEM as a Cloud Service; Local set up using the AEM Cloud Service SDK. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. 5 the GraphiQL IDE tool must be manually installed. For example, C:aemauthor. x. Now, clone the venia sample store project. It require basic understanding of below mentioned points to look into GraphQL implementation: Setup AEM as a cloud service in local; Headless Architecture; Content Fragment; Configure GraphQL endpointThe 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 GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. Command line parameters define: The AEM as a Cloud Service Author. AEM Headless quick setup using the local AEM SDK 1. File code below:Sling uses a Java Content Repository, such as Apache Jackrabbit, or in the case of AEM, the CRX Content Repository as its data store. The GraphiQL IDE is available in AEM for you to develop, test, and persist your GraphQL queries, before transferring to your production environment. Navigate to the Software Distribution Portal > AEM as a Cloud Service. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. ; Use GraphQL schema provided by: use the dropdown to select the required site/project. Client type. Overview; 1 - Content modeling; 2 - AEM Headless APIs and React; 3 - Complex components;. Prerequisites. What you will build. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. This setup pattern is currently used by the majority of our AEM Content and Commerce customers. extensions must be set to [GQLschema] sling. 5 Forms or earlier to AEM Forms as a Cloud Service; Groups and permissions; Import, export, and organize Adaptive Forms, PDF forms, and other assets; Integrate. Learn about the different data types that can be used to define a schema. 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. 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:. Prerequisites. 1. The following properties can be configured: GraphQL Client - select the configured GraphQL client for commerce backend communication. 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. 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. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. 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. To address this problem I have implemented a custom solution. Get a top-level overview of the. This setup establishes a reusable communication channel between your React app and AEM. Prerequisites. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). The Single-line text field is another data type of Content. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. In this video you will: Understand the power behind the GraphQL language. AEM 6. To fetch this, we could write a query that passes in an id and asks for the album with the title, artist and genre fields. The reason is because out of the box, PWA Studio works with a single Adobe Commerce GraphQL endpoint. 10. Then embed the aem-guides-wknd-shared. Build ReactJS (with Apollo Client library) and jQuery client applications to consume the API. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. Learn about advanced queries using filters, variables, and directives. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Persisted queries are similar to the concept of stored procedures in SQL databases. Developer. 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. Developer. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment. User. As the stars come out, we set up our cameras for timelapses, hoping to capture some of the magic. This will also enable the GraphiQL IDE. It also allows a front-end developer to update the JSON model in order to test functionality and drive changes to the JSON API that would then be later implemented by a back-end developer. 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. 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. Create Content Fragments based on the. In this video you will: Understand the power behind the GraphQL. 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. GraphQL query is an API for headless architecture to deliver content fragment data in the form of JSON. 1. Connect them to Magento instance: AEM GraphQL is typically enabled by. This cross-site request requires CORS to be set up on AEM to allow request from the Netlify domain to access its content. Search for “GraphiQL” (be sure to include the i in GraphiQL ). Select WKND Shared to view the list of existing. Create Content Fragments based on the. Responsible Role. Repeat the above steps to create a fragment representing Alison Smith:Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. 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. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service. 122. The Create new GraphQL Endpoint dialog opens. Created for: Beginner. 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. 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. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. To use GraphQL in AEM, you will need to create a GraphQL endpoint in AEM. Tutorials by framework. The zip file is an AEM package that can be installed directly. It needs to be provided as an OSGi factory configuration; sling. To help with this see: A sample Content Fragment structure. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM Headless Developer Portal; Overview; Quick setup.