[UI Frontend Module] what is supposed to go into the clientlib-dependencies clientlib?

[felipeS]

I don't understand what is supposed to go into the clientlib-dependencies, first I thought It was the place for the npm dependencies but always see that clientlib is empty.

Could someone help me understand what's the purpose of this or maybe add that clarification to the readme.md?

[vaneeghemk]

This is documented in the WKND Tutorial provided by Adobe:

clientlib-dependencies is intended to embed any 3rd party dependencies. It is a separate clientlib so that it can be loaded in the top of the HTML page if needed. Note the category of wknd.dependencies . The CSS and Javascript that generates this clientlib will actually be maintained in the ui.frontend module. We will explore this integration later in the tutorial.

https://docs.adobe.com/content/help/en/experience-manager-learn/getting-started-wknd-tutorial-develop/client-side-libraries.html

[felipeS]

Thanks a lot for the answer.

[felipeS]

I took at look at it, but actually it doesn't explain how to add dependencies to that clientlib.

[vaneeghemk]

On the same page, they explained:

In the same terminal, build and deploy the ui.frontend module by using the npm run dev command: $ npm run dev ... Entrypoint site = clientlib-site/css/site.css clientlib-site/js/site.js Entrypoint dependencies = clientlib-dependencies/js/dependencies.js start aem-clientlib-generator ... copy: dist/clientlib-site/css/site.css ../ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css The command npm run dev should build and compile the source code for the Webpack project and ultimately populate the clientlib-site and clientlib-dependencies in the ui.apps module.

This sample code is also Available on GitHub.

More info on the ui.frontend module can be found here.

[mpanecki-xumak]

@vaneeghemk Sorry to say that but this explains nothing. The archetype as well as the WKND project on Github does not use dependencies files at all. It the later project even the logic for creating separate output folders is removed from the webpack config. Also instead of pointing out to 3 different sources I would prefer to have extended readme file in the project that explains how to use this feature.

[akhatri]

I also dont understand these examples. I had a look at the source code of the WKND tutorial and it has the vendors file as empty https://github.com/adobe/aem-guides-wknd/blob/master/ui.frontend/src/main/webpack/site/vendors.js

There are no examples on the proper use of dependencies. Are they plugins? Can we have an example of adding a 3rd party NPM or package?

We are in the process of migrating our Archetype version and as an example I included a Cookies package into vendors.js like so

import Cookies from 'js-cookie'

console.log(Cookies) // nothing

In my site.js where I have custom Javascript that depends on this package. I get Cookies are undefined (perhaps due to the scope. If I do import the Cookies within the module, it works) and so this dependencies folder defeats the purpose, unless someone has a concrete example.

[holmsj]

It looks to me like this functionality was partially removed in Archetype 23.

Archetype 22 has dependencies entry on line 22 of webpack.common.js pointing to vendors.js

entry: {
    site: SOURCE_ROOT + '/site/main.ts',
    dependencies: SOURCE_ROOT + '/site/vendors.js'
},

ui.frontend/src/main/webpack/site/main.ts was at that time restricted to specific paths for components .js and .ts files

// Stylesheets
import "./main.scss";

// Typescript/Javascript
import "../components/**/*.js";
import "../components/**/*.ts";`

ui.frontend/src/main/webpack/site/vendors.js was defined and would be entry point for dependencies files

Archetype 23 and above have removed the dependencies entry from webpack.common.js, removed vendors.js, and have made main.ts more flexible in where it can find .js and .ts files.

This is fine, but it leaves behind things about clientlib-dependencies in several files like in clientlib.config.js and the ui.apps .gitignore file. If the webpack tasks are no longer intended to include these files, it would seem that should be removed and clientlib-dependencies should go back to being handled the traditional way outside of ui.frontend.

[kpolychr]

Is there any sort of update on this, specifically any suggested way forward? E.g. should we switch to Archetype 22, wait for 24 or simply ignore the redundant clientlibs structure and work with Archetype 23 as-is? We'd like to avoid fiddling with webpack configs and straying too far away from the initial archetype setup.