Basics of Clientlibs in AEM?

AEM uses client-side library folders to organize CSS, JS and image files.

A clientlibs folder or node is of type cq:ClientLibraryFolder.

Following are the properties of the cq:ClientLibraryFolder which can be configured to categorize it and to list the dependencies

categories: You can specify a single or multiple categories.

dependencies: You can specify a single or multiple categories on which this library depends on. eg. if your code requires jQuery to be loaded first, then specify the category of jQuery library here.

embed: You can specify another clientlibrary which can be embedded or merged into single library file during runtime.

Creating Client Library Folders in AEM using CRXDE

First create cq:ClientLibraryFolder under a component or folder. Then specify categories property with the name of the category

js.txt – Create a file with name js.txt and specify the name of the file to include.

Add #base=js as first line in this file. Where js is the name of the folder.

css.txt – Create a file with name css.txt and specify the name of the file to include.

Add #base=css as first line in this file. Where css is the name of the folder.

Create a folder with name css and js and include your .css and .js files in these folders.

Creating Client Library Folders in AEM using Code Editor

1. Creating a new folder with name clientlibs inside apps or component.
2. Create “js” folder for javascript files.
3. Create “css” folder for css files.
4. Create “images” folder for storing images.
5. Create a file call “context.xml” which will have metadata about this client library.
6. Add JavaScript, CSS and image files to the folders.