AEM Headless Tutorial - React App | AEM Community Blog Seeding

AEM Headless Tutorial - React App by Adobe Docs

Abstract

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.

Prerequisites
The following tools should be installed locally:

JDK 11
Node.js v10+
npm 6+
Git
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
REACT_APP_HOST_URI=http://localhost:4503

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

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

# For Service toke auth, provide path to service token file (download file from Cloud console)
REACT_APP_SERVICE_TOKEN=auth/service-token.json

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

Read Full Blog

AEM Headless Tutorial - React App

Q&A

Please use this thread to ask the related questions.