Mettre à jour un projet AEM full-stack pour utiliser le pipeline front-end update-project-enable-frontend-pipeline
Dans ce chapitre, nous apportons des modifications de configuration au projet WKND Sites pour utiliser le pipeline front-end afin de déployer JavaScript et CSS, plutôt que d’avoir à exécuter un pipeline full-stack. Cela découple le cycle de vie du développement et du déploiement des artefacts front-end et back-end, ce qui permet d’accélérer le processus de développement itératif.
Objectifs objectives
- Mettre à jour le projet full-stack pour utiliser le pipeline front-end
Présentation des modifications de configuration dans le projet AEM full-stack
Prérequis prerequisites
Il s’agit d’un tutoriel en plusieurs parties qui suppose que vous avez examiné le module « ui.frontend ».
Modifications apportées au projet AEM full-stack
Il existe trois modifications de configuration liées au projet et un changement de style à déployer pour une exécution de test, donc au total quatre modifications spécifiques à effectuer dans le projet WKND afin de l’activer pour le contrat de pipeline front-end.
-
Supprimez le module
ui.frontend
du cycle de création full-stack- Dans la racine
pom.xml
du projet WKND Sites, laissez un commentaire sur l’entrée du sous-module<module>ui.frontend</module>
.
code language-xml ... <modules> <module>all</module> <module>core</module> <!-- <module>ui.frontend</module> --> <module>ui.apps</module> ...
- Laissez également un commentaire sur les dépendances associées dans
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> --> ...
- Dans la racine
-
Préparez le module
ui.frontend
pour le contrat de pipeline front-end en ajoutant deux nouveaux fichiers de configuration webpack.- Copiez le
webpack.common.js
existant en tant quewebpack.theme.common.js
, modifiez la propriétéoutput
,MiniCssExtractPlugin
, et les paramètres de configuration du plug-inCopyWebpackPlugin
comme suit :
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' } ] }) ...
- Copiez le
webpack.prod.js
existant en tant quewebpack.theme.prod.js
et modifiez l’emplacement de la variablecommon
dans le fichier ci-dessus comme suit :
code language-javascript ... const common = require('./webpack.theme.common.js'); ...
note note NOTE Les deux modifications de la configuration « webpack » ci-dessus doivent comporter des noms de fichier et de dossier de sortie différents afin de pouvoir différencier facilement les artefacts clientlib (full-stack) des artefacts front-end générés par les thèmes. Comme vous l’avez deviné, les changements ci-dessus peuvent être ignorés pour utiliser les configurations webpack existantes, mais les modifications ci-dessous sont requises. C’est à vous de décider comment vous voulez les nommer ou les organiser. - Dans le fichier
package.json
, assurez-vous que la valeur de la propriéténame
est identique au nom du site du nœud/conf
. Assurez vous également qu’un scriptbuild
expliquant comment créer les fichiers front-end à partir de ce module se trouve sous la propriétéscripts
.
code language-javascript { "name": "wknd", "version": "1.0.0", ... "scripts": { "build": "webpack --config ./webpack.theme.prod.js" } ... }
- Copiez le
-
Préparez le module
ui.content
pour le pipeline front-end en ajoutant deux configurations Sling.- Créez un fichier sous
com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
- cela inclut tous les fichiers front-end que le moduleui.frontend
génère sous le dossierdist
à l’aide du processus de création 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 Consultez la HtmlPageItemsConfig complète dans le projet AEM WKND Sites. - Passez ensuite à
com.adobe.aem.wcm.site.manager.config.SiteConfig
, où la valeurthemePackageName
est identique à la valeur des propriétéspackage.json
etname
, et oùsiteTemplatePath
pointe vers le chemin d’accès/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 Voir la section SiteConfig complète dans le projet AEM WKND Sites. - Créez un fichier sous
-
Dans le cas d’une modification de thème ou de styles à déployer via le pipeline front-end pour une exécution de test, nous modifions la couleur
text-color
en rouge Adobe (ou vous pouvez choisir le vôtre) en mettant à jourui.frontend/src/main/webpack/base/sass/_variables.scss
.code language-css $black: #a40606; ...
Enfin, envoyez ces modifications au référentiel git d’Adobe de votre programme.
Attention - Bouton Activer le pipeline front-end
L’option Site du sélecteur de rail affiche le bouton Activer le pipeline front-end lors de la sélection de la racine ou de la page de votre site. Cliquer sur le bouton Activer le pipeline front-end remplacera les configurations Sling ci-dessus. Assurez-vous de ne pas cliquer sur ce bouton après le déploiement des modifications ci-dessus via l’exécution du pipeline Cloud Manager.
Si vous cliquez dessus par erreur, vous devrez réexécuter les pipelines pour vous assurer que le contrat et les modifications du pipeline front-end sont restaurés.
Félicitations ! congratulations
Félicitations, vous avez mis à jour le projet WKND Sites afin de l’activer pour le contrat de pipeline front-end.
Étapes suivantes next-steps
Dans le chapitre suivant, Déployer à l’aide du pipeline front-end, vous allez créer et exécuter un pipeline front-end, et vous découvrirez comment s’éloigner de la diffusion des ressources front-end « /etc.clientlibs ».