Bootstrapping der Remote-SPA für SPA-Editor

Öffnen Sie das Remote-SPA-Projekt unter ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app in Ihrer IDE

Öffnen Sie die Datei .env.development

Achten Sie in der Datei besonders auf die Schlüssel und aktualisieren Sie sie nach Bedarf:

REACT_APP_HOST_URI=http://localhost:4502

REACT_APP_USE_PROXY=true

REACT_APP_AUTH_METHOD=basic

REACT_APP_BASIC_AUTH_USER=admin
REACT_APP_BASIC_AUTH_PASS=admin

Beachten Sie, dass benutzerdefinierte Umgebungsvariablen in React mit dem Präfix REACT_APP_ versehen werden müssen.

• REACT_APP_HOST_URI: das Schema und der Host des AEM-Services, mit denen sich die Remote-SPA verbindet.

  • Dieser Wert ändert sich je nach der AEM-Umgebung (lokal, Entwicklung, Staging oder Produktion) und dem AEM-Service-Typ (Autor vs. Veröffentlichung)

• REACT_APP_USE_PROXY: Dies vermeidet CORS-Probleme während der Entwicklung, indem der React-Entwicklungs-Server AEM-Anfragen wie /content, /graphql, .model.json mit dem Modul http-proxy-middleware weiterleitet.

• REACT_APP_AUTH_METHOD: Authentifizierungsmethode für von AEM bereitgestellte Anfragen. Optionen sind 'service-token', 'dev-token', 'basic' oder leer lassen für einen Anwendungsfall ohne Authentifizierung

  • Erforderlich für die Verwendung mit der AEM-Autoreninstanz
  • Möglicherweise erforderlich für die Verwendung mit AEM Publish (wenn Inhalte geschützt sind)
  • Die Entwicklung mit dem AEM SDK unterstützt lokale Konten über die Standardauthentifizierung. Dies ist die in diesem Tutorial verwendete Methode.
  • Verwenden Sie bei der Integration mit AEM as a Cloud Service Zugriffstoken

• REACT_APP_BASIC_AUTH_USER: Der AEM-Benutzername durch die SPA zur Authentifizierung, während AEM-Inhalte abgerufen werden.

• REACT_APP_BASIC_AUTH_PASS: das AEM-Kennwort durch die SPA zur Authentifizierung, während AEM-Inhalte abgerufen werden.

Öffnen Sie das Remote-SPA-Projekt in Ihrer IDE

Öffnen Sie die Datei src/index.js

Fügen Sie „import ModelManager“ hinzu und initialisieren Sie dies vor dem Aufruf von root.render(..),

...
import { ModelManager } from "@adobe/aem-spa-page-model-manager";

// Initialize the ModelManager before invoking root.render(..).
ModelManager.initializeAsync();

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Öffnen Sie das Remote-SPA-Projekt in Ihrer IDE

Öffnen Sie die Datei unter src/proxy/setupProxy.spa-editor.auth.basic.js

Aktualisieren Sie die Datei mit dem folgenden Code:

const { createProxyMiddleware } = require('http-proxy-middleware');
const {REACT_APP_HOST_URI, REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS } = process.env;

