Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

How to embed clientlibs in webpack projects

KiranVedantam1992
Community Advisor
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
snbaem
Correct answer by
Community Advisor
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
KiranVedantam1992
Community Advisor
Community Advisor

Hi @sudesh_16,

 

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

 

Thanks,

Kiran Vedantam.

snbaem
Correct answer by
Community Advisor
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

KiranVedantam1992
Community Advisor
Community Advisor

Hi @snbaem,

 

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

snbaem
Community Advisor
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?
KiranVedantam1992
Community Advisor
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
snbaem
Community Advisor
Community Advisor
Hmm right. Although at the component level, under clientlibs content xml, could we add embed (or dependencies) if that works?
KiranVedantam1992
Community Advisor
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?
snbaem
Community Advisor
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