Revisar o módulo "ui.frontend" do projeto AEM de pilha completa aem-full-stack-ui-frontent
No, este capítulo analisamos o desenvolvimento, a implantação e a entrega de artefatos de front-end de um projeto AEM de pilha completa, com foco no módulo "ui.frontend" do projeto do WKND Sites.
Objetivos objective
- Entender o fluxo de compilação e implantação de artefatos de front-end em um projeto de pilha completa de AEM
- Revise as configurações do webpack do módulo
ui.frontenddo projeto de pilha completa de AEM - Processo de geração de biblioteca de cliente AEM (também conhecido como clientlibs)
Fluxo de implantação de front-end para projetos de pilha completa de AEM e Criação rápida de sites
Pré-requisitos prerequisites
- Clonar o projeto AEM WKND Sites
- Criou e implantou o projeto clonado AEM WKND Sites no AEM as a Cloud Service.
Consulte o projeto do site AEM WKND README.md para obter mais detalhes.
Fluxo de artefatos de front-end do projeto de pilha completa de AEM flow-of-frontend-artifacts
Abaixo está uma representação de alto nível do fluxo de desenvolvimento, implantação e entrega dos artefatos de front-end em um projeto AEM de pilha completa.
Durante a fase de desenvolvimento, alterações de front-end, como estilo e rebranding, são realizadas atualizando os arquivos CSS, 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 maven transformam esses arquivos em clientlibs AEM otimizadas 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 CDN.
Revisar configurações do webpack no projeto Sites WKND development-frontend-webpack-clientlib
-
Há três arquivos de configuração do webpack usados para agrupar os recursos de front-end de sites WKND.
webpack.common- Contém a configuração common para instruir o agrupamento e a otimização de recursos WKND. A propriedade output informa onde emitir os arquivos consolidados (também conhecidos como pacotes JavaScript, mas não devem ser confundidos com pacotes OSGi AEM) que ela cria. O nome padrão está definido comoclientlib-site/js/[name].bundle.js.
code language-javascript ... output: { filename: 'clientlib-site/js/[name].bundle.js', path: path.resolve(__dirname, 'dist') } ...webpack.dev.jscontém a configuração de desenvolvimento para o webpack-dev-serve e aponta para o modelo de HTML a ser usado. Também contém uma configuração de proxy para uma instância AEM em execução emlocalhost:4502.
code language-javascript ... devServer: { proxy: [{ context: ['/content', '/etc.clientlibs', '/libs'], target: 'http://localhost:4502', }], ...webpack.prod.jscontém a configuração 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.appsusando o plug-in aem-clientlib-generator, com a configuração gerenciada no arquivoclientlib.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.xmlorquestra o agrupamento de webpacks e a geração de clientlib durante a compilação do projeto 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 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 do site AEM para navegadores da Web como arquivos /etc.clientlibs. Você pode verificar isso acessando o site da WKND hospedado publicamente e exibindo 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 projeto para usar o pipeline de front-end, você atualizará o Projeto de Sites WKND do AEM para habilitá-lo para o contrato de pipeline de front-end.