Show Menu
TOPICS×

Front-End-Build für React-SPAs

In diesem Dokument werden die Details des Projekts erläutert, das erstellt wurde, wenn mithilfe des Archetyps eine Einzelseitenanwendung (SPA) basierend auf dem React Framework erstellt wurde. Das heißt, wenn Sie die
frontendModule
Option auf
react
.

Überblick

Dieses Projekt wurde mit einer create-response-App im Bootstrapping-Format ausgestattet.
Diese Anwendung wurde entwickelt, um das AEM-Modell einer Site zu verwenden. Das Layout wird automatisch mit den Hilfekomponenten des Pakets @adobe/cq-response-editable-components generiert.

Skripten

Im Projektverzeichnis können Sie die folgenden Befehle ausführen:

npm start

npm start
Mit diesem Befehl wird die App im Entwicklungsmodus ausgeführt, indem das JSON-Modell von einer lokalen AEM-Instanz proxiert wird, die unter http://localhost:4502 ausgeführt wird. Hierbei wird davon ausgegangen, dass das gesamte Projekt mindestens einmal (
mvn clean install -PautoInstallPackage
im Projektstamm) in AEM bereitgestellt wurde.
Nach der Ausführung
npm start
im Ordner " ui.frontend "wird Ihre App automatisch im Browser geöffnet (unter Pfad
http://localhost:3000/content/<appId>/<country>/<language>/home.html
). Wenn Sie Änderungen vornehmen, wird die Seite neu geladen.
Wenn Sie Fehler im Zusammenhang mit CORS erhalten, sollten Sie AEM wie folgt konfigurieren:
  1. Navigieren Sie zum Configuration Manager (http://localhost:4502/system/console/configMgr).
  2. Öffnen Sie die Konfiguration für "Adobe Granite Cross-Origin Resource Sharing Policy"
  3. Erstellen Sie eine neue Konfiguration mit den folgenden zusätzlichen Werten:
    • Zulässige Herkunft: http://localhost:3000
    • Unterstützte Kopfzeilen: Genehmigung
    • Zulässige Methoden: OPTIONEN

npm-Test

npm test
Mit diesem Befehl wird der Testlauf im interaktiven Überwachungsmodus gestartet. Weitere Informationen finden Sie in der React-Dokumentation zum Ausführen von Tests .

npm run build

npm run build
Mit diesem Befehl wird die App für die Produktion im Ordner Build erstellt. Es bündelt React im Produktionsmodus und optimiert den Build für die beste Leistung. Weitere Informationen finden Sie in der Dokumentation React zur Bereitstellung .
Darüber hinaus wird eine AEM ClientLib aus der App mithilfe des aem-clientlib-generator -Pakets generiert.

Browserunterstützung

Standardmäßig verwendet dieses Projekt die Standardoption von BrowserList , um Zielbrowser zu identifizieren. Zusätzlich enthält es Polyfills für moderne Sprachfunktionen, um ältere Browser (z.B. Internet Explorer 11) zu unterstützen. Wenn die Unterstützung solcher Browser nicht erforderlich ist, können die Polyfill-Abhängigkeiten und Importe entfernt werden.

Codeaufteilung

Die React-App ist so konfiguriert, dass standardmäßig Codeteilung verwendet wird. Beim Erstellen der App für die Produktion wird der Code in mehreren Abschnitten ausgegeben:
$ ls build/static/js 2.5b77f553.chunk.js 2.5b77f553.chunk.js.map main.cff1a559.chunk.js main.cff1a559.chunk.js.map runtime~main.a8a9905a.js runtime~main.a8a9905a.js.map
Das Laden von Abschnitten nur bei Bedarf kann die App-Leistung erheblich verbessern.
Damit diese Funktion mit AEM verwendet werden kann, muss die App ermitteln können, welche JS- und CSS-Dateien aus dem von AEM generierten HTML angefordert werden müssen. Dies kann mit dem Schlüssel "entrypoints"in der Datei asset-manifest.json erreicht werden. Die Datei wird in clientlib.config.js analysiert und nur die Einstiegspunktdateien werden in die ClientLib gebündelt. Die verbleibenden Dateien werden im Ressourcenverzeichnis von ClientLib abgelegt und werden dynamisch angefordert und daher erst geladen, wenn sie tatsächlich benötigt werden.
Weitere Informationen zur Verwendung von AEM ClientLibs durch den Projektarchiv finden Sie in der allgemeinen Dokumentation zum Modul ui.frontend.