Überprüfen Sie das Modul „ui.frontend“ des Full-Stack-AEM-Projekts. aem-full-stack-ui-frontent
In diesem Kapitel überprüfen wir die Entwicklung, Implementierung und Bereitstellung von Frontend-Artefakten eines Full-Stack-AEM-Projekts, indem wir uns auf das Modul „ui.frontend“ des WKND Sites-Projektes fokussieren.
Ziele objective
- Den Build- und Bereitstellungsfluss von Frontend-Artefakten in einem AEM-Full-Stack-Projekt besser verstehen
- Die Webpack-Konfigurationen des
ui.frontend
-Moduls des AEM-Full-Stack-Projekts überprüfen - Generierungsprozess der AEM Client-Bibliothek (auch als Clientlibs bezeichnet)
Frontend-Bereitstellungsfluss für Projekte mit AEM-Full-Stack und schneller Site-Erstellung
Voraussetzungen prerequisites
- Klonen Sie das AEM WKND Sites-Projekt
- Das geklonte AEM WKND Sites-Projekt wurde für AEM as a Cloud Service erstellt und bereitgestellt.
Schauen Sie sich die Datei README.md des AEM WKND Site-Projekts für weitere Details an.
Fluss der Frontend-Artefakte eines AEM-Full-Stack-Projekts flow-of-frontend-artifacts
Nachfolgend finden Sie eine allgemeine Darstellung des Flusses von Entwicklung, Implementierung und Bereitstellung der Frontend-Artefakte in einem Full-Stack AEM-Projekt.
Während der Entwicklungsphase werden Frontend-Änderungen wie Stile und Rebranding durchgeführt, indem die CSS- und JS-Dateien aus dem Ordner ui.frontend/src/main/webpack
aktualisiert werden. Während der Build-Zeit wandeln der Webpack-Modul-Bundler und das Maven-Plug-in diese Dateien in optimierte AEM-Clientlibs unter dem ui.apps
Modul um.
Frontend-Änderungen werden bei der Ausführung der Full-Stack-Pipeline im Cloud-Manager für die AEM as a Cloud Service-Umgebung bereitgestellt.
Die Frontend-Ressourcen werden den Webbrowsern über URI-Pfade bereitgestellt, die mit /etc.clientlibs/
beginnen, und werden normalerweise im AEM Dispatcher und CDN zwischengespeichert.
Überprüfen Sie die Webpack-Konfigurationen im WKND Sites-Projekt. development-frontend-webpack-clientlib
-
Es gibt drei Webpack-Konfigurationsdateien, die zum Bündeln der WKND Sites-Frontend-Ressourcen verwendet werden.
webpack.common
: Dies enthält die gemeinsame Konfiguration, um die WKND-Ressourcenbündelung und -optimierung anzuweisen. Die Output-Eigenschaft gibt an, wo die konsolidierten Dateien (auch als JavaScript-Bundles bezeichnet, aber nicht zu verwechseln mit den AEM OSGi-Bundles) ausgegeben werden sollen. Der Standardname ist aufclientlib-site/js/[name].bundle.js
festgelegt.
code language-javascript ... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...
webpack.dev.js
enthält die Entwicklungskonfiguration für den webpack-dev-server und verweist auf die zu verwendende HTML-Vorlage. Sie enthält auch eine Proxy-Konfiguration für eine AEM-Instanz, die auflocalhost:4502
ausgeführt wird.
code language-javascript ... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...
webpack.prod.js
enthält die Produktionskonfiguration und verwendet die Plug-ins, um die Entwicklungsdateien in optimierte Bundles umzuwandeln.
code language-javascript ... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...
-
Die gebündelten Ressourcen werden mithilfe des AEM-Clientlib-Generator-Plug-ins in das
ui.apps
-Modul verschoben, wobei die in der Dateiclientlib.config.js
verwaltete Konfiguration verwendet wird.
...
const BUILD_DIR = path.join(__dirname, 'dist');
const CLIENTLIB_DIR = path.join(
__dirname,
'..',
'ui.apps',
'src',
'main',
'content',
'jcr_root',
'apps',
'wknd',
'clientlibs'
);
...
- Das Frontend-Maven-Plug-in von
ui.frontend/pom.xml
orchestriert Webpack-Bundles und die Clientlib-Generierung während der AEM Projekterstellung.
$ mvn clean install -PautoInstallSinglePackage
Bereitstellung in AEM as a Cloud Service deployment-frontend-aemaacs
Die Full-Stack-Pipeline stellt diese Änderungen in einer AEM as a Cloud Service-Umgebung bereit.
Bereitstellung durch AEM as a Cloud Service delivery-frontend-aemaacs
Die Frontend-Ressourcen, die über die Full-Stack-Pipeline bereitgestellt werden, werden von der AEM-Site als /etc.clientlibs
-Dateien an Webbrowser übermittelt. Sie können dies überprüfen, indem Sie die öffentlich gehostete WKND-Site und die Quelle der Web-Seite anzeigen.
....
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-181cd4102f7f49aa30eea548a7715c31-lc.min.css" type="text/css">
...
<script async src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-d4e7c03fe5c6a405a23b3ca1cc3dcd3d-lc.min.js"></script>
....
Herzlichen Glückwunsch! congratulations
Herzlichen Glückwunsch, Sie haben das ui.frontend-Modul des Full-Stack-Projekts überprüft.
Nächste Schritte next-steps
Im nächsten Kapitel Aktualisieren des Projekts für die Verwendung der Frontend-Pipeline aktualisieren Sie das AEM WKND Sites-Projekt, um es für den Frontend-Pipeline-Vertrag zu aktivieren.