Documentation AEM AEM Tutorials AEM Sites WKND Tutorials

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

Last update: Tue May 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

Intermediate
Developer
Admin

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

video poster

https://video.tv.adobe.com/v/3409419?quality=12&learn=on

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.

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

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> --> ...`

    ...
    <!-- ====================================================================== -->
    <!-- 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>
    -->
    ...

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

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' } ] }) ...`

...
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" } ... }`

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

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"/> ...`

...
    <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

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> ...`

...
    <?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.

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