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

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

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