DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurser om AEM Sites WKND

Granska modulen ui.front för AEM i fullstacksprojektet aem-full-stack-ui-frontent

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Mellanliggande
  • Utvecklare
  • Administratör

I det här kapitlet går vi igenom utveckling, distribution och leverans av frontendartefakter i ett AEM i full hög genom att fokusera på modulen "ui.front" i WKND Sites-projektet.

Mål objective

  • Förstå hur frontendartefakter byggs och driftsätts i ett AEM projekt i full hög
  • Granska webpack-konfigurationer för AEM fullstacksprojekt i modulen ui.frontend
  • Genereringsprocess för AEM klientbibliotek (kallas även klientbibliotek)

Driftsättningsflöde i gränssnittet för projekt med AEM i fullhög och snabb utveckling av webbplatser

IMPORTANT
I den här videon förklaras och demonstreras frontendflödet för både projekt med fullständig hög och snabb webbplatsgenerering för att visa den subtila skillnaden i frontendresurserna när det gäller att skapa, distribuera och leverera.

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

Förutsättningar prerequisites

Mer information finns i AEM WKND-webbplatsprojektet README.md.

AEM slutartefaktflöde för projekt i full hög flow-of-frontend-artifacts

Nedan visas en högnivårepresentation av utveckling, distribution och leverans-flödet för frontendartefakter i ett AEM i en fullständig stack.

Utveckling, driftsättning och leverans av frontendartefakter

Under utvecklingsfasen utförs ändringar i gränssnittet, som formatering och omprofilering, genom att CSS-, JS-filer från mappen ui.frontend/src/main/webpack uppdateras. Under byggtiden förvandlar sedan pluginmodulen webpack och maven dessa filer till optimerade AEM-klienter under modulen ui.apps.

Front-end-ändringar distribueras till AEM as a Cloud Service-miljön när du kör pipelinen Full-stack i Cloud Manager.

Framsidesresurserna levereras till webbläsarna via URI-sökvägar som börjar med /etc.clientlibs/, och cachas vanligtvis AEM Dispatcher och CDN.

NOTE
På samma sätt distribueras front-end-ändringarna i AEM-snabbwebbplatsresan till AEM as a Cloud Service-miljön genom att du kör pipeline Front-End (se Konfigurera pipeline).

Granska webbpaketskonfigurationer i WKND Sites-projektet development-frontend-webpack-clientlib

  • Det finns tre webbpack-konfigurationsfiler som används för att paketera WKND-webbplatsernas frontendresurser.

    1. webpack.common - Detta innehåller konfigurationen common för att instruera WKND-resurspaket och optimering. Egenskapen output anger var de konsoliderade filerna ska genereras (kallas även JavaScript-paket, men ska inte blandas ihop med AEM OSGi-paket) som skapas. Standardnamnet är 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 innehåller konfigurationen development för webbpack-dev-server och pekar på HTML-mallen som ska användas. Den innehåller också en proxykonfiguration till en AEM som körs på localhost:4502.
    code language-javascript 
        ...
    devServer: {
        proxy: [{
            context: ['/content', '/etc.clientlibs', '/libs'],
            target: 'http://localhost:4502',
        }],
    ...
    1. webpack.prod.js innehåller konfigurationen production och använder plugin-programmen för att omvandla utvecklingsfilerna till optimerade paket.
    code language-javascript 
        ...
    module.exports = merge(common, {
        mode: 'production',
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin(),
                new CssMinimizerPlugin({ ...})
        }
    ...

  • De paketerade resurserna flyttas till modulen ui.apps med plugin-programmet aem-clientlib-generator, med hjälp av konfigurationen som hanteras i filen clientlib.config.js.

    ...
    const BUILD_DIR = path.join(__dirname, 'dist');
    const CLIENTLIB_DIR = path.join(
    __dirname,
    '..',
    'ui.apps',
    'src',
    'main',
    'content',
    'jcr_root',
    'apps',
    'wknd',
    'clientlibs'
    );
    ...
  • front-maven-plugin från ui.frontend/pom.xml orkestrerar webbpaketering och klientlib-generering när AEM byggs.

$ mvn clean install -PautoInstallSinglePackage

Distribution till AEM as a Cloud Service deployment-frontend-aemaacs

Fullhög pipeline distribuerar dessa ändringar till en AEM as a Cloud Service-miljö.

Leverans från AEM as a Cloud Service delivery-frontend-aemaacs

De frontendresurser som distribueras via hela stacken levereras från AEM till webbläsare som /etc.clientlibs filer. Du kan verifiera detta genom att gå till den offentliga WKND-webbplatsen och visa webbsidans källa.

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

Grattis! congratulations

Grattis, du har granskat ui.front-modulen för ett projekt i en hel hög

Nästa steg next-steps

I nästa kapitel, Uppdatera projekt till att använda frontdelspipeline, uppdaterar du AEM WKND Sites Project så att det aktiveras för frontdelsslutsslutsslutsslutsslutsslutsslutsslutsslutsslutskontraktet.

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