React App - AEM Headless Example | AEM Community Blog Seeding

[kautuk_sahni]

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.