Examinez le module « ui.frontend » du projet AEM full-stack. aem-full-stack-ui-frontent

Dans ce chapitre, nous passons en revue le développement, le déploiement et la diffusion des artefacts front-end d’un projet AEM full-stack, en nous concentrant sur le module « ui.frontend » du projet Sites WKND.

Objectifs objective

  • Découvrir la version et le flux de déploiement des artefacts front-end dans un projet AEM full-stack.
  • Examiner les configurations du webpack du module du projet full-stack AEM ui.frontend.
  • Processus de génération de la bibliothèque cliente AEM (également appelée clientlibs)

Flux de déploiement front-end pour les projets AEM full-stack et de création rapide de site

IMPORTANT
Cette vidéo explique et présente le flux front-end pour les projets full-stack et de création rapide de site afin de souligner la différence subtile dans le modèle de version, de déploiement et de diffusion des ressources front-end.

Prérequis prerequisites

  • Cloner le projet AEM Sites WKND
  • Avoir créé et déployé le projet AEM Sites WKND cloné pour AEM as a Cloud Service.

Consultez le README.md du projet WKND Site d’AEM pour plus d’informations.

Flux d’artefact front-end du projet full-stack AEM flow-of-frontend-artifacts

Vous trouverez ci-dessous une représentation de haut niveau du flux de développement, déploiement et diffusion des artefacts front-end dans un projet AEM full-stack.

Développement, déploiement et diffusion d’artefacts front-end.

Au cours de la phase de développement, les modifications front-end telles que le style et le changement d’image sont effectuées en mettant à jour les fichiers CSS et JS du dossier ui.frontend/src/main/webpack. Ensuite, au moment de la création, le module-bundler webpack et le module externe Maven transforment ces fichiers en bibliothèques clientes AEM optimisées dans le module ui.apps.

Les modifications front-end sont déployées dans l’environnement AEM as a Cloud Service lors de l’exécution du pipeline full-stack dans Cloud Manager.

Les ressources front-end sont diffusées aux navigateurs web via des chemins URI commençant par /etc.clientlibs/, et sont généralement mises en cache sur AEM Dispatcher et le réseau CDN.

NOTE
De même, dans le parcours de création rapide de site AEM, les modifications front-end sont déployées dans l’environnement AEM as a Cloud Service en exécutant le pipeline front-end. Consultez Configuration de votre pipeline.

Examiner les configurations webpack dans le projet Sites WKND development-frontend-webpack-clientlib

  • Il existe trois fichiers de configuration webpack utilisés pour regrouper les ressources front-end du projet Sites WKND.

    1. webpack.common contient la configuration commune pour indiquer le regroupement et l’optimisation des ressources WKND. La propriété output indique où émettre les fichiers consolidés (également appelés lots JavaScript, mais à ne pas confondre avec les lots OSGi AEM) qu’elle crée. Le nom par défaut est défini sur 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 contient la configuration de développement utilisée pour le webpack-dev-server et pointe vers le modèle HTML à utiliser. Il comprend également une configuration proxy utilisée pour une instance AEM s’exécutant sur localhost:4502.
    code language-javascript
        ...
        devServer: {
            proxy: [{
                context: ['/content', '/etc.clientlibs', '/libs'],
                target: 'http://localhost:4502',
            }],
        ...
    
    1. webpack.prod.js contient la configuration de production et utilise les modules externes pour transformer les fichiers de développement en lots optimisés.
    code language-javascript
        ...
        module.exports = merge(common, {
            mode: 'production',
            optimization: {
                minimize: true,
                minimizer: [
                    new TerserPlugin(),
                    new CssMinimizerPlugin({ ...})
            }
        ...
    
  • Les ressources regroupées sont déplacées vers le module ui.apps en utilisant le module externe aem-clientlib-generator à l’aide de la configuration gérée dans le fichier 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'
    );
    ...
  • Le plug-in frontend-maven-plugin de ui.frontend/pom.xml orchestre le regroupement webpack et la génération de la bibliothèque cliente pendant la création du projet AEM.

$ mvn clean install -PautoInstallSinglePackage

Déploiement sur AEM as a Cloud Service deployment-frontend-aemaacs

Le pipeline full-stack déploie ces modifications sur un environnement AEM as a Cloud Service.

Diffusion depuis AEM as a Cloud Service delivery-frontend-aemaacs

Les ressources front-end déployées via le pipeline full-stack sont diffusées à partir d’AEM Sites vers les navigateurs web sous la forme de fichiers /etc.clientlibs. Vous pouvez le vérifier en consultant le site WKND hébergé publiquement et en affichant la source de la page 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>
    ....

Félicitations. congratulations

Félicitations, vous avez examiné le module ui.frontend du projet full-stack.

Étapes suivantes next-steps

Dans le chapitre suivant, Mettre à jour le projet pour utiliser le pipeline front-end, vous allez mettre à jour le projet AEM Sites WKND pour l’activer pour le contrat de pipeline front-end.

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