Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

React App - AEM Headless Example | AEM Community Blog Seeding

Avatar

Administrator

BlogImage.jpg

React App - AEM Headless Example by Adobe

Abstract

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

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

git clone git@github.com:adobe/aem-guides-wknd-graphql.git
Edit the aem-guides-wknd/react-app/.env.development file and ensure that REACT_APP_HOST_URI points to your target AEM instance. Update the authentication method (if connecting to an author instance).

# Server namespace
REACT_APP_HOST_URI=http://localhost:4503
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
...
Open a terminal and run the commands:

$ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
A new browser window should load on http://localhost:3000

A list of adventures from the WKND reference site should be displayed on the application.

Read Full Blog

React App - AEM Headless Example

Q&A

Please use this thread to ask the related questions.

0 Replies