DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurser om AEM Sites WKND

Uppdatera AEM i full hög för att använda frontendpipeline update-project-enable-frontend-pipeline

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 konfigurationsändringar i WKND Sites-projektet för att använda front end-pipeline för att distribuera JavaScript och CSS, i stället för att kräva en fullständig pipeline-körning i stacken. Detta försvårar utvecklingsfasen och driftsättningslivscykeln för front-end- och back-end-artefakter, vilket ger en snabbare, iterativ utvecklingsprocess som helhet.

Mål objectives

  • Uppdatera ett projekt i full hög för att använda frontendpipeline

Översikt över konfigurationsändringar i AEM

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

Förutsättningar prerequisites

Det här är en självstudiekurs i flera delar och det antas att du har granskat modulen 'ui.front'.

Ändringar i AEM

Det finns tre projektrelaterade konfigurationsändringar och en formatändring som ska distribueras för en testkörning, vilket innebär totalt fyra specifika ändringar i WKND-projektet för att aktivera det för det främre pipelinekontraktet.

  1. Ta bort modulen ui.frontend från byggcykeln för hela stacken

    • I kommenterar WKND Sites-projektets rot pom.xml posten för undermodulen <module>ui.frontend</module>.
    code language-xml 
        ...
    <modules>
    <module>all</module>
    <module>core</module>
    <!--
    <module>ui.frontend</module>
    -->
    <module>ui.apps</module>
    ...
    • Och kommentarrelaterade beroenden från ui.apps/pom.xml
    code language-xml 
        ...
    <!-- ====================================================================== -->
    <!-- D E P E N D E N C I E S                                                -->
    <!-- ====================================================================== -->
        ...
    <!--
        <dependency>
            <groupId>com.adobe.aem.guides</groupId>
            <artifactId>aem-guides-wknd.ui.frontend</artifactId>
            <version>${project.version}</version>
            <type>zip</type>
        </dependency>
    -->
    ...

  2. Förbered modulen ui.frontend för frontend-pipelinekontraktet genom att lägga till två nya webbpaketkonfigurationsfiler.

    • Kopiera den befintliga webpack.common.js som webpack.theme.common.js och ändra output-egenskapen och MiniCssExtractPlugin, CopyWebpackPlugin plug-in-konfigurationsparametrarna så här:
    code language-javascript 
    ...
output: {
        filename: 'theme/js/[name].js',
        path: path.resolve(__dirname, 'dist')
    }
...

...
    new MiniCssExtractPlugin({
            filename: 'theme/[name].css'
        }),
    new CopyWebpackPlugin({
        patterns: [
            { from: path.resolve(__dirname, SOURCE_ROOT + '/resources'), to: './clientlib-site' }
        ]
    })
...
    • Kopiera den befintliga webpack.prod.js som webpack.theme.prod.js och ändra common-variabelns plats till ovanstående fil som
    code language-javascript 
    ...
    const common = require('./webpack.theme.common.js');
...
    note note
    NOTE
    De två konfigurationsändringarna ovan för 'webpack' är att ha olika namn på utdatafiler och mappar, så det är enkelt att skilja mellan klientlib (fullständig hög) och tema som genereras (frontendspipeline).
    Som du gissade kan ändringarna ovan hoppas över för att använda befintliga webbpaketskonfigurationer, men nedanstående ändringar krävs.
    Det är upp till dig hur du vill namnge eller ordna dem.
    • Kontrollera att egenskapsvärdet name är samma som platsnamnet från noden /conf i filen package.json. Under egenskapen scripts finns ett build-skript som instruerar om hur front end-filerna från den här modulen ska skapas.
    code language-javascript 
        {
    "name": "wknd",
    "version": "1.0.0",
    ...

    "scripts": {
        "build": "webpack --config ./webpack.theme.prod.js"
    }

    ...
    }

  3. Förbered modulen ui.content för frontendpipeline genom att lägga till två Sling-konfigurationer.

    • Skapa en fil på com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig - detta inkluderar alla frontendfiler som genereras av modulen ui.frontend under mappen dist med hjälp av webbpaketsbyggprocessen.
    code language-xml 
    ...
    <css
    jcr:primaryType="nt:unstructured"
    element="link"
    location="header">
    <attributes
        jcr:primaryType="nt:unstructured">
        <as
            jcr:primaryType="nt:unstructured"
            name="as"
            value="style"/>
        <href
            jcr:primaryType="nt:unstructured"
            name="href"
            value="/theme/site.css"/>
...
    note tip
    TIP
    Se hela HtmlPageItemsConfig i AEM WKND Sites-projektet.
    • Därefter är com.adobe.aem.wcm.site.manager.config.SiteConfig med värdet themePackageName detsamma som egenskapsvärdet package.json och name och siteTemplatePath pekar på ett /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0 stub-sökvägsvärde.
    code language-xml 
    ...
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
            jcr:primaryType="nt:unstructured"
            siteTemplatePath="/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0"
            themePackageName="wknd">
    </jcr:root>
...
    note tip
    TIP
    Se hela SiteConfig i AEM WKND Sites-projektet.

  4. Ett eller flera teman ändras för att distribueras via frontendpipeline för en testkörning. text-color ändras till Adobe red (eller så kan du välja ett eget) genom att ui.frontend/src/main/webpack/base/sass/_variables.scss uppdateras.

    code language-css 
        $black:     #a40606;
    ...

Slutligen kan du överföra dessa ändringar till Adobe i programmets Git-databas.

AVAILABILITY
De här ändringarna är tillgängliga på GitHub i front-end-pipeline-grenen i AEM WKND Sites-projektet.

Varning - Aktivera frontslutspipeline-knapp

Alternativet Plats för spårningsväljaren visar knappen Aktivera frontpipeline när du väljer platsroten eller webbplatssidan. Om du klickar på knappen Aktivera frontpipeline åsidosätts de Sling-konfigurationer som anges ovan. Kontrollera att du inte klickar på den här knappen efter att du distribuerat de ovanstående ändringarna via Cloud Manager pipeline-körning.

Aktivera knapp för frontslutspipeline

Om du klickar på den av misstag måste du köra pipelines igen för att se till att slutavtalet för pipeline och ändringarna återställs.

Grattis! congratulations

Du har uppdaterat WKND Sites-projektet för att aktivera det för det främre pipelinekontraktet.

Nästa steg next-steps

I nästa kapitel, Distribuera med frontdelspipeline, skapar och kör du en frontendpipeline och kontrollerar hur vi flyttade bort från den /etc.clientlibs-baserade frontdelsleveransen.

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