Expand my Community achievements bar.

SOLVED

How to embed clientlibs in webpack projects

Avatar

Community Advisor

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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"
      ]
    }
  }

 

View solution in original post

9 Replies

Avatar

Community Advisor

Hi @sudesh_16,

 

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

 

Thanks,

Kiran Vedantam.

Avatar

Correct answer by
Community Advisor

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"
      ]
    }
  }

 

Avatar

Community Advisor

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

Avatar

Community Advisor
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?

Avatar

Community Advisor
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

Avatar

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

Avatar

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

Avatar

Community Advisor
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