Get started with AEM Content Fragment Delivery with OpenAPI APIs
Explore this tutorial illustrating how to build-out and expose AEM content using AEM鈥檚 Content Fragment Delivery with OpenAPI APIs and consumed by an external app, in a headless CMS scenario. This explores these concepts by walking thought the creation of a React app that displays WKND teams and associated member details. Teams and Members are modeled using AEM Content Fragment Models, and consumed by the React app using AEM Content Fragment Delivery with OpenAPI APIs.
This tutorial covers the following topics:
- Create a Project Configuration
- Create Content Fragment Models to model data
- Create Content Fragments based on the previously made models
- Explore how Content Fragments in AEM can be queried using the AEM Content Fragment Delivery with OpenAPI APIs documentation鈥檚 鈥淭ry It鈥 feature
- Consume Content Fragment data via AEM Content Fragment Delivery with OpenAPI API calls from a sample React app
- Enhance the React app to be editable in Universal Editor
Prerequisites prerequisites
The following are required to follow this tutorial:
-
AEM Sites as a Cloud Service
-
Basic HTML and JavaScript skills
-
The following tools must be installed locally:
- An IDE (for example, )
AEM as a Cloud Service environment
To complete this tutorial, it is recommended that you have AEM Administrator access to an AEM as a Cloud Service environment. A Development environment, Rapid Development Environment, or an environment in a Sandbox Program can also be used.
Let鈥檚 get started!
Start the tutorial with Defining Content Fragment Models.
GitHub project
The source code, and content packages are available in the GitHub repository.
The for this tutorial.
Snapshots of the code at the end of each step are available as Git tags.
- Start of chapter 4 - React app:
- End of chapter 4 - React app:
- End of chapter 5 - Universal Editor:
If you find an issue with the tutorial or the code, leave a .