DocumentazioneAEMTutorial su AEMTutorial WKND di AEM Sites

Rivedi il modulo "ui.frontend" del progetto AEM full-stack aem-full-stack-ui-frontent

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Intermedio
  • Sviluppatore
  • Amministratore

In questo capitolo esaminiamo lo sviluppo, la distribuzione e la distribuzione di artefatti front-end di un progetto AEM full-stack, concentrandoci sul modulo "ui.frontend" del progetto Sites WKND.

Obiettivi objective

  • Comprendere la generazione e il flusso di implementazione di artefatti front-end in un progetto full-stack dell’AEM
  • Esamina le configurazioni webpack del modulo ui.frontend del progetto full stack dell'AEM
  • Processo di generazione della libreria client AEM (nota anche come clientlibs)

Flusso di distribuzione front-end per progetti AEM full-stack e Creazione rapida di siti

IMPORTANT
Questo video illustra e illustra il flusso front-end per i progetti Full-Stack e Creazione rapida di siti per delineare la sottile differenza nel modello di creazione, distribuzione e consegna delle risorse front-end.

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

Prerequisiti prerequisites

Per ulteriori dettagli, consulta il progetto del sito WKND dell’AEM README.md.

Flusso degli artefatti front-end del progetto full-stack dell’AEM flow-of-frontend-artifacts

Di seguito è riportata una rappresentazione di alto livello del flusso sviluppo, distribuzione e consegna degli artefatti front-end in un progetto AEM full-stack.

Sviluppo, distribuzione e distribuzione di artifact front-end

Durante la fase di sviluppo, le modifiche front-end come lo stile e il rebranding vengono eseguite aggiornando i file CSS e JS dalla cartella ui.frontend/src/main/webpack. Quindi, durante la fase di creazione, il modulo-bundler webpack e il plug-in maven trasformano questi file in clientlibs AEM ottimizzati nel modulo ui.apps.

Le modifiche front-end vengono distribuite nell'ambiente AEM as a Cloud Service durante l'esecuzione della pipeline Full-stack in Cloud Manager.

Le risorse front-end vengono distribuite ai browser web tramite percorsi URI che iniziano con /etc.clientlibs/ e sono in genere memorizzate nella cache in AEM Dispatcher e CDN.

NOTE
Analogamente, nel Percorso di creazione rapida siti AEM, le modifiche front-end vengono distribuite nell'ambiente AEM as a Cloud Service eseguendo la pipeline front-end. Vedere Configurazione della pipeline

Verifica configurazioni webpack nel progetto WKND Sites development-frontend-webpack-clientlib

  • Sono disponibili tre file di configurazione webpack utilizzati per raggruppare le risorse front-end dei siti WKND.

    1. webpack.common - Contiene la configurazione common per istruire il bundling e l'ottimizzazione delle risorse WKND. La proprietà output indica dove emettere i file consolidati (noti anche come bundle di JavaScript, ma da non confondere con i bundle OSGi AEM) che crea. Il nome predefinito è 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 contiene la configurazione development per webpack-dev-server e punta al modello di HTML da utilizzare. Contiene inoltre una configurazione proxy a un'istanza AEM in esecuzione su localhost:4502.
    code language-javascript 
        ...
    devServer: {
        proxy: [{
            context: ['/content', '/etc.clientlibs', '/libs'],
            target: 'http://localhost:4502',
        }],
    ...
    1. webpack.prod.js contiene la configurazione production e utilizza i plug-in per trasformare i file di sviluppo in bundle ottimizzati.
    code language-javascript 
        ...
    module.exports = merge(common, {
        mode: 'production',
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin(),
                new CssMinimizerPlugin({ ...})
        }
    ...

  • Le risorse in bundle vengono spostate nel modulo ui.apps utilizzando il plug-in aem-clientlib-generator, utilizzando la configurazione gestita nel file 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'
    );
    ...
  • frontend-maven-plugin da ui.frontend/pom.xml orchestra la generazione di webpack bundling e clientlib durante la compilazione del progetto AEM.

$ mvn clean install -PautoInstallSinglePackage

Implementazione in AEM as a Cloud Service deployment-frontend-aemaacs

La pipeline full stack distribuisce queste modifiche in un ambiente AEM as a Cloud Service.

Consegna da AEM as a Cloud Service delivery-frontend-aemaacs

Le risorse front-end distribuite tramite la pipeline full-stack vengono distribuite dal sito AEM ai browser Web come /etc.clientlibs file. Puoi verificare questo fatto visitando il sito WKND ospitato pubblicamente e visualizzando l'origine della pagina 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>
    ....

Congratulazioni. congratulations

Congratulazioni, hai esaminato il modulo ui.frontend del progetto full stack

Passaggi successivi next-steps

Nel prossimo capitolo, Aggiorna progetto per utilizzare la pipeline front-end, verrà aggiornato il progetto WKND Sites dell'AEM per abilitarlo per il contratto della pipeline front-end.

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