/*
    Set up a proxy with AEM for local development
    In a production environment this proxy should be set up at the webserver level or absolute URLs should be used.
*/
module.exports = function(app) {

    /**
    * Filter to check if the request should be re-routed to AEM. The paths to be re-routed at:
    * - Starts with /content (AEM content)
    * - Starts with /graphql (AEM graphQL endpoint)
    * - Ends with .model.json (AEM Content Services)
    *
    * @param {*} path the path being requested of the SPA
    * @param {*} req the request object
    * @returns true if the SPA request should be re-routed to AEM
    */
    const toAEM = function(path, req) {
        return path.startsWith('/content') ||
            path.startsWith('/graphql') ||
            path.endsWith('.model.json')
    }

    /**
    * Re-writes URLs being proxied to AEM such that they can resolve to real AEM resources
    * - The "root" case of `/.model.json` are rewritten to the SPA's home page in AEM
    * - .model.json requests for /adventure:xxx routes are rewritten to their corresponding adventure page under /content/wknd-app/us/en/home/adventure/
    *
    * @param {*} path the path being requested of the SPA
    * @param {*} req the request object
    * @returns returns a re-written path, or nothing to use the @param path
    */
    const pathRewriteToAEM = function (path, req) {
        if (path === '/.model.json') {
            return '/content/wknd-app/us/en/home.model.json';
        } else if (path.startsWith('/adventure/') && path.endsWith('.model.json')) {
            return '/content/wknd-app/us/en/home/adventure/' + path.split('/').pop();
        }
    }

    /**
    * Register the proxy middleware using the toAEM filter and pathRewriteToAEM rewriter
    */
    app.use(
        createProxyMiddleware(
            toAEM, // Only route the configured requests to AEM
            {
                target: REACT_APP_HOST_URI,
                changeOrigin: true,
                // Pass in credentials when developing against an Author environment
                auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`,
                pathRewrite: pathRewriteToAEM // Rewrite SPA paths being sent to AEM
            }
        )
    );

    /**
    * Enable CORS on requests from the SPA to AEM
    *
    * If this rule is not in place, CORS errors will occur when running the SPA on http://localhost:3000
    */
    app.use((req, res, next) => {
        res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
        next();
    });
};

Die Datei setupProxy.spa-editor.auth.basic.js sollte wie folgt aussehen:

Diese Proxy-Konfiguration hat zwei Hauptaufgaben:

1. Sie leitet spezifische Anforderungen an die SPA (http://localhost:3000) an AEM http://localhost:4502 weiter.

   • Es werden nur Anforderungen weitergeleitet, deren Pfade mit Mustern übereinstimmen, die angeben, dass sie von AEM bedient werden sollen, wie in toAEM(path, req) definiert.
   • SPA-Pfade werden auf die entsprechenden AEM-Seiten umgeschrieben, wie in pathRewriteToAEM(path, req) definiert

2. Allen Anfragen werden CORS-Header hinzugefügt, um den Zugriff auf AEM-Inhalte zu ermöglichen, wie in res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI); definiert

   • Wenn dies nicht hinzugefügt wird, treten CORS-Fehler beim Laden von AEM-Inhalten in der SPA auf.

Öffnen Sie die Datei src/setupProxy.js

Überprüfen Sie die Zeile, die auf die Proxy-Konfigurationsdatei setupProxy.spa-editor.auth.basic hinweist:

...
case BASIC:
// Use user/pass for local development with Local Author Env
return require('./proxy/setupProxy.spa-editor.auth.basic');
...

Öffnen Sie das SPA-Projekt in Ihrer IDE.

Öffnen Sie Ihre Datei der SPA-Umgebungsvariablen src/.env.development und fügen Sie eine Variable für den öffentlichen URI der SPA hinzu:

...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000

Bei der Bereitstellung in AEM as a Cloud Service müssen Sie für die entsprechenden .env-Dateien genauso vorgehen.

Öffnen Sie die Datei src/App.js

Importieren des öffentlichen SPA-URI aus den SPA-Umgebungsvariablen

const {  REACT_APP_PUBLIC_URI } = process.env;

function App() { ... }

Stellen Sie dem WKND-Logo <img src=.../> das Präfix REACT_APP_PUBLIC_URI voran, um eine Auflösung gegen die SPA zu erzwingen.

<img src={REACT_APP_PUBLIC_URI + '/' +  logo} className="logo" alt="WKND Logo"/>

Tun Sie dasselbe für das Ladebild in src/components/Loading.js

const { REACT_APP_PUBLIC_URI } = process.env;

class Loading extends Component {

    render() {
        return (<div className="loading">
            <img src={REACT_APP_PUBLIC_URI + '/' + loadingIcon} alt="Loading..." />
        </div>);
    }
}

Und für die zwei Instanzen der Schaltfläche „Zurück“ in src/components/AdventureDetails.js

const { REACT_APP_PUBLIC_URI } = process.env;

function AdventureDetail(props) {
    ...
    render() {
        <img className="Backbutton-icon" src={REACT_APP_PUBLIC_URI + '/' + backIcon} alt="Return" />
    }
}

Öffnen Sie das SPA-Projekt in Ihrer IDE.

Laden Sie die beiden folgenden Dateien herunter und kopieren Sie sie in src/styles

• _grid.scss
  • Der SCSS-Generator responsiver Raster von AEM
• _grid-init.scss
  • Ruft _grid.scss durch Verwendung der SPA-spezifischen Haltepunkte (Desktop und Mobile) und Spalten (12) auf.

Öffnen Sie src/App.scss und importieren Sie ./styles/grid-init.scss

...
@import './styles/grid-init';
...

Navigieren Sie in der Befehlszeile zum Stammverzeichnis des SPA-Projekts.

Starten Sie die SPA mit den normalen Befehlen (falls noch nicht geschehen)

$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install
$ npm run start

Durchsuchen Sie die SPA auf http://localhost:3000. Alles sollte gut aussehen!

Melden Sie sich bei AEM Author an

Navigieren Sie zu Sites > WKND App > us > en

Wählen Sie die WKND-App-Startseite und tippen Sie auf Bearbeiten, woraufhin die SPA angezeigt wird.

Wechseln Sie zur Vorschau über den Modusschalter oben rechts

Klicken Sie sich in der SPA durch