Update full-stack AEM project to use front-end pipeline update-project-enable-frontend-pipeline

In this chapter, we make config changes to the WKND Sites project to use the front-end pipeline to deploy JavaScript and CSS, rather than requiring a complete full-stack pipeline execution. This decouples the development and deployment lifecycle of front-end and back-end artifacts, allowing for a more rapid, iterative development process overall.

Objectives objectives

  • Update full-stack project to use the front-end pipeline

Overview of configuration changes in the full-stack AEM project

Transcript
Let’s start making specific code and config changes in the weekend project to enable it for front-end pipeline. There are some prerequisites. The page component must extend from at least the v2 version of WCM Core page component. Second, privileges to create and deploy pipelines in Adobe Cloud Manager and access to an AM as a cloud service environment. Here, I am on a feature branch called front-end pipeline and upon success, I will push this branch to GitHub origin for your reference. The first change is to remove UI.Frontend module from root palm and related dependency from the UI.Apps module. Thus, it won’t be part of the full stack build cycle. Next, prepare the UI.Frontend module for the front-end pipeline contract. Here, I have added two new webpack config files. The webpack.theme.common.js is a copy of existing webpack.common.js with a few subtle differences related to the output property to name the optimized bundles a bit differently than client libraries. This will help us to differentiate whether it’s a theme or client lib and it’s totally up to you how you name these files. And the webpack.theme.prod.js is a copy of the existing webpack.prod.js and the subtle differences the newly created webpack.theme.common.js. Next, in package.json, make sure the name property value is the same as the site name from the slash conf node. Under the scripts property, a build script instructing how to build the CSS and JavaScript files from this module. Then, prepare the UI.Content module for the front-end pipeline contract by adding two Sling configs. First, the HTML page items config which includes all the CSS and JavaScript files that the UI front-end module generates under the dist folder using newly created webpack build process. Second, the site config with the theme package name value being the same as the package.json name property and the site template path pointing to a stub path. Lastly, a theme or style change to deploy via front-end pipeline for a test run. Here I am changing text color to Adobe Red. I have pushed these changes to my Adobe Git repository and we are ready for the deployment phase.

Prerequisites prerequisites

This is a multi-part tutorial and it is assumed that you have reviewed the ‘ui.frontend’ Module.

Changes to the full-stack AEM project

There are three project-related config changes and a style change to deploy for a test run, thus in total four specific changes in the WKND project to enable it for the front-end pipeline contract.

  1. Remove the ui.frontend module from full-stack build cycle

    • In, the WKND Sites Project 's root pom.xml comment the <module>ui.frontend</module> submodule entry.
    code language-xml
        ...
        <modules>
        <module>all</module>
        <module>core</module>
        <!--
        <module>ui.frontend</module>
        -->
        <module>ui.apps</module>
        ...
    
    • And comment related dependency from the 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. Prepare the ui.frontend module for the front-end pipeline contract by adding two new webpack config files.

    • Copy the existing webpack.common.js as webpack.theme.common.js, and change output property and MiniCssExtractPlugin, CopyWebpackPlugin plugin config params as below:
    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' }
            ]
        })
    ...
    
    • Copy the existing webpack.prod.js as webpack.theme.prod.js, and change the common variable’s location to the above file as
    code language-javascript
    ...
        const common = require('./webpack.theme.common.js');
    ...
    
    note note
    NOTE
    The above two ‘webpack’ config changes are to have different output file and folder names, so we can easily differentiate between clientlib (Full-stack) and theme generated (front-end) pipeline front-end artifacts.
    As you guessed, the above changes can be skipped to use existing webpack configs too but the below changes are required.
    It’s up to you how you want to name or organize them.
    • In the package.json file, make sure, the name property value is the same as the site name from the /conf node. And under the scripts property, a build script instructing how to build the front-end files from this module.
    code language-javascript
        {
        "name": "wknd",
        "version": "1.0.0",
        ...
    
        "scripts": {
            "build": "webpack --config ./webpack.theme.prod.js"
        }
    
        ...
        }
    
  3. Prepare the ui.content module for the front-end pipeline by adding two Sling configs.

    • Create a file at com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig - this includes all the front-end files that the ui.frontend module generates under the dist folder using webpack build process.
    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
    See the complete HtmlPageItemsConfig in the AEM WKND Sites project.
    • Second the com.adobe.aem.wcm.site.manager.config.SiteConfig with the themePackageName value being the same as the package.json and name property value and siteTemplatePath pointing to a /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
    See, the complete SiteConfig in the AEM WKND Sites project.
  4. A theme or styles change to deploy via front-end pipeline for a test run, we are changing text-color to Adobe red (or you can pick your own) by updating the ui.frontend/src/main/webpack/base/sass/_variables.scss.

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

Finally, push these changes to your program’s Adobe git repository.

AVAILABILITY
These changes are available on GitHub inside the front-end pipeline branch of the AEM WKND Sites project.

Caution - Enable Front End Pipeline button

The Rail Selector 's Site option shows the Enable Front End Pipeline button upon selecting your site root or site page. Clicking Enable Front End Pipeline button will override the above Sling configs, make sure you do not click this button after deploying above changes via Cloud Manager pipeline execution.

Enable Front End Pipeline button

If it is clicked by mistake, you have to rerun the pipelines to make sure that front-end pipeline contract and changes are restored.

Congratulations! congratulations

Congratulations, you have updated the WKND Sites project to enable it for the front-end pipeline contract.

Next steps next-steps

In the next chapter, Deploy using the Front-End Pipeline, you will create and run a front-end pipeline and verify how we moved away from the ‘/etc.clientlibs’ based front-end resources delivery.

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