This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL API, including using AEM GraphQL in a client application.
Complete the quick setup for AEM as a Cloud Service to configure your environment.
It is highly recommended that you complete the previous basic tutorial and video series tutorials before proceeding with this advanced tutorial. Although you can complete the tutorial using a local AEM environment, this tutorial only covers the workflow for AEM as a Cloud Service.
This tutorial covers the following topics:
The following video provides a high-level overview of the concepts that are covered in this tutorial. The tutorial includes defining Content Fragment Models with more advanced data types, nesting Content Fragments, and persisting GraphQL queries in AEM.
The WKND Site project has all necessary configurations, so you can start the tutorial right after you complete the quick setup. This section only highlights some important steps that you can use when creating your own AEM Headless project.
The first step to starting any new project in AEM is creating its configuration, as a workspace and to create GraphQL API endpoints. To view or create a configuration, navigate to Tools > General > Configuration Browser.
Observe that the WKND Site configuration has already been created for the tutorial. To create a configuration for your own project, select Create in the top-right corner and complete the form in the Create Configuration modal that appears.
Next, you must configure API endpoints to send GraphQL queries to. To review existing endpoints or create one, navigate to Tools > Assets > GraphQL.
Observe that the global and WKND endpoints have already been created. To create an endpoint for your project, select Create in the top-right corner and follow the workflow.
After saving the endpoint, you will see a modal about visiting the Security Console, which allows you to adjust security settings if you wish to configure access to the endpoint. Security permissions themselves are outside of the scope of this tutorial, however. For more information, refer to the AEM documentation.
A language root folder is a folder with an ISO language code as its name such as EN or FR. The AEM translation management system uses these folders to define the primary language of your content and languages for content translation.
Go to Navigation > Assets > Files.
Navigate into the WKND Site folder. Observe the folder with the title “English” and the name “EN”. This folder is the language root folder for the WKND Site project.
For your own project, create a language root folder inside your configuration. See the section on creating folders for more details.
Finally, you must assign your project’s configuration to the language root folder. This assignment enables the creation of Content Fragments based on Content Fragment Models defined in your project’s configuration.
To assign the language root folder to the configuration, select the folder, then select Properties in the top navigation bar.
Next, navigate to the Cloud Services tab and select the folder icon in the Cloud Configuration field.
In the modal that appears, select your previously created configuration to assign the language root folder to it.
The following are best practices when creating your own project in AEM:
Two AEM packages are available and can be installed via Package Manager
Two React JS projects are available to experiment with queries from a headless client application.
To get started with this advanced tutorial, follow these steps: