Aggiorna il progetto AEM full stack per utilizzare la pipeline front-end update-project-enable-frontend-pipeline
In questo capitolo, verranno apportate modifiche alla configurazione di Progetto WKND Sites per utilizzare la pipeline front-end per distribuire JavaScript e CSS, anziché richiedere un’esecuzione completa della pipeline full stack. Questo separa lo sviluppo e il ciclo di vita di implementazione degli artefatti front-end e back-end, consentendo un processo di sviluppo più rapido e iterativo complessivo.
Obiettivi objectives
- Aggiornare il progetto full stack per utilizzare la pipeline front-end
Panoramica delle modifiche alla configurazione nel progetto AEM full stack
Prerequisiti prerequisites
Questa è un'esercitazione in più parti e si presume che abbiate rivisto Modulo 'ui.frontend'.
Modifiche al progetto full stack AEM
Per l’esecuzione di un test, sono disponibili tre modifiche di configurazione relative al progetto e una modifica di stile da distribuire, per un totale quindi di quattro modifiche specifiche nel progetto WKND per abilitarlo per il contratto della pipeline front-end.
-
Rimuovi il
ui.frontend
modulo dal ciclo di sviluppo full stack- In, la directory principale del progetto WKND Sites
pom.xml
commenta<module>ui.frontend</module>
voce modulo secondario.
code language-xml ... <modules> <module>all</module> <module>core</module> <!-- <module>ui.frontend</module> --> <module>ui.apps</module> ...
- E la dipendenza relativa al commento da
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> --> ...
- In, la directory principale del progetto WKND Sites
-
Prepara il
ui.frontend
per il contratto della pipeline front-end aggiungendo due nuovi file di configurazione webpack.- Copia il
webpack.common.js
aswebpack.theme.common.js
, e modificaoutput
proprietà eMiniCssExtractPlugin
,CopyWebpackPlugin
parametri di configurazione del plug-in:
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' } ] }) ...
- Copia il
webpack.prod.js
aswebpack.theme.prod.js
, e modificare ilcommon
posizione della variabile nel file sopra indicato come
code language-javascript ... const common = require('./webpack.theme.common.js'); ...
note note NOTE Le due modifiche alla configurazione "webpack" di cui sopra devono avere nomi di file di output e cartelle diversi, in modo da poter facilmente distinguere tra gli artefatti front-end della pipeline clientlib (full-stack) e quelli generati dal tema (front-end). Come hai indovinato, le modifiche di cui sopra possono essere ignorate per utilizzare anche le configurazioni esistenti del webpack, ma sono necessarie le modifiche di seguito. Sta a te nominarli o organizzarli. - In
package.json
file, assicurati che ilname
il valore della proprietà è uguale al nome del sito dalla proprietà/conf
nodo. E sottoscripts
proprietà, abuild
script che illustra come creare i file front-end da questo modulo.
code language-javascript { "name": "wknd", "version": "1.0.0", ... "scripts": { "build": "webpack --config ./webpack.theme.prod.js" } ... }
- Copia il
-
Prepara il
ui.content
per la pipeline front-end aggiungendo due configurazioni Sling.- Crea un file in
com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
- questo include tutti i file front-end cheui.frontend
genera un modulo sottodist
mediante il processo di creazione 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 Vedi la sezione completa HtmlPageItemsConfig nel Progetto AEM WKND Sites. - Secondo
com.adobe.aem.wcm.site.manager.config.SiteConfig
conthemePackageName
valore uguale al valorepackage.json
ename
valore della proprietà esiteTemplatePath
che punta a un/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0
valore del percorso stub.
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 Vedi, la sezione completa SiteConfig nel Progetto AEM WKND Sites. - Crea un file in
-
Stiamo modificando un tema o degli stili da distribuire tramite pipeline front-end per un’esecuzione di test
text-color
per Adobe rosso (o selezionarne uno tuo) aggiornando ilui.frontend/src/main/webpack/base/sass/_variables.scss
.code language-css $black: #a40606; ...
Infine, invia queste modifiche all’archivio Git di Adobe del programma.
Attenzione - Abilita pipeline front-end pulsante
Il Selettore della barra di Sito mostra il Abilita pipeline front-end dopo aver selezionato la directory principale del sito o la pagina del sito. Clic Abilita pipeline front-end sovrascriverà quanto sopra Configurazioni Sling, assicurati che non si fa clic su questo pulsante dopo aver distribuito le modifiche di cui sopra tramite l’esecuzione della pipeline di Cloud Manager.
Se fai clic su di esso per errore, devi eseguire nuovamente le pipeline per assicurarti che vengano ripristinati il contratto e le modifiche della pipeline front-end.
Congratulazioni. congratulations
Congratulazioni, hai aggiornato il progetto WKND Sites per abilitarlo per il contratto della pipeline front-end.
Passaggi successivi next-steps
Nel prossimo capitolo, Distribuire utilizzando la pipeline front-end, creerai ed eseguirai una pipeline front-end e verificherai come spostato dalla distribuzione delle risorse front-end basata su "/etc.clientlibs".