Documentación AEM Tutoriales de AEM Tutoriales de WKND para desarrollar con AEM Sites

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

Last update: Fri Oct 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Se aplica a:
Experience Manager as a Cloud Service

Creado para:

Intermedio
Desarrollador
Administrador

En este capítulo, realizaremos cambios de configuración en el 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 de pila 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

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

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

Requisitos previos prerequisites

Este es un tutorial que consta de varias partes y se supone que ha revisado el módulo 'ui.frontend'.

Cambios en el proyecto de AEM de pila completa

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.

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

En la raíz del proyecto de WKND Sites pom.xml comente la entrada del submódulo <module>ui.frontend</module>.

code language-xml
`... <modules> <module>all</module> <module>core</module> <!-- <module>ui.frontend</module> --> <module>ui.apps</module> ...`

Y comente la dependencia relacionada de ui.apps/pom.xml

code language-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> --> ...`

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

Prepare el módulo ui.frontend para el contrato de canalización front-end añadiendo dos nuevos archivos de configuración de Webpack.

Copie el webpack.common.js existente como webpack.theme.common.js, y cambie la propiedad output y los parámetros de configuración del complemento MiniCssExtractPlugin, CopyWebpackPlugin de la siguiente manera:

code language-javascript

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

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

Copie el webpack.prod.js existente como webpack.theme.prod.js y cambie la ubicación de la variable common al 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 carpetas de salida diferentes, para que podamos diferenciar fácilmente entre los artefactos front-end de la canalización generados por clientlib (pila completa) y los generados por el tema (front-end).
Como habrá adivinado, los cambios anteriores se pueden omitir para utilizar también las configuraciones de webpack existentes, pero los cambios siguientes son obligatorios.
Es decisión suya cómo desee nombrarlos u organizarlos.

En el archivo package.json, asegúrese de que el valor de la propiedad name sea el mismo que el nombre de sitio del nodo /conf. Y debajo de la propiedad scripts, hay un script build que indica cómo generar 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" } ... }`

Prepare el módulo ui.content para la canalización front-end añadiendo dos configuraciones de Sling.

Crear un archivo en com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig: esto incluye todos los archivos front-end que el módulo ui.frontend genera en la carpeta dist mediante el proceso de generación de Webpack.

code language-xml

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

...
    <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
Vea el HtmlPageItemsConfig completo en el proyecto WKND Sites de AEM.

Segundo, com.adobe.aem.wcm.site.manager.config.SiteConfig con el valor themePackageName que es el mismo que el valor de propiedad package.json y name, y siteTemplatePath que señala a un valor de ruta de acceso auxiliar /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0.

code language-xml

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

...
    <?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
Vea, el SiteConfig completo en el proyecto WKND Sites de AEM.

Se ha cambiado un tema o estilos para implementarlos a través de la canalización front-end en una ejecución de prueba. Estamos cambiando text-color a Adobe red (o puede elegir el suyo propio) al actualizar 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 de su programa.

AVAILABILITY

Estos cambios están disponibles en GitHub dentro de la rama de canalización front-end del proyecto WKND Sites de AEM.

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

La opción Sitio del selector de carril muestra el botón Habilitar canalización front-end al seleccionar la raíz del sitio o la página del sitio. Al hacer clic en el botón Habilitar canalización front-end, se anularán las configuraciones de Sling anteriores. Asegúrese de no hacer 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.

Habilitar canalización front-end

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

Próximos pasos next-steps

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

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9