React App - WKND Adventures

An example React application that highlights Adobe Experience Manager's GraphQL APIs and the AEM Headless Client for JavaScript.

This project was bootstrapped with Create React App.

Tutorial

A corresponding tutorial is available where you can learn how to setup and run the application to query data from an AEM environment using GraphQL.

How to use

1. On the target AEM environment install the aem-guides-wknd-shared.ui.content-x.x.x.zip from the latest release of the WKND Shared Content using Package Manager.

2. Update the environment variables to point to your target AEM instance and add authentication (if needed)

3. Download and install Node.js and npm

4. Start the app from the command line:

   $ cd aem-guides-wknd-graphql/react-app-tutorial
   $ npm install
   $ npm start

On local environments it may be easier to simply install the full WKND Site 2.0+ which will include the WKND Shared content and additional CORS configurations.

System Requirements

AEM as a Cloud Service | AEM 6.5 | Sample Content | Node | npm | ------------------------|---------|--------------------|---------|-----| Continual | 6.5.13+ | WKND Shared 2.0+ or WKND Site 2.0+| 10+ | 6+

Notes

Update Environment Variables

Several environment variables are used by this project to connect to an AEM environment. Default connects to an AEM author environment running at http://localhost:4502. If you wish to change this behavior update the .env.development file accordingly:

• REACT_APP_HOST_URI=http://localhost:4502 - Set to AEM target host
• REACT_APP_AUTH_METHOD= - The preferred authentication method.
  • service-token - use Service token exchange for Cloud Env PROD
  • dev-token - use Dev token for local development with Cloud Env
  • basic - use user/pass for local development with Local Author Env
  • leave blank to use no authentication method
• REACT_APP_BASIC_AUTH_USER=admin - set basic auth user credentials to use if connecting to an AEM Author environment (for development only). If connecting to a Publish environment, this setting is not necessary.
• REACT_APP_BASIC_AUTH_PASS=admin - set the basic auth password used for connecting to an AEM Author environment (for development only). If connecting to a Publish environment, this setting is not necessary.
• REACT_APP_DEV_TOKEN - Dev token string. To connect to remote instance, you can use Bearer auth with a local DEV token from Cloud console
• REACT_APP_SERVICE_TOKEN - Path to service token file. To connect to remote instance, authentication can be done with Service token also (download file from Cloud console)

Proxy API Requests

When using the webpack development server (npm start) the project relies on a proxy setup using http-proxy-middleware. The file is configured at src/setupProxy.js and relies on several custom environment variables set at .env and .env.development.

If connecting to an AEM author environment, the corresponding authentication method needs to be configured.

CORS - Cross Origin Resource Sharing

The proxy method for local development avoids any CORS issues since all of the requests in the browser appear to be from the same origin. When running a production version of the app this will not be the case. Pre-built CORS configurations are deployed automatically if installing the full WKND code base: https://github.com/adobe/aem-guides-wknd. The full WKND code base includes wknd-shared content (images and content fragments).

Several CORS configurations must be set on the target AEM environment:

• OSGi CORS Configuration - A configuration that is deployed as part of an AEM project. Example OSGi Config

• Dispatcher headers - The AEM dispatcher must also be enabled to pass through the following client headers:

  "Origin"
  "Access-Control-Request-Method"
  "Access-Control-Request-Headers"

  • Example cached headers
  • Example client headers

This is a sample CORS config for Author environment if Proxy is set to False

Documentation

• AEM Headless Tutorials
• AEM Headless Developer Journey
• AEM Headless Client for JavaScript