DocumentaçãoAEMTutoriais do AEMTutorials do WKND AEM Sites

Atualizar projeto AEM de pilha completa para usar pipeline de front-end update-project-enable-frontend-pipeline

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined
  • undefined

Neste capítulo, fazemos alterações de configuração no projeto do WKND Sites para usar o pipeline de front-end para implantar JavaScript e CSS, em vez de exigir uma execução completa de pipeline de pilha completa. Isso dissocia o ciclo de vida de desenvolvimento e implantação dos artefatos de front-end e back-end, permitindo um processo de desenvolvimento mais rápido e iterativo em geral.

Objetivos objectives

  • Atualizar projeto de pilha completa para usar o pipeline de front-end

Visão geral das alterações de configuração no projeto AEM de pilha completa

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

Pré-requisitos prerequisites

Este é um tutorial de várias partes e presume-se que você tenha revisado o Módulo'ui.frontend'.

Alterações no projeto AEM de pilha completa

Há três alterações de configuração relacionadas ao projeto e uma alteração de estilo a ser implantada para uma execução de teste, ou seja, um total de quatro alterações específicas no projeto WKND para habilitá-lo para o contrato de pipeline de front-end.

  1. Remover o módulo ui.frontend do ciclo de compilação de pilha completa

    • No, a raiz pom.xml do Projeto do Sites WKND comenta a entrada do submódulo <module>ui.frontend</module>.
    code language-xml 
        ...
    <modules>
    <module>all</module>
    <module>core</module>
    <!--
    <module>ui.frontend</module>
    -->
    <module>ui.apps</module>
    ...
    • E comentar a dependência relacionada do 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 o módulo ui.frontend para o contrato de pipeline de front-end adicionando dois novos arquivos de configuração de webpack.

    • Copie o webpack.common.js existente como webpack.theme.common.js e altere a propriedade output e os parâmetros de configuração de plug-in MiniCssExtractPlugin, CopyWebpackPlugin conforme abaixo:
    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' }
        ]
    })
...
    • Copie o webpack.prod.js existente como webpack.theme.prod.js e altere o local da variável common para o arquivo acima como
    code language-javascript 
    ...
    const common = require('./webpack.theme.common.js');
...
    note note
    NOTE
    As duas alterações de configuração de "webpack" acima devem ter nomes diferentes de arquivos de saída e pastas, para que possamos diferenciar facilmente entre artefatos de front-end de pipeline de clientlib (pilha completa) e de tema gerado (front-end).
    Como você imaginou, as alterações acima podem ser ignoradas para usar também as configurações de webpack existentes, mas as alterações abaixo são necessárias.
    Depende de você como quer nomeá-los ou organizá-los.
    • No arquivo package.json, verifique se o valor da propriedade name é igual ao nome do site do nó /conf. E na propriedade scripts, um script build instruindo como criar os arquivos front-end a partir deste módulo.
    code language-javascript 
        {
    "name": "wknd",
    "version": "1.0.0",
    ...

    "scripts": {
        "build": "webpack --config ./webpack.theme.prod.js"
    }

    ...
    }

  3. Prepare o módulo ui.content para o pipeline de front-end adicionando duas configurações do Sling.

    • Criar um arquivo em com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig - isso inclui todos os arquivos de front-end que o módulo ui.frontend gera na pasta dist usando o processo de compilação do 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
    Consulte o HtmlPageItemsConfig completo no projeto AEM WKND Sites.
    • Segundo o com.adobe.aem.wcm.site.manager.config.SiteConfig com o valor themePackageName igual ao valor de propriedade package.json e name e siteTemplatePath apontando para um valor de caminho de stub /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0.
    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 a SiteConfig concluída no projeto do AEM WKND Sites.

  4. Se um tema ou estilos forem alterados para implantação por meio do pipeline de front-end para uma execução de teste, estamos alterando text-color para Adobe vermelho (ou você pode escolher o seu) ao atualizar o ui.frontend/src/main/webpack/base/sass/_variables.scss.

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

Por fim, envie essas alterações para o repositório Git do Adobe do seu programa.

AVAILABILITY
Estas alterações estão disponíveis no GitHub na ramificação front-end do pipeline do projeto AEM de Sites WKND.

Cuidado - Botão Habilitar pipeline de front-end

A opção Site do Seletor de Painel mostra o botão Habilitar Pipeline de Front-End ao selecionar a raiz ou a página do site. Clicar no botão Habilitar Pipeline de Front-End substituirá as configurações do Sling acima. Verifique se você não clicou nesse botão depois de implantar as alterações acima por meio da execução do pipeline do Cloud Manager.

Botão Habilitar pipeline de front-end

Se for clicado por engano, é necessário executar novamente os pipelines para garantir que o contrato e as alterações do pipeline de front-end sejam restaurados.

Parabéns. congratulations

Parabéns, você atualizou o projeto WKND Sites para habilitá-lo para o contrato de pipeline de front-end.

Próximas etapas next-steps

No próximo capítulo, Implantar usando o Pipeline de Front-End, você criará e executará um pipeline de front-end e verificará como nós saímos da entrega de recursos de front-end baseada em '/etc.clientlibs'.

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