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.
Solved! Go to Solution.
Views
Replies
Total Likes
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?
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.
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?
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.
Views
Likes
Replies
Views
Likes
Replies