L’archétype de projet AEM comprend un mécanisme de génération front-end dédié et facultatif basé sur Webpack. Ainsi, le module ui.frontend devient l’emplacement central de toutes les ressources front-end du projet, y compris les fichiers JavaScript et CSS. Pour tirer pleinement parti de cette fonctionnalité utile et flexible, il est essentiel de savoir comment le développement front-end s’intègre à un projet AEM.
En termes beaucoup plus simples, les projets AEM peuvent être considérés comme comprenant deux parties distinctes, mais connexes :
Ces deux processus de développement étant axés sur différentes parties du projet, les développements front-end et back-end peuvent être réalisés en parallèle.
Toutefois, le projet obtenu doit utiliser les résultats de ces deux processus de développement, à savoir les développements front-end et back-end.
L’exécution de npm run dev
permet de lancer le processus de génération front-end, qui rassemble les fichiers JavaScript et CSS stockés dans le module ui.frontend et qui crée deux bibliothèques clientes (ClientLibs) minifield, clientlib-site
et clientlib-dependencies
, et de les déposer dans le module ui.apps. Il est possible de déployer les bibliothèques clientes (ClientLibs) vers AEM. Ainsi, vous pouvez stocker votre code côté client dans le référentiel.
Si l’archétype complet de projet AEM est exécuté avec mvn clean install -PautoInstallPackage
tous les artefacts de projet, y compris les bibliothèques clientes (ClientLibs), sont ensuite transmis à l’instance AEM.
Découvrez comment AEM gère les bibliothèques clientes (ClientLibs) dans la documentation de développement AEM et comment les inclure, ou voyez ci-dessous comment le module ui.frontend les utilise.
Le module front-end est rendu disponible à l’aide d’une bibliothèque cliente AEM. Lors de l’exécution du script de génération NPM, l’application est créée et le package aem-clientlib-generator récupère le résultat de la génération et le transforme en une bibliothèque cliente de ce type.
Une bibliothèque cliente se compose des fichiers et répertoires suivants :
css/
: fichiers CSS pouvant être demandés dans le code HTML.css.txt
: indique à AEM l’ordre et le nom des fichiers dans css/
afin qu’ils puissent être fusionnés.js/
: fichiers JavaScript pouvant être demandés dans le code HTML.js.txt
: indique à AEM l’ordre et le nom des fichiers dans js/
afin qu’ils puissent être fusionnés.resources/
: cartes source, blocs de code autres que les points d’entrée (résultant du fractionnement de code), ressources statiques (par exemple, icônes), etc.Le module de génération front-end est un outil utile et très flexible, mais n’impose aucun avis en particulier sur la manière dont il doit être utilisé. Vous trouverez ci-dessous deux exemples d’utilisation possibles, mais les besoins à satisfaire pour votre projet personnel peuvent exiger d’autres modèles d’utilisation.
Grâce à Webpack, vous pouvez mettre en forme et développer vos contenus selon les résultats statiques des pages Web AEM dans le module ui.frontend.
wcmmode=disabled
de l’URLnpm run dev
pour générer les bibliothèques clientes (ClientLibs).Dans ce processus, un développeur AEM peut exécuter les première et deuxième étapes, puis transmettre le code HTML statique au développeur front-end qui se développe selon les résultats HTML AEM.
Vous pouvez également tirer parti de la bibliothèque de composants pour obtenir des exemples de résultats de balisage de chaque composant pour travailler sur le composant au lieu de la page.
Avec Storybook, vous pouvez effectuer un développement front-end plus important. Même s’il ne fait pas partie de l’archétype de projet AEM, vous pouvez installer Storybook et stocker vos artefacts dans le module ui.frontend. Il est possible de les déployer en tant que bibliothèques clientes (ClientLibs) une fois prêts pour les tests dans AEM en exécutant npm run dev
.
Storybook n’est pas fourni dans l’archétype de projet AEM. Si vous choisissez de l’utiliser, vous devez l’installer séparément.
Quel que soit le workflow front-end que vous décidez de mettre en œuvre pour votre projet, les développeurs front-end et back-end doivent avant tout s’entendre sur le balisage. En règle générale, AEM définit le balisage que les principaux composants fournissent. Vous pouvez toutefois le personnaliser, le cas échéant.
L’archétype de projet AEM comprend un mécanisme de génération front-end dédié facultatif basé sur Webpack avec les fonctionnalités suivantes.
/clientlib/js
, /clientlib/css
ou /clientlib/scss
..content.xml
ou js.txt
/css.txt
n’est requis, car tous les éléments sont exécutés via Webpack./component/
.
sites.js
et vendors.js
.site.js
et site.css
dans /clientlib-site
, ainsi que dependencies.js
et dependencies.css
dans /clientlib-dependencies
Pour plus d’informations d’ordre technique sur le module ui.frontend, consultez la documentation sur GitHub.
npm install
.Vous devez avoir exécuté l’archétype avec l’option -DoptionIncludeFrontendModule=y
pour renseigner le dossier ui.frontend.
Les scripts npm suivants orientent le workflow front-end :
npm run dev
: version complète avec optimisation JS désactivée (shaking d’arborescence, etc.), cartes source activées et optimisation CSS désactivée.npm run prod
: version complète avec optimisation JS activée (shaking d’arborescence, etc.), cartes source désactivées et optimisation CSS activée.npm run start
: Démarre un serveur de développement Webpack statique à des fins de développement local et avec une dépendance minimale d’AEM.Le module ui.frontend compile le code sous le dossier ui.frontend/src
et génère les fichiers CSS et JS compilés, ainsi que les ressources sous un dossier dénommé ui.frontend/dist
.
site.js
, site.css
et un dossier resources/
correspondant aux images et polices dépendantes de la disposition sont créés dans un dossier dist/
clientlib-site.dependencies.js
et dependencies.css
sont créés dans un dossier dist/clientlib-dependencies
.L’option de version front-end utilise des fichiers de configuration Webpack uniquement destinés au développement et à la production qui partagent un fichier de configuration commun. Les paramètres de développement et de production peuvent ainsi être modifiés indépendamment.
Le processus de génération du module ui.frontend tire parti du plug-in aem-clientlib-generator pour déplacer les fichiers CSS et JavaScript compilés, ainsi que les ressources utilisées dans le module ui.apps. La configuration aem-clientlib-generator est définie dans clientlib.config.js
. Les bibliothèques clientes suivantes sont générées :
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies
Les catégories clientlib-site
et clientlib-dependencies
sont ajoutées aux pages via la configuration Règles de page dans le modèle par défaut. Pour afficher les règles, modifiez la ligne de commande Modèle de page de contenu > Informations de page > Règles de page.
L’ajout final de bibliothèques clientes à la page des sites se présente comme suit :
<HTML>
<head>
<link rel="stylesheet" href="clientlib-base.css" type="text/css">
<script type="text/javascript" src="clientlib-dependencies.js"></script>
<link rel="stylesheet" href="clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="clientlib-site.css" type="text/css">
</head>
<body>
....
<script type="text/javascript" src="clientlib-site.js"></script>
<script type="text/javascript" src="clientlib-base.js"></script>
</body>
</HTML>
Vous pouvez naturellement modifier cet ajout en mettant à jour les règles de page ou en modifiant les catégories, et incorporer les propriétés des bibliothèques clientes concernées.
Le module ui.frontend comprend un serveur webpack-dev-server qui assure le rechargement en direct pour réaliser un développement front-end rapide en dehors d’AEM. La configuration tire parti du plug-in html-webpack-plugin pour intégrer automatiquement les fichiers CSS et JavaScript compilés à partir du module ui.frontend dans un modèle HTML statique.
ui.frontend/webpack.dev.js
ui.frontend/src/main/webpack/static/index.html
ui.frontend/webpack.dev.js
.mvn -PautoInstallSinglePackage clean install
depuis la racine du projet pour l’installer dans son intégralité sur une instance AEM s’exécutant sur localhost:4502
.ui.frontend
.npm run start
pour démarrer le serveur de développement Webpack. Une page de navigateur (localhost:8080
ou le port disponible suivant) doit s’ouvrir.Vous pouvez désormais modifier les fichiers CSS, JS, SCSS et TS, et voir ces modifications répercutées immédiatement sur le serveur de développement Webpack.