React App

Beispielanwendungen eignen sich hervorragend, um die Headless-Funktionen von Adobe Experience Manager (AEM) zu erkunden. Es wird eine React-Anwendung bereitgestellt, die zeigt, wie Inhalte mithilfe der GraphQL-APIs von AEM abgefragt werden. Der AEM Headless-Client für JavaScript wird verwendet, um die GraphQL-Abfragen auszuführen, die die App unterstützen.

Anzeigen der Quellcode auf GitHub

React Application

Eine vollständige Schritt-für-Schritt-Anleitung ist verfügbar here.

Voraussetzungen

Die folgenden Tools sollten lokal installiert werden:

  • [JDK 11] (https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2Fdc%3AsoftwareType&1_group.propertyvalues.operation=equals&1_group.propertyvalues.0_values=software-type%3Atooling&fulltext=Oracle%7E+JDK%7E+11%7E&orderby=%40jcr%3Acontent Fjcr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14)
  • Node.js v10+
  • npm 6+
  • Git

AEM

Das Programm ist für die Verbindung mit einem AEM konzipiert Autor oder Veröffentlichen Umgebung mit der neuesten Version der WKND-Referenz-Site installiert.

Wir empfehlen Bereitstellen der WKND-Referenz-Site in einer Cloud Service-Umgebung. Lokales Setup mit das AEM Cloud Service SDK oder AEM 6.5 QuickStart-JAR kann auch verwendet werden.

Informationen zur Verwendung

  1. Klonen Sie die aem-guides-wknd-graphql repository:

    git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Bearbeiten Sie die aem-guides-wknd/react-app/.env.development und stellen Sie sicher, dass REACT_APP_HOST_URI verweist auf Ihre Ziel-AEM-Instanz. Aktualisieren Sie die Authentifizierungsmethode (wenn Sie eine Verbindung zu einer Autoreninstanz herstellen).

    # 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
    ...
    
  3. Öffnen Sie ein Terminal und führen Sie die Befehle aus:

    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  4. Ein neues Browser-Fenster sollte in http://localhost:3000

  5. Eine Liste der Abenteuer von der WKND-Referenz-Website sollte auf der Anwendung angezeigt werden.

Der Code

Nachstehend finden Sie eine kurze Zusammenfassung der wichtigen Dateien und des Codes, mit denen die Anwendung betrieben wird. Den vollständigen Code finden Sie unter GitHub.

AEM Headless-Client für JavaScript

Die AEM Headless-Client wird verwendet, um die GraphQL-Abfrage auszuführen. Der AEM Headless-Client bietet zwei Methoden zum Ausführen von Abfragen. runQuery und runPersistedQuery.

runQuery führt eine standardmäßige GraphQL-Abfrage für AEM Inhalt aus und ist der gängigste Typ der Abfrageausführung.

Beständige Abfragen sind eine Funktion in AEM, die die Ergebnisse einer GraphQL-Abfrage zwischenspeichert und das Ergebnis dann über GET verfügbar macht. Beständige Abfragen sollten für allgemeine Abfragen verwendet werden, die wiederholt ausgeführt werden. In dieser Anwendung ist die Liste der Abenteuer die erste Abfrage, die auf dem Startbildschirm ausgeführt wird. Dies ist eine sehr beliebte Abfrage, weshalb eine persistente Abfrage verwendet werden sollte. runPersistedQuery führt eine Anfrage für einen persistenten Abfrageendpunkt aus.

src/api/useGraphQL.js ist React Effect Hook , die auf Änderungen am Parameter überwacht query und path. Wenn query leer ist, wird eine persistente Abfrage basierend auf dem path. Hier wird der AEM Headless-Client erstellt und zum Abrufen von Daten verwendet.

function useGraphQL(query, path) {
    let [data, setData] = useState(null);
    let [errorMessage, setErrors] = useState(null);

    useEffect(() => {
      // construct a new AEMHeadless client based on the graphQL endpoint
      const sdk = new AEMHeadless({ endpoint: REACT_APP_GRAPHQL_ENDPOINT })

      // if query is not null runQuery otherwise fall back to runPersistedQuery
      const request = query ? sdk.runQuery.bind(sdk) : sdk.runPersistedQuery.bind(sdk);

      request(query || path)
        .then(({ data, errors }) => {
          //If there are errors in the response set the error message
          if(errors) {
            setErrors(mapErrors(errors));
          }
          //If data in the response set the data as the results
          if(data) {
            setData(data);
          }
        })
        .catch((error) => {
          setErrors(error);
        });
    }, [query, path]);

    return {data, errorMessage}
}

Adventure-Inhalte

Die App zeigt in erster Linie eine Liste von Abenteuern an und gibt Benutzern die Möglichkeit, auf die Details eines Abenteuers zu klicken.

Adventures.js - Zeigt eine Kartenliste von Abenteuern an. Der anfängliche Status verwendet Beständige Abfragen , vorverpackt mit der WKND-Referenz-Website. Der Endpunkt lautet /wknd/adventures-all. Es gibt mehrere Schaltflächen, mit denen Benutzer anhand einer Aktivität mit Filterergebnissen experimentieren können:

function filterQuery(activity) {
  return `
    {
      adventureList (filter: {
        adventureActivity: {
          _expressions: [
            {
              value: "${activity}"
            }
          ]
        }
      }){
        items {
          _path
        adventureTitle
        adventurePrice
        adventureTripLength
        adventurePrimaryImage {
          ... on ImageRef {
            _path
            mimeType
            width
            height
          }
        }
      }
    }
  }
  `;
}

AdventureDetail.js - Zeigt eine Detailansicht des Abenteuers an. Führt eine Abfrage des GraphQL auf Grundlage des Pfads zum Abenteuer durch, der aus der URL geparst wird:

//parse the content fragment from the url
const contentFragmentPath = props.location.pathname.substring(props.match.url.length);
...
function adventureDetailQuery(_path) {
  return `{
    adventureByPath (_path: "${_path}") {
      item {
        _path
          adventureTitle
          adventureActivity
          adventureType
          adventurePrice
          adventureTripLength
          adventureGroupSize
          adventureDifficulty
          adventurePrice
          adventurePrimaryImage {
            ... on ImageRef {
              _path
              mimeType
              width
              height
            }
          }
          adventureDescription {
            html
          }
          adventureItinerary {
            html
          }
      }
    }
  }
  `;
}

Umgebungsvariablen

Mehrere Umgebungsvariablen werden von diesem Projekt verwendet, um eine Verbindung zu einer AEM Umgebung herzustellen. Standard stellt eine Verbindung zu einer AEM Autorenumgebung her, die unter http://localhost:4502 ausgeführt wird. Wenn Sie dieses Verhalten ändern möchten, aktualisieren Sie das .env.development Datei dementsprechend:

  • REACT_APP_HOST_URI=http://localhost:4502 - Festgelegt auf AEM Target-Host
  • REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json - Festlegen des GraphQL-Endpunktpfads
  • REACT_APP_AUTH_METHOD= - Die bevorzugte Authentifizierungsmethode. Optional, standardmäßig wird keine Authentifizierung verwendet.
    • service-token - Service-Token-Austausch für Cloud Env PROD verwenden
    • dev-token - Verwenden des Dev-Tokens für die lokale Entwicklung mit Cloud Env
    • basic - Benutzer/Übergabe für die lokale Entwicklung mit der lokalen Autorenumgebung verwenden
    • leer lassen, keine Authentifizierungsmethode verwenden
  • REACT_APP_AUTHORIZATION=admin:admin - Legen Sie grundlegende Authentifizierungsberechtigungen fest, die beim Herstellen einer Verbindung zu einer AEM-Autorenumgebung verwendet werden (nur für die Entwicklung). Wenn Sie eine Verbindung zu einer Veröffentlichungsumgebung herstellen, ist diese Einstellung nicht erforderlich.
  • REACT_APP_DEV_TOKEN - Entwicklungstoken-Zeichenfolge. Um eine Verbindung zur Remote-Instanz herzustellen, können Sie neben der Option "Grundlegende Authentifizierung (user:pass)"die Option "Bearer-Authentifizierung mit DEV-Token"aus der Cloud-Konsole verwenden
  • REACT_APP_SERVICE_TOKEN - Pfad zur Dienst-Token-Datei. Um eine Verbindung zur Remote-Instanz herzustellen, kann die Authentifizierung auch über das Service-Token erfolgen (Download-Datei von der Cloud-Konsole).

Proxy-API-Anfragen

Bei Verwendung des Webpack Development Servers (npm start) das Projekt auf eine Proxy-Einrichtung using http-proxy-middleware. Die Datei wird konfiguriert unter src/setupProxy.js und verwendet mehrere benutzerdefinierte Umgebungsvariablen, die auf .env und .env.development.

Wenn Sie eine Verbindung zu einer AEM Autorenumgebung herstellen, muss die entsprechende Authentifizierungsmethode konfiguriert werden.

CORS - Cross Origin Resource Sharing

Dieses Projekt beruht auf einer CORS-Konfiguration, die in der Ziel-AEM-Umgebung ausgeführt wird, und geht davon aus, dass die App im Entwicklungsmodus auf http://localhost:3000 ausgeführt wird. Die COR-Konfiguration ist Teil der WKND-Referenz-Site.

CORS-Konfiguration

Beispiel-CORS-Konfiguration für die Autorenumgebung

Auf dieser Seite