How AEM Clientlibs works

Here we will briefly talk about how clientlibs works in AEM and how we can create clientlibs.

Creating cq:ClientLibraryFolder

Clientlibs are generated and stored at /var/clientlibs by default, cq:ClientLibraryFolder nodes can be placed anywhere within the /apps , /libs and /etc subtrees of the repository

Repository node of type cq:ClientLibraryFolder:

[cq:ClientLibraryFolder] > sling:Folder

- dependencies (string) multiple

- categories (string) multiple

- embed (string) multiple

- channels (string) multiple

The properties of the cq:ClientLibraryFolder are configured as follows:

  • Categories[] : Identifies the categories into which the set of JS and/or CSS files within this cq:ClientLibraryFolder fall.

  • dependencies[] : This is a list of other client library categories on which this library folder depends. For example, given two cq:ClientLibraryFolder nodes F and G , if a file in F requires another file in G in order to function properly, then at least one of the categories of G should be among the dependencies of F .

  • embed : Used to embed code from other libraries. If node F embeds nodes G and H, the resulting HTML will be a concentration of content from nodes G and H.

  • allowProxy : If a client library is located under /apps , this property allows access to it via proxy servlet.

Referencing Client-Side Libraries

Using HTL

In HTL, client libraries are loaded through a helper template provided by AEM, which can be accessed through data-sly-use . Three templates are available in this file, which can be called through data-sly-call :

  • css - Loads only the CSS files of the referenced client libraries.

  • js - Loads only the JavaScript files.

  • all - Loads all the files(both CSS and JavaScript).

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"

data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

Using JSP

Add a ui:includeClientLib tag to your JSP code to add a link to client libraries in the generated HTML page.

<%@taglib prefix="ui" uri="" %> <ui:includeClientLib categories="<%= categories %>" />

The following code in a JSP file references the jQuery libraries:

<ui:includeClientLib categories="cq.jquery"/>

The generated HTML page contains the following code:

<script type="text/javascript" src="/etc/clientlibs/foundation/jquery.js"></script>

Client-Side Libraries Global Configuration

Clientlibs settings can be found in in system/console/configMgr in Adobe Granite HTML Library Manager.

Adobe Granite HTML Library Manager Configure this to control the handling of client libraries (css or js); including, for example, how the underlying structure is seen.

For production instances:

  • enable Minify (to remove CRLF and whitespace characters).

  • enable Gzip (to allow files to be gzipped and accessed with one request).

  • disable Debug

  • disable Timing

For JS development (especially when firebugging/debugging):

  • disable Minify

  • enable Debug to separate the files for debugging and use with firebug.

  • enable Timing in the case of interest in timing.

  • enable Debug console to see JS console log messages.

Via mod_expires / mod_deflate and the use of cache-busting you can cache the css/js files on the browser to increase overall performance of your pages. All of this will happen in combination with the dispatcher.

79 views0 comments

Recent Posts

See All

More about clientlibs in AEM

Here we will talk more details about clientlibs Static Resources in clientlibs Static resources below the client library folder must be in a folder called resources. If you do not have the static reso

Debugging Clientlibs

In this article we will discuss about how we can debug the js and css file in development environment. Let's see what are the debugging tools available in AEM. To see the embedded files in clientlibs