How to embed clientlibs in webpack projects | Community
Skip to main content
Kiran_Vedantam
Community Advisor
Kiran_VedantamCommunity Advisor
Community Advisor
June 14, 2021
Solved

How to embed clientlibs in webpack projects

  • June 14, 2021
  • 2 replies
  • 3097 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Shubham_borole

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

     

    2 replies

    sudeshb1607
    sudeshb1607
    June 14, 2021

    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-45ni

    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
      Community Advisor
      Kiran_VedantamCommunity AdvisorAuthor
      Community Advisor
      June 14, 2021

      Hi @sudeshb1607,

       

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

       

      Thanks,

      Kiran Vedantam.

      Shubham_borole
      Community Advisor
      Shubham_boroleCommunity AdvisorAccepted solution
      Community Advisor
      June 14, 2021

      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
        Community Advisor
        Kiran_VedantamCommunity AdvisorAuthor
        Community Advisor
        June 14, 2021

        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

        Terms & ConditionsAccessibility statement

        Loading footer...