Werk volledig-stapel AEM project bij om front-end pijpleiding te gebruiken update-project-enable-frontend-pipeline

In dit hoofdstuk, maken wij config veranderingen in WKND-siteproject om de front-end pijpleiding te gebruiken om JavaScript en CSS op te stellen, eerder dan het vereisen van een volledige stapelpijpleiding uitvoering. Dit ontkoppelt de ontwikkeling en plaatsingslevenscyclus van front-end en back-end artefacten, die voor een sneller, iteratief ontwikkelingsproces over het algemeen toestaan.

Doelstellingen objectives

  • Werk volledig-stapelproject bij om de front-end pijpleiding te gebruiken

Overzicht van configuratieveranderingen in het full-stack AEM project

Vereisten prerequisites

Dit is een meerdelige zelfstudie en er wordt van uitgegaan dat u de Module 'ui.frontend'.

Veranderingen in het full-stack AEM project

Er zijn drie project-verwante config veranderingen en een stijlverandering om voor een testlooppas op te stellen, zo in totaal vier specifieke veranderingen in het project WKND om het voor het front-end pijpleidingscontract toe te laten.

  1. Verwijder de ui.frontend module van volledige-stapelbouwstijlcyclus

    • In, de wortel van het Project van de Plaatsen van WKND pom.xml de opmerking <module>ui.frontend</module> submodule-item.
    code language-xml
        ...
        <modules>
        <module>all</module>
        <module>core</module>
        <!--
        <module>ui.frontend</module>
        -->
        <module>ui.apps</module>
        ...
    
    • En de opmerking heeft betrekking op afhankelijkheid van de 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>
        -->
        ...
    
  2. De ui.frontend module voor het front-end pijpleidingscontract door twee nieuwe webpack configuratiedossiers toe te voegen.

    • Bestaande kopiëren webpack.common.js als webpack.theme.common.jsen wijzigen output eigendom en MiniCssExtractPlugin, CopyWebpackPlugin config-parameters voor insteekmodule, zoals hieronder:
    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' }
            ]
        })
    ...
    
    • Bestaande kopiëren webpack.prod.js als webpack.theme.prod.jsen wijzigt u de common locatie van variabele naar het bovenstaande bestand als
    code language-javascript
    ...
        const common = require('./webpack.theme.common.js');
    ...
    
    note note
    NOTE
    De bovenstaande twee configuratiewijzigingen in 'webpack' moeten verschillende uitvoerbestanden en mapnamen hebben, zodat we eenvoudig onderscheid kunnen maken tussen clientlib (Full-stack) en thema's die worden gegenereerd (front-end), frontale artefacten van de pijplijn.
    Zoals u hebt geraden, kunnen de bovenstaande wijzigingen worden overgeslagen om ook bestaande webpack-configuraties te gebruiken, maar de onderstaande wijzigingen zijn vereist.
    Het is aan jou hoe je ze wilt benoemen of organiseren.
    • In de package.json bestand, zorg ervoor dat de name eigenschapswaarde is gelijk aan de naam van de site /conf knooppunt. En onder de scripts eigenschap, build script dat aangeeft hoe de bestanden aan de voorzijde van deze module moeten worden gemaakt.
    code language-javascript
        {
        "name": "wknd",
        "version": "1.0.0",
        ...
    
        "scripts": {
            "build": "webpack --config ./webpack.theme.prod.js"
        }
    
        ...
        }
    
  3. De ui.content module voor de front-end pijpleiding door twee Sling toe te voegen vormt.

    • Een bestand maken op com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig - dit omvat alle front-end bestanden die ui.frontend module genereert onder de dist map met gebruik van webpack-constructieproces.
    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
    De volledige versie bekijken HtmlPageItemsConfig in de AEM WKND-siteproject.
    • Tweede com.adobe.aem.wcm.site.manager.config.SiteConfig met de themePackageName waarde gelijk aan package.json en name eigenschapswaarde en siteTemplatePath die verwijzen naar een /libs/wcm/core/site-templates/aem-site-template-stub-2.0.0 stub path value.
    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
    Zie, de volledige SiteConfig in de AEM WKND-siteproject.
  4. Een thema of de stijlen veranderen om via front-end pijpleiding voor een testlooppas op te stellen, veranderen wij text-color aan Adobe rood (of u kunt uw kiezen) door bij te werken ui.frontend/src/main/webpack/base/sass/_variables.scss.

    code language-css
        $black:     #a40606;
        ...
    

Zet deze wijzigingen tot slot door in de git-opslagplaats voor Adoben van uw programma.

AVAILABILITY
Deze veranderingen zijn beschikbaar op GitHub binnen front-end pijpleiding tak van de AEM WKND-siteproject.

Voorzichtigheid - Vooruiteinde pijplijn inschakelen knop

De Spoorwegkiezer s Site geeft de optie Vooruiteinde pijplijn inschakelen als u de hoofdmap of sitepagina van uw site selecteert. Klikken Vooruiteinde pijplijn inschakelen De knop overschrijft het bovenstaande Sling-configuraties, zorg ervoor u klikt niet deze knop na het implementeren van de bovenstaande wijzigingen via de pijpleiding van Cloud Manager.

Knop Pijl-vooruiteinde inschakelen

Als er per ongeluk op wordt geklikt, moet u de pijpleidingen opnieuw uitvoeren om ervoor te zorgen dat het frontend pijpleidingscontract en de veranderingen worden hersteld.

Gefeliciteerd! congratulations

Gefeliciteerd, hebt u het project van Plaatsen WKND bijgewerkt om het voor het front-end pijpleidingscontract toe te laten.

Volgende stappen next-steps

In het volgende hoofdstuk: Implementeren met behulp van de voorste pijplijn, zult u een front-end pijpleiding creëren en in werking stellen en zult verifiëren hoe wij weg van de '/etc.clientlibs' gebaseerde front-end resources levering.

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