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

Revisión del módulo “ui.frontend” del proyecto de AEM de pila completa aem-full-stack-ui-frontent

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 vamos a revisar el desarrollo, la implementación y el envío de los artefactos front-end de un proyecto de AEM de pila completa, centrándonos en el módulo “ui.frontend” del proyecto WKND Sites.

Objetivos objective

Comprender el flujo de generación e implementación de artefactos front-end en un proyecto de pila completa de AEM
Revisar las configuraciones webpack del módulo ui.frontend del proyecto de pila completa de AEM.
Proceso de generación de la biblioteca de cliente de AEM (también conocida como clientlibs)

Flujo de implementación front-end para proyectos de pila completa y creación rápida de sitios de AEM

IMPORTANT

En este vídeo se explica y muestra el flujo front-end de los proyectos de Creación rápida y de pila completa para esbozar la sutil diferencia en el modelo de generación, implementación y entrega de recursos front-end.

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

Requisitos previos prerequisites

Clonar el proyecto WKND Sites de AEM
Haber creado e implementado el proyecto WKND Sites de AEM clonado en AEM as a Cloud Service.

Consulte el proyecto del sitio WKND de AEM README.md para obtener más información.

Flujo de artefactos front-end del proyecto de pila completa de AEM flow-of-frontend-artifacts

A continuación se muestra una representación de alto nivel del flujo de desarrollo, implementación y envío de los artefactos front-end en un proyecto de AEM de pila completa.

Desarrollo, implementación y envío de artefactos front-end

Durante la fase de desarrollo, se realizan cambios en el front-end como el estilo y el cambio de marca mediante la actualización de los archivos CSS, JS de la carpeta ui.frontend/src/main/webpack. A continuación, durante el tiempo de compilación, el empaquetador de módulos webpack y el complemento maven convierten estos archivos en clientlibs de AEM optimizados bajo el módulo ui.apps.

Los cambios de front-end se implementan en el entorno de AEM as a Cloud Service al ejecutar la canalización de pila completa en Cloud Manager.

Los recursos front-end se envían a los exploradores web a través de rutas URI que comienzan por /etc.clientlibs/ y, por lo general, se almacenan en la caché en AEM Dispatcher y CDN.

NOTE

Del mismo modo, en el Recorrido de creación rápida de sitios de AEM, los cambios de front-end se implementan en el entorno de AEM as a Cloud Service ejecutando la canalización Front-End; consulte Configurar la canalización

Revisión de las configuraciones de webpack en el proyecto WKND Sites development-frontend-webpack-clientlib

Hay tres archivos de configuración webpack que se utilizan para agrupar los recursos front-end de los sitios WKND.

webpack.common: contiene la configuración común para indicar al paquete de recursos WKND y la optimización. La propiedad output indica dónde emitir los archivos consolidados (también conocidos como paquetes JavaScript, pero que no se deben confundir con los paquetes OSGi de AEM) que crea. El nombre del valor predeterminado se establece en clientlib-site/js/[name].bundle.js.

code language-javascript
`... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...`

webpack.dev.js contiene la configuración de desarrollo para el webpack-dev-serve y señala a la plantilla html que se va a utilizar. También contiene una configuración proxy para una instancia de AEM que se ejecuta en localhost:4502.

code language-javascript
`... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...`

webpack.prod.js contiene la configuración de producción y usa los complementos para transformar los archivos de desarrollo en paquetes optimizados.

code language-javascript
`... module.exports = merge(common, { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin({ ...}) } ...`

Los recursos agrupados se mueven al módulo ui.apps mediante el complemento aem-clientlib-generator, utilizando la configuración administrada en el archivo 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'
    );
    ...

El frontend-maven-plugin de ui.frontend/pom.xml coordina el agrupamiento de webpack y la generación de clientlib durante la compilación del proyecto de AEM.

$ mvn clean install -PautoInstallSinglePackage

Implementación en AEM as a Cloud Service deployment-frontend-aemaacs

La canalización de pila completa implementa estos cambios en un entorno de AEM as a Cloud Service.

Envío desde AEM as a Cloud Service delivery-frontend-aemaacs

Los recursos front-end implementados a través de la canalización de pila completa se envían desde el sitio de AEM a los exploradores web como archivos /etc.clientlibs. Puede comprobarlo si visita el sitio WKND alojado públicamente y ve el origen de la página web.

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

Enhorabuena. congratulations

Enhorabuena. Ha revisado el módulo ui.frontend del proyecto de pila completa

Próximos pasos next-steps

En el próximo capítulo, Actualización del proyecto para utilizar la canalización front-end, actualizará el proyecto WKND Sites de AEM para habilitarlo para el contrato de canalización front-end.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9