DocumentatieAEMTutorials voor AEMAEM Sites WKND-tutorials

Bekijk de module 'ui.frontend' van het AEM-project in volledige stapel aem-full-stack-ui-frontent

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 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 objective

  • 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

IMPORTANT
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 prerequisites

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

AEM full-stack project front-end artefactflow flow-of-frontend-artifacts

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.

NOTE
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 development-frontend-webpack-clientlib

  • 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 .
    code language-javascript 
        ...
    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.
    code language-javascript 
        ...
    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.
    code language-javascript 
        ...
    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 deployment-frontend-aemaacs

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

Levering vanuit AEM as a Cloud Service delivery-frontend-aemaacs

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! congratulations

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

Volgende stappen next-steps

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
b2a561c1-47c0-4182-b8c1-757a197484f9