Documentatie AEM Tutorials voor AEM AEM Sites WKND-tutorials

Bekijk de module 'ui.frontend' van het AEM-project in volledige stapel

Laatst bijgewerkt: 5 mei 2025

Van toepassing op:
Experience Manager as a Cloud Service

Gemaakt voor:

tussenpersoon
Ontwikkelaar
Beheerder

In, herziet dit hoofdstuk wij de ontwikkeling, de plaatsing, en de levering van front-end artefacten van een volledig-stapel AEM project, door zich op de module "ui.frontend"van het project van de Plaatsen WKND te concentreren.

Doelstellingen

Begrijp de bouw en plaatsingsstroom van front-end artefacten in een volledig-stapelproject van AEM
Herzie het volledige-stapelproject van AEM ui.frontend module webpackvormt
AEM-clientbibliotheekproces (ook clientlibs genoemd)

Voorste-end plaatsingsstroom voor AEM full-stack en Snelle projecten van de Plaats creatie

BELANGRIJK

Deze video verklaart en toont de front-end stroom voor zowel volledig-Stapel als Snelle projecten van de Aanmaak van de Plaats aan om het subtiele verschil in de front-end middelen te schetsen bouwt, opstelt, en leveringsmodel.

video poster

https://video.tv.adobe.com/v/3409344?quality=12&learn=on

Vereisten

Kloon het project van de Plaatsen van AEM WKND
Het gekloonde AEM WKND Sites-project is gemaakt en geïmplementeerd in AEM as a Cloud Service.

Zie het project van de Plaats van AEM WKND README.mdvoor meer details.

AEM full-stack project front-end artefactflow

Hieronder is een vertegenwoordiging op hoog niveau van de ontwikkeling, plaatsing, en levering stroom van de front-end artefacten in een volledig-stapel AEM project.

Ontwikkeling, Plaatsing en Levering van Voorste-Eind Artefacten

Tijdens de ontwikkelingsfase worden front-end wijzigingen zoals opmaak en herbranding uitgevoerd door de CSS- en JS-bestanden uit de map ui.frontend/src/main/webpack bij te werken. Dan tijdens bouwstijl-tijd, webpackmodule-bundelaar en maven stop zet deze dossiers in geoptimaliseerde AEM clientlibs onder ui.apps module.

Voorste-eindveranderingen worden opgesteld aan het milieu van AEM as a Cloud Service wanneer het runnen van de volledig-stapel pijpleiding in Cloud Manager.

De front-end bronnen worden aan de webbrowsers geleverd via URI-paden die beginnen met /etc.clientlibs/ en worden doorgaans in cache geplaatst op AEM Dispatcher en CDN.

OPMERKING

Op dezelfde manier in de Reis van de Aanmaak van de Plaats van AEM Snelle, front-end veranderingenworden opgesteld aan het milieu van AEM as a Cloud Service door de voor-Eind pijpleiding in werking te stellen, zie Opstelling Uw Pijpleiding

Webpack van het overzicht vormt in het project van Plaatsen WKND

Er zijn drie webpack config- dossiers die worden gebruikt om de de plaatsen van WKND front-end middelen te bundelen.
1. webpack.common - dit bevat de gemeenschappelijke configuratie om het middel te instrueren WKND bundelen en optimalisering. Het output bezit vertelt waar te om de geconsolideerde dossiers (die ook als de bundels van JavaScript worden bekend, maar niet om met de bundels van AEM OSGi worden verward) uit te geven het leidt. De standaardnaam wordt ingesteld op clientlib-site/js/[name].bundle.js .
... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...
1. webpack.dev.js bevat de ontwikkeling configuratie voor webpack-dev-server en richt aan het malplaatje van HTML aan gebruik. Het bevat ook een proxyconfiguratie voor een AEM-instantie die op localhost:4502 wordt uitgevoerd.
... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...
1. webpack.prod.js bevat de productie configuratie en gebruikt de plugins om de ontwikkelingsdossiers in geoptimaliseerde bundels om te zetten.
... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...
De gebundelde middelen worden verplaatst naar de ui.apps module die aem-client-clientlib-generatorstop gebruikt, die de configuratie gebruikt in het clientlib.config.js dossier wordt beheerd.

    ...
    const BUILD_DIR = path.join(__dirname, 'dist');
    const CLIENTLIB_DIR = path.join(
    __dirname,
    '..',
    'ui.apps',
    'src',
    'main',
    'content',
    'jcr_root',
    'apps',
    'wknd',
    'clientlibs'
    );
    ...

De front-maven-stop van ui.frontend/pom.xml organiseert webpack bundelen en clientlib generatie tijdens het project van AEM bouwt.

$ mvn clean install -PautoInstallSinglePackage

Implementatie naar AEM as a Cloud Service

De volledig-stapel pijpleidingstelt deze veranderingen in een milieu van AEM as a Cloud Service op.

Levering vanuit AEM as a Cloud Service

De front-end middelen die via de full-stack pijplijn worden opgesteld worden geleverd van de Plaats van AEM aan Webbrowsers als /etc.clientlibs dossiers. U kunt dit verifiëren door de openbaar ontvangen plaats van WKNDen het bekijken bron van webpage te bezoeken.

    ....
    <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>
    ....

Gefeliciteerd!

Gefeliciteerd, hebt u de module ui.frontend van het full-stack project gecontroleerd

Volgende stappen

In het volgende hoofdstuk, Update Project om Voorste-eindpijpleidingte gebruiken, zult u het Project van de Plaatsen van AEM WKND bijwerken om het voor het front-end pijpleidingscontract toe te laten.

recommendation-more-help