DocumentatieAEMTutorials voor AEMAEM Sites WKND-tutorials

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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 AEM volledig-stapelproject
  • Herzie de AEM volledig-stapel van het project ui.frontend module webpackvormt
  • AEM clientbibliotheekproces (ook clientlibs genoemd)

Voorste-end plaatsingsstroom voor AEM volledig-stapel en Snelle projecten van de Plaats

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.

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

Vereisten prerequisites

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

AEM volledige-stapel project front-end artefactstroom 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 middelen worden geleverd aan Webbrowsers via de wegen van URI die met /etc.clientlibs/ beginnen, en typisch in het voorgeheugen ondergebracht op AEM Dispatcher en CDN.

NOTE
Op dezelfde manier in de AEM Snelle Reis van de Aanmaak van de Plaats, 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 AEM OSGi- bundels 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 ontwikkelings 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 AEM project 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 pijpleiding worden opgesteld worden geleverd van de AEMPlaats 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 AEM Project van Plaatsen WKND bijwerken om het voor het front-end pijpleidingscontract toe te laten.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9