How to embed clientlibs in webpack projects

Avatar

Avatar
Springboard
Level 7
KiranVedantam1992
Level 7

Likes

190 likes

Total Posts

207 posts

Correct reply

60 solutions
Top badges earned
Springboard
Give Back 5
Ignite 1
Affirm 50
Validate 1
View profile

Avatar
Springboard
Level 7
KiranVedantam1992
Level 7

Likes

190 likes

Total Posts

207 posts

Correct reply

60 solutions
Top badges earned
Springboard
Give Back 5
Ignite 1
Affirm 50
Validate 1
View profile
KiranVedantam1992
Level 7

14-06-2021

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 100
Level 6
snbaem
Level 6

Likes

112 likes

Total Posts

245 posts

Correct reply

35 solutions
Top badges earned
Boost 100
Springboard
Establish
Validate 25
Validate 10
View profile

Avatar
Boost 100
Level 6
snbaem
Level 6

Likes

112 likes

Total Posts

245 posts

Correct reply

35 solutions
Top badges earned
Boost 100
Springboard
Establish
Validate 25
Validate 10
View profile
snbaem
Level 6

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

 

Answers (1)

Answers (1)

Avatar

Avatar
Validate 1
Level 1
sudesh_16
Level 1

Likes

4 likes

Total Posts

6 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
sudesh_16
Level 1

Likes

4 likes

Total Posts

6 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
sudesh_16
Level 1

14-06-2021

Hi @KiranVedantam1992 ,

 

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