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 resources, such as images, under the folder resources, it cannot be referenced on a publish instance. Here is an example: http://localhost:4503/etc.clientlibs/geometrixx/components/clientlibs/resources/example.gif


allowProxy = true


It is recommended to locate client libraries under /apps and expose them via /etc.clientlibs by leveraging the allowProxy property.

In order for the client libraries under /apps to be accessible, a proxy servlet is used. The ACLs are still enforced on the client library folder, but the servlet allows for the content to be read via /etc.clientlibs/ if the allowProxy property is set to true.


A static resource can only be accessed via the proxy, if it resides below a resource below the client library folder.

As an example:

  • You have a clientlib in /apps/myproject/clientlibs/foo

  • You have a static image in /apps/myprojects/clientlibs/foo/resources/icon.png

Then you set the allowProxy property on foo to true.

  • You can then request /etc.clientlibs/myprojects/clientlibs/foo.js

  • You can then reference the image via /etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png


When using proxied client libraries, the AEM Dispatcher configuration may require an update to ensure the URIs with the extension clientlibs are allowed.

Using Preprocessors


AEM allows for pluggable preprocessors and ships with support for YUI Compressor for CSS and JavaScript and Google Closure Compiler (GCC) for JavaScript with YUI set as AEM's default preprocessor.

A preprocessor configuration on the clientlib node takes precedence over the OSGI configuration (HTML Library Manager OSGi configuration).

Format and Examples

Format

config:= mode ":" processorName options*;
 mode:= "default" | "min";
 processorName := "none" | <name>;
 options := ";" option;
 option := name "=" value;

YUI Compressor for CSS Minification and GCC for JS

cssProcessor: ["default:none", "min:yui"]
 jsProcessor: ["default:none", "min:gcc;compilationLevel=advanced"]
Typescript to Preprocess and Then GCC to Minify and Obfuscate
jsProcessor: [
  "default:typescript",
  "min:typescript", 
  "min:gcc;obfuscate=true"
 ]

Additional GCC Options

failOnWarning (defaults to "false")
 languageIn (defaults to "ECMASCRIPT5")
 languageOut (defaults to "ECMASCRIPT5")
 compilationLevel (defaults to "simple") (can be "whitespace", "simple", "advanced")

For further details on GCC options, see the GCC documentation.

70 views0 comments

Recent Posts

See All

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