Lokale Entwicklungseinrichtung

Klonen Sie die React-App „WKND Teams“ aus der Lösungsverzweigung basic-tutorial.

$ git clone -b solution/basic-tutorial git@github.com:adobe/aem-guides-wknd-graphql.git

Navigieren Sie zum Verzeichnis basic-tutorial und öffnen Sie es in Ihrem Code-Editor.

$ cd aem-guides-wknd-graphql/basic-tutorial
$ code .

Installieren Sie die Abhängigkeiten und starten Sie die React-App:

$ npm install
$ npm start

Öffnen Sie die React-App „WKND Teams“ in Ihrem Browser unter http://localhost:3000. Es wird eine Liste der Team-Mitglieder und deren Details angezeigt. Der Inhalt für die React-App wird vom lokalen AEM-SDK mithilfe von GraphQL-APIs (/graphql/execute.json/my-project/all-teams) bereitgestellt, die Sie auf der Registerkarte „Netzwerk“ des Browsers überprüfen können.

Laden Sie die aktuelle Version des universellen Editor-Dienstes vom Software-Verteilungsportal herunter.

Extrahieren Sie die heruntergeladene ZIP-Datei und kopieren Sie die Datei universal-editor-service.cjs in ein neues Verzeichnis namens universal-editor-service.

$ unzip universal-editor-service-vproduction-<version>.zip
$ mkdir universal-editor-service
$ cp universal-editor-service.cjs universal-editor-service

Erstellen Sie im Verzeichnis universal-editor-service eine .env-Datei und fügen Sie die folgenden Umgebungsvariablen hinzu:

# The port on which the Universal Editor service runs
UES_PORT=8000
# Disable SSL verification
UES_TLS_REJECT_UNAUTHORIZED=false

Starten Sie den lokalen universellen Editor-Dienst.

$ cd universal-editor-service
$ node universal-editor-service.cjs

Installieren Sie das Paket local-ssl-proxy global.

$ npm install -g local-ssl-proxy

Starten Sie zwei Instanzen des lokalen SSL-HTTP-Proxys für die folgenden Dienste:

• Lokaler SSL-HTTP-Proxy für AEM-SDK auf Port 8443.
• Lokaler SSL-HTTP-Proxy für den universellen Editor-Dienst am Port 8001.

# AEM SDK local SSL HTTP proxy on port 8443
$ local-ssl-proxy --source 8443 --target 4502

# Universal Editor service local SSL HTTP proxy on port 8001
$ local-ssl-proxy --source 8001 --target 8000

Stoppen Sie die React-App, indem Sie im Terminal Ctrl + C eingeben.

Aktualisieren Sie die Datei package.json so, dass die Umgebungsvariable HTTPS=true in das Skript start aufgenommen wird.

"scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
}

Aktualisieren Sie den REACT_APP_HOST_URI in der Datei .env.development so, dass er das HTTPS-Protokoll und den lokalen SSL-HTTP-Proxy-Port des AEM-SDK verwendet.

REACT_APP_HOST_URI=https://localhost:8443
...

Aktualisieren Sie die Datei ../src/proxy/setupProxy.auth.basic.js so, dass entspannte SSL-Einstellungen mit der Option secure: false verwendet werden.

...
module.exports = function(app) {
app.use(
    ['/content', '/graphql'],
    createProxyMiddleware({
    target: REACT_APP_HOST_URI,
    changeOrigin: true,
    secure: false, // Ignore SSL certificate errors
    // pass in credentials when developing against an Author environment
    auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`
    })
);
};

Starten Sie die React-App.

$ npm start

Öffnen Sie den universellen Editor https://experience.adobe.com/#/aem/editor in Ihrem Browser. Wenn Sie dazu aufgefordert werden, melden Sie sich mit Ihrer Adobe ID an.

Geben Sie die URL der React-App „WKND Teams“ im Eingabefeld für die Website-URL des universellen Editors ein und klicken Sie auf Open.

Die React-App „WKND Teams“ wird im universellen Editor geladen, Sie können den Inhalt jedoch noch nicht bearbeiten. Sie müssen die React-App instrumentieren, um die Inhaltsbearbeitung mit dem universellen Editor zu aktivieren.