ui.frontend module overview | Community
Skip to main content
Imran Khan
Community Advisor
Imran KhanCommunity Advisor
Community Advisor
February 19, 2024

ui.frontend module overview

  • February 19, 2024
  • 3 replies
  • 506 views

ui.frontend module overview

  by @imran__khan 

Overview

This blog will provide complete end to end understanding of AEM ui.frontend module in terms of architecture, working and creating brand new clientlib.

 

Creation of AEM project using maven archetype generates AEM ui.frontend module based on webpack. ui.frontend module is completely responsible for having resource(such as font, image, etc. ), CSS, JS, etc. files. This blog highlights ui.frontend module also gets create as part of AEM project hierarchy using maven archetype.

 

Link


Q&A

Please use this thread to ask questions relating to this article

    3 replies

    K
    Kirthika
    Level 2
    July 31, 2025

    Could you please have suggested, like how we are copying JS and CSS files from ui.frontend to ui.apps --> clientlibs.
    Like the same way can we copy html files?

    Vishal_Anand
    Vishal_Anand
    Level 4
    July 31, 2025

    @kirthika You will need to write custom login in clientlib config manager in your ui.frontend module to copy over the generated clientlibs to apps module whenever build is completed.

    K
    Kirthika
    Level 2
    July 31, 2025
    {
              ...libsBaseConfig,
              name: "clientlib-abc",
              allowProxy: true,
              dependencies: ['xyz.dependencies'],
              definition: {
                  "jcr:primaryType": "cq:ClientLibraryFolder",
                  "categories": ['clientlibs.abc'],
                  "embed": []
             },
              assets: {
                  js: [
                      {
                          src: path.join(__dirname, 'node_modules', '@cat-ai', 'assistant-component', 'index.js'),
                          dest: "index.js"
                      }
                  ],
           resources: [
             {
               base: path.join(__dirname, 'node_modules', '@cat-ai', 'assistant-component', 'visualizer'),
               files: "stats.html"
             }
           ]
       }
    }



    But getting below error:
    \ui.frontend\node_modules\minimatch\minimatch.js:275
    [INFO] throw new TypeError('invalid pattern')
    [INFO] ^
    [INFO] TypeError: invalid pattern

    Terms & ConditionsAccessibility statement

    Loading footer...