How does the AEM Client lib generator work?

[deepakthadituri]

Hi,

I am trying to build an SPA with Angular in AEM. Adobe has done a good job in giving step too step instructions on how to build one. However, I am trying to understand how does the AEM Clientlib generator work exactly while compiling the Angular JS and CSS files to be included as ClientLibs in the ui.apps module. I would love to know more about it to see if there are any customizations I am able to do to it and also the core functionality of it as well. Any information you might be able to provide would be of great help.

Thanks for the help in advance.

[BrianKasingli · Accepted solution]

@deepakthadituri,

The aem-clientlib-generator is in fact NOT compiling CSS or JS at all.

The aem-clientlib-generator node jS plugin only has one responsibility; to take already compiled CSS and JS, and build a client library to a target local destination. The targeted location is typically a maven module, which can be deployed into AEM, along with a standard maven build command. The aem-clientlib-generator will generate a new client library and will include all the required XML configurations, and includes the compiled JS or CSS local reference files. Compiled JS and CSS files can be achieved with WebPack, for example.

So how does an AEM JavaScript project build process look like?

1. mvn clean install from parent pom.xml directory (assuming that the AEM Maven Project Archetype is used)
2. mvn will run install on "ui.frontend.react".
3. "ui.frontend.react" - maven will run the plugin, "frontend-maven-plugin", which will install local version of node && npm
4. "ui.frontend.react" - once local node && npm has been installed, npm run build will be invoked.
5. "ui.frontend.react" - npm run build this will compile JS and/or CSS with the compiler engine of your choice (Web Pack, Gulp, Grunt, etc...) to the public folder.
6. "ui.frontend.react" - clientlib --verbose will generates client library(s) with the compiled CSS and JS with all the required XML configurations to a targeted destination folder. The CSS and JS assets are locally referenced correctly; an example of the targeted client library save destination: './../ui.apps/src/main/content/jcr_root/apps/my-site/clientlibs/clienlibs-site'.
7. "ui.apps" - should have the client library generated, and ready for installation to AEM (you can check the folder destination to see if the client library exists (./../ui.apps/src/main/content/jcr_root/apps/my-site/clientlibs/clienlibs-site)
8. "ui.apps" - mvn will build to a .zip file in the target folder. Use this zip content package to upload into AEM. Your client library should be there.

So in conclusion, the aem-clientlib-generator takes compiled JS and CSS files(example: from webpack), and generates AEM compliant client library (to a target destination, example: to ui.apps). Once the client library is generated, you can upload the compiled maven content package into AEM.

clientlib.config.js example:

The example below displays a configuration example of a client library being created with the client library folder name of "clientlib-site", and client library categories set to "my-site.example", and formatted to XML. The JS and CSS that will be generated apart of the client library structure will be gathered from the dist folder. I am expected to find the generated client library directly under ./../ui.apps/src/main/content/jcr_root/apps/my-site/clientlibs/clientlib-site.

module.exports = {
    // default working directory (can be changed per 'cwd' in every asset option)
    context: __dirname,

    // path to the clientlib root folder (output)
    clientLibRoot: './../ui.apps/src/main/content/jcr_root/apps/my-site/clientlibs',

    libs: [
        {
            name: 'clientlib-site',
            allowProxy: true,
            categories: ['my-site.example'],
            serializationFormat: 'xml',
            assets: {
                js: [
                    'dist/clientlib-site/*.js',
                ],
                css: [
                    'dist/clientlib-site/*.css'
                ]
            }
        }
    ]
};

I hope this helps.