AEM Actualizar proyecto de de pila completa para utilizar canalización front-end update-project-enable-frontend-pipeline

En este capítulo, realizamos cambios de configuración en Proyecto de WKND Sites para utilizar la canalización front-end para implementar JavaScript y CSS, en lugar de requerir una ejecución de canalización completa. Esto desvincula el ciclo vital de desarrollo e implementación de los artefactos front-end y back-end, lo que permite un proceso de desarrollo más rápido e iterativo en general.

Objetivos objectives

  • Actualizar el proyecto de pila completa para utilizar la canalización front-end

AEM Información general sobre los cambios de configuración en el proyecto de código de pila completa de la

Requisitos previos prerequisites

Este es un tutorial de varias partes y se da por hecho que ha revisado la Módulo "ui.frontend".

AEM Cambios en el proyecto de código de pila completa de la

Hay tres cambios de configuración relacionados con el proyecto y un cambio de estilo que se deben implementar para una ejecución de prueba, por lo que en total hay cuatro cambios específicos en el proyecto WKND para habilitarlo para el contrato de canalización front-end.

  1. Retire el ui.frontend módulo del ciclo de compilación de pila completa

    • En, la raíz del proyecto WKND Sites pom.xml comentar el <module>ui.frontend</module> entrada de submódulo.
    code language-xml
        ...
        <modules>
        <module>all</module>
        <module>core</module>
        <!--
        <module>ui.frontend</module>
        -->
        <module>ui.apps</module>
        ...
    
    • Y dependencia relacionada con los comentarios del 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. Prepare el ui.frontend para el contrato de canalización front-end al agregar dos nuevos archivos de configuración de webpack.

    • Copiar el existente webpack.common.js as webpack.theme.common.jsy cambie output propiedad y MiniCssExtractPlugin, CopyWebpackPlugin parámetros de configuración de complemento como se muestra a continuación:
    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' }
            ]
        })
    ...
    
    • Copiar el existente webpack.prod.js as webpack.theme.prod.jsy cambie la common ubicación de la variable en el archivo anterior como
    code language-javascript
    ...
        const common = require('./webpack.theme.common.js');
    ...
    
    note note
    NOTE
    Los dos cambios de configuración anteriores del "webpack" deben tener nombres de archivo y carpeta de salida diferentes, para que podamos diferenciar fácilmente entre los artefactos clientlib (full-stack) y los generados por el tema (front-end) del front-end de la canalización.
    Como ha adivinado, los cambios anteriores se pueden omitir para utilizar también las configuraciones de Webpack existentes, pero los cambios siguientes son obligatorios.
    Depende de usted cómo desee ponerles nombre u organizarlos.
    • En el package.json , asegúrese de que la variable name el valor de la propiedad es el mismo que el nombre del sitio de /conf nodo. Y bajo el scripts propiedad, a build secuencia de comandos que indica cómo crear los archivos front-end a partir de este módulo.
    code language-javascript
        {
        "name": "wknd",
        "version": "1.0.0",
        ...
    
        "scripts": {
            "build": "webpack --config ./webpack.theme.prod.js"
        }
    
        ...
        }
    
  3. Prepare el ui.content para la canalización front-end al agregar dos configuraciones de Sling.

    • Cree un archivo en com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig - esto incluye todos los archivos front-end que el ui.frontend El módulo de se genera en dist usando el proceso de generación de webpack.
    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
    Ver la información completa HtmlPageItemsConfig en el AEM Proyecto de sitios WKND de WKND.
    • Segundo, el com.adobe.aem.wcm.site.manager.config.SiteConfig con el themePackageName siendo el mismo que el package.json y name valor de propiedad y siteTemplatePath apuntando a un /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0 valor de ruta auxiliar.
    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
    Consulte, la SiteConfig en el AEM Proyecto de sitios WKND de WKND.
  4. Un tema o un cambio de estilos para implementar mediante la canalización front-end para una ejecución de prueba; estamos cambiando text-color al Adobe rojo (o puede elegir el suyo propio) actualizando el ui.frontend/src/main/webpack/base/sass/_variables.scss.

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

Finalmente, inserte estos cambios en el repositorio de Git de Adobe del programa.

AVAILABILITY
Estos cambios están disponibles en GitHub dentro de canalización front-end rama de la AEM Proyecto de sitios WKND de WKND.

Precaución - Habilitar canalización front-end botón

El Selector de carril de Sitio muestra la opción Habilitar canalización front-end al seleccionar la raíz o la página del sitio. Clic Habilitar canalización front-end sobrescribirá el botón anterior Configuraciones de Sling, asegúrese de que no haga clic en Haga clic en este botón después de implementar los cambios anteriores a través de la ejecución de la canalización de Cloud Manager.

Botón Habilitar canalización front-end

Si se hace clic en él por error, debe volver a ejecutar las canalizaciones para asegurarse de que se restauran el contrato y los cambios de la canalización front-end.

Enhorabuena. congratulations

¡Enhorabuena! Ha actualizado el proyecto de WKND Sites para habilitarlo para el contrato de canalización front-end.

Pasos siguientes next-steps

En el capítulo siguiente, Implementación mediante la canalización front-end, creará y ejecutará una canalización front-end y verificará cómo se alejó de la entrega de recursos front-end basada en /etc.clientlibs.

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