Aggiorna il progetto AEM full stack per utilizzare la pipeline front-end

Rimuovi il modulo ui.frontend dal ciclo di compilazione full stack

• In, la radice del progetto WKND Sites pom.xml ha aggiunto un commento alla voce del sottomodulo <module>ui.frontend</module>.

    ...
    <modules>
    <module>all</module>
    <module>core</module>
    <!--
    <module>ui.frontend</module>
    -->
    <module>ui.apps</module>
    ...

• Dipendenza correlata al commento da ui.apps/pom.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>
    -->
    ...

Prepara il modulo ui.frontend per il contratto della pipeline front-end aggiungendo due nuovi file di configurazione webpack.

• Copiare webpack.common.js esistente come webpack.theme.common.js e modificare la proprietà output e i parametri di configurazione del plug-in MiniCssExtractPlugin, CopyWebpackPlugin come indicato di seguito:

...
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: './theme' }
        ]
    })
...

• Copiare webpack.prod.js esistente come webpack.theme.prod.js e modificare la posizione della variabile common nel file precedente come

...
    const common = require('./webpack.theme.common.js');
...

NOTE

Le due modifiche alla configurazione "webpack" di cui sopra devono avere nomi di file di output e cartelle diversi, in modo da poter facilmente distinguere tra gli artefatti front-end della pipeline clientlib (full-stack) e quelli generati dal tema (front-end).

Come hai indovinato, le modifiche di cui sopra possono essere ignorate per utilizzare anche le configurazioni esistenti del webpack, ma sono necessarie le modifiche di seguito.

Sta a te nominarli o organizzarli.

• Nel file package.json, assicurarsi che il valore della proprietà name sia uguale al nome del sito del nodo /conf. E sotto la proprietà scripts, uno script build che indica come generare i file front-end da questo modulo.

    {
    "name": "wknd",
    "version": "1.0.0",
    ...

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

    ...
    }

Prepara il modulo ui.content per la pipeline front-end aggiungendo due configurazioni Sling.

• Crea un file in com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig. Sono inclusi tutti i file front-end generati dal modulo ui.frontend nella cartella dist tramite il processo di compilazione Webpack.

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

TIP

Vedi HtmlPageItemsConfig completo nel progetto AEM WKND Sites.

• Secondi com.adobe.aem.wcm.site.manager.config.SiteConfig con il valore themePackageName uguale al valore della proprietà package.json e name e siteTemplatePath che punta a un valore del percorso stub /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0.

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

TIP

Vedi SiteConfig completo nel progetto AEM WKND Sites.

Uno o più stili cambiano per la distribuzione tramite pipeline front-end per un'esecuzione dei test. Stiamo cambiando text-color in rosso Adobe (oppure puoi sceglierne uno tuo) aggiornando ui.frontend/src/main/webpack/base/sass/_variables.scss.

    $black:     #a40606;
    ...