AEM – Clientlibs

Client libraries in AEM are used to manage and bundle client-side resources such as JavaScript, CSS, and images. They allow developers to organize and reuse front-end code across multiple pages and templates in AEM. In this section, we will discuss how to create a client library in AEM.

Creating a Client Library in AEM:

1. Create a new folder for the client library under the /apps directory. The convention for naming client library folders is clientlibs.<name>.For example, to create a client library named myclientlib, create a new folder /apps/clientlibs.myclientlib.
2. Inside the myclientlib folder, create a js and css subfolder. These subfolders will hold the JavaScript and CSS files that are part of the client library.For example, create folders /apps/clientlibs.myclientlib/js and /apps/clientlibs.myclientlib/css.
3. Create a clientlib node under the myclientlib folder using the nt:folder node type. This node will hold the client library definition.For example, create a new node /apps/clientlibs.myclientlib/clientlib using the nt:folder node type.
4. Set the properties of the clientlib node to define the client library. The following properties can be set:
   • jcr:title: The title of the client library.
   • jcr:description: A description of the client library.
   • categories: An array of categories that the client library belongs to. Categories can be used to group client libraries and control their loading order.
   • allowProxy: A Boolean flag indicating whether the client library can be served by a reverse proxy.

   For example, to set the title and categories of the myclientlib client library, set the following properties:

   jcr:title = My Client Library
   categories = [mycategory]

   Note: The categories property is optional, but it is recommended to use it to group and organize client libraries.

5. Add the JavaScript and CSS files to the client library. To do this, create a categories node under the clientlib node, using the nt:folder node type.

   For example, create a new node /apps/clientlibs.myclientlib/clientlib/categories using the nt:folder node type.

6. Add the JavaScript and CSS files to the categories node using the cq:include node type. The cq:include node has the following properties:
   • file: The path to the JavaScript or CSS file to include.
   • path: An alternative path to the JavaScript or CSS file. This can be used to include files from outside of the client library folder.

   For example, to include a JavaScript file named myscript.js and a CSS file named mystyle.css, create the following nodes:

   /apps/clientlibs.myclientlib/js/myscript.js
   /apps/clientlibs.myclientlib/css/mystyle.css
   
   /apps/clientlibs.myclientlib/clientlib/categories/js
     cq:include (nt:file)
       file = /apps/clientlibs.myclientlib/js/myscript.js
   
   /apps/clientlibs.myclientlib/clientlib/categories/css
     cq:include (nt:file)
       file = /apps/clientlibs.myclientlib/css/mystyle.css

7. Include the client library in your AEM pages or templates. To do this, use the clientlib Sling tag in your JSP files.

   For example, to include the `myclient