How to embed clientlibs in webpack projects

[Kiran_Vedantam]

Is there any way to embed clientlibs in projects which create front-end code via webpack?

Any documentation or examples are welcomed.

Thanks,
Kiran Vedantam.

[sudesh_16]

Hi @Kiran_Vedantam ,

ClientLibs are the recommended way when working with AEM, however since webpack is in trend now. You can refer to below examples to work on integration with different approaches:

https://dev.to/anfibiacreativa/integrating-a-modern-frontend-in-a-multi-tenant-aem-project-part-2-45...

https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/

https://www.npmjs.com/package/@aem-design/compose-webpack

https://github.com/Bounteous-Inc/aem-webpack-example

Thanks,

Sudesh

[Kiran_Vedantam]

Hi @sudesh_16,

Thanks for your response. My requirement is not mentioned in the above-listed blogs.

Thanks,

Kiran Vedantam.

[Shubham_borole · Accepted solution]

I may be off here, I am not clear on the webpack set up you have. But can you see if you can have the file/s to be embedded (included) in a common place and just import them in the entry points of templates (or any other structure you have followed)? Webpack should be able to handle import duplications I think. Not ideal probably since we won't be able to import the clientlib as whole itself may be.

Otherwise, According to https://www.npmjs.com/package/aem-clientlib-generator I see within the clientlib.config.js when generating a clientlib say "test.base.apps.mainapp", can we try to use embed for eg

// or as object (single clientlib)
  libs: {
    name: "test.base.apps.mainapp",
    embed: "test.base.apps.commonstuff",
    category: "also.optional"
    assets: {
      js: [
        "src/frontend/js/app.js"
      ],
      css: [
        "src/frontend/css/styling.css"
      ]
    }
  }

[Kiran_Vedantam]

Hi @Shubham_borole,

Thanks for the response. It worked. But any idea of adding it at the component-specific client-libs level? after going through the clientlib.config.js, I see the only way to add this is by writing custom JS to fetch the component name add it dynamically. Please suggest.

Thanks,

Kiran Vedantam

[Shubham_borole]

Would it be possible to try - Let webpack generate a desired clientlibd in apps say 'clientlib-component1' and in the content.xml node of the component add that to the 'categories' field?

[Kiran_Vedantam]

I am looking to add embed section to the component, not the category. Also, my project have styles at the site level not the component level

[Shubham_borole]

Hmm right. Although at the component level, under clientlibs content xml, could we add embed (or dependencies) if that works?

[Kiran_Vedantam]

The structure is generated by the webpack itself right? Once we add the embed manually, the build will override the value added, correct?

[Shubham_borole]

I am assuming the change at the component level is not included in webpack settings. the webpack additions to ui.apps will be at a somewhat higher level than the /apps/project/components, like /apps/project/clientlib-from-wp/clientlib-template1, 2 and so on. So we can manually in the code add that desired clientlib name to be embedded since we know what name webpack will generate