Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!

AEM Headless Tutorial - React App | AEM Community Blog Seeding





AEM Headless Tutorial - React App by Adobe Docs


Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app.

React app with AEM Headless

View the source code on GitHub

A full step by step tutorial describing how this React app was build is available.

The following tools should be installed locally:

JDK 11
Node.js v10+
npm 6+
AEM requirements
The React application works with the following AEM deployment options. All deployments requires the WKND Site v2.0.0+ to be installed.

AEM as a Cloud Service
Local set up using the AEM Cloud Service SDK
AEM 6.5 SP13+ QuickStart
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.

How to use
Clone the adobbe/aem-guides-wknd-graphql repository:

$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
Edit the aem-guides-wknd-graphql/react-app/.env.development file and set REACT_APP_HOST_URI to point at your target AEM.

Update the authentication method if connecting to an author instance.

# Server namespace

#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication

# For Bearer auth, use DEV token (dev-token) from Cloud console

# For Service toke auth, provide path to service token file (download file from Cloud console)

# For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance)

Read Full Blog

AEM Headless Tutorial - React App


Please use this thread to ask the related questions.