ui.frontend module overview

[#1]

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

[#2]

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?

[#3]

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

[#4]

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