DocumentaçãoAEMTutoriais do AEMTutoriais WKND do AEM Sites

Revise o módulo “ui.frontend” do projeto de pilha completa do AEM aem-full-stack-ui-frontent

Last update: Fri Oct 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Aplica-se a:
  • Experience Manager as a Cloud Service

Criado para:

  • Intermediário
  • Desenvolvedor
  • Administrador

Neste capítulo, analisaremos o desenvolvimento, a implantação e a entrega de artefatos de front-end de um projeto do AEM de pilha completa, com foco no módulo “ui.frontend” do projeto de sites da WKND.

Objetivos objective

  • Entender o fluxo de compilação e implantação de artefatos de front-end em um projeto de pilha completa do AEM
  • Examinar as configurações do webpack do módulo ui.frontend do projeto de pilha completa do AEM
  • Processo de geração de bibliotecas de clientes do AEM (também conhecidas como clientlibs)

Fluxo de implantação de front-end para projetos de pilha completa e criação rápida de sites do AEM

IMPORTANT
Este vídeo explica e demonstra o fluxo de front-end para projetos de Pilha completa e criação rápida de sites, a fim de destacar a diferença sutil no modelo de compilação, implantação e entrega de recursos de front-end.
https://video.tv.adobe.com/v/3409344?quality=12&learn=on

Pré-requisitos prerequisites

Consulte o projeto do site da WKND no AEM README.md para mais detalhes.

Fluxo de artefatos de front-end do projeto de pilha completa do AEM flow-of-frontend-artifacts

Confira abaixo uma representação de alto nível do fluxo de desenvolvimento, implantação e entrega dos artefatos de front-end de um projeto de pilha completa do AEM.

Desenvolvimento, implantação e entrega de artefatos de front-end

Durante a fase de desenvolvimento, alterações de front-end, como estilização e repaginação da marca, são realizadas por meio da atualização dos arquivos CSS e JS da pasta ui.frontend/src/main/webpack. Em seguida, durante o tempo de compilação, o pacote de módulos do webpack e o plug-in do Maven transformam esses arquivos em clientlibs otimizadas do AEM no módulo ui.apps.

As alterações de front-end são implantadas no ambiente do AEM as a Cloud Service ao executar o pipeline de pilha completa no Cloud Manager.

Os recursos de front-end são entregues aos navegadores da web por meio de caminhos URI que começam com /etc.clientlibs/ e normalmente são armazenados em cache no AEM Dispatcher e na CDN.

NOTE
Da mesma forma, na Jornada de criação rápida de sites do AEM, as alterações de front-end são implantadas no ambiente do AEM as a Cloud Service, executando-se o pipeline de front-end. Consulte Configurar o seu pipeline

Revisar as configurações do webpack no projeto de sites da WKND development-frontend-webpack-clientlib

  • Há três arquivos de configuração do webpack usados para agrupar os recursos de front-end dos sites da WKND.

    1. webpack.common: contém a configuração comum para instruir o agrupamento e a otimização de recursos da WKND. A propriedade saída informa onde emitir os arquivos consolidados (também conhecidos como pacotes de JavaScript, mas não devem ser confundidos com pacotes da OSGi do AEM) que ela cria. O nome padrão é definido como clientlib-site/js/[name].bundle.js.
    code language-javascript 
        ...
    output: {
            filename: 'clientlib-site/js/[name].bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    ...
    1. webpack.dev.js contém a configuração de desenvolvimento do webpack-dev-serve e aponta para o modelo HTML a ser usado. Também contém uma configuração de proxy para uma instância do AEM em execução em localhost:4502.
    code language-javascript 
        ...
    devServer: {
        proxy: [{
            context: ['/content', '/etc.clientlibs', '/libs'],
            target: 'http://localhost:4502',
        }],
    ...
    1. webpack.prod.js contém a configuração de produção e usa os plug-ins para transformar os arquivos de desenvolvimento em pacotes otimizados.
    code language-javascript 
        ...
    module.exports = merge(common, {
        mode: 'production',
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin(),
                new CssMinimizerPlugin({ ...})
        }
    ...

  • Os recursos agrupados são movidos para o módulo ui.apps com o plug-in aem-clientlib-generator, com a configuração gerenciada no arquivo 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'
    );
    ...
  • O frontend-maven-plugin de ui.frontend/pom.xml orquestra o agrupamento de webpacks e a geração de clientlibs durante a compilação do projeto do AEM.

$ mvn clean install -PautoInstallSinglePackage

Implantação no AEM as a Cloud Service deployment-frontend-aemaacs

O pipeline de pilha completa implanta essas alterações em um ambiente do AEM as a Cloud Service.

Entrega a partir do AEM as a Cloud Service delivery-frontend-aemaacs

Os recursos de front-end implantados por meio do pipeline de pilha completa são entregues a partir do site do AEM a navegadores da web como arquivos /etc.clientlibs. Para verificar isso, acesse o site da WKND hospedado publicamente e visualize a fonte da página da 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>
    ....

Parabéns! congratulations

Parabéns, você revisou o módulo ui.frontend do projeto de pilha completa

Próximas etapas next-steps

No próximo capítulo, Atualizar o projeto para usar o pipeline de front-end, você atualizará o projeto de sites da WKND do AEM para habilitá-lo para o contrato de pipeline de front-end.

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