Menu

Showing posts with label ClientLibs. Show all posts
Showing posts with label ClientLibs. Show all posts

How to add custom clientLibs on component dialog in AEM

Adding custom clientLibs on component dialog in AEM.

  1. Add a categories property in clientLibs node. e.g. categories=wknd.hero
    AEM Dialog ClientLibs | AEM ClientLibs

  2. Add property extraClientlibs = wknd.hero on dialog node.
    AEM Dialog ClientLibs | AEM ClientLibs


  3. You have done with the adding the custom clientlibs to a component dialog in AEM.

How to recompile clientlibs in AEM?

Go to http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html

Here you will see two buttons. As shown in below screenshot.

1. Invalidate cache

2. Rebuild Libraries

How to invalidate cache in AEM
Invalidate cache in AEM



Invalidate cache

Invalidate cache option is to invalidate the cahe from AEM. Once you will click on this button you will see a success or failure message on the same page. Below is the screenshot of successful invalidation.



Rebuild Client Libraries

Rebuild clientlibs will be rebuild the entire client library of AEM. After successful rebuild you would see the below screen. 

Rebuild AEM clientlibs
How to rebuild AEM client libraries
Rebuild AEM client Libraries



add versioning with clientlibs files in aem

In this article we wil see how to add or remove versioning with clientlibs files(like JavaScript and Cascading Style Sheet (CSS)) in aem? 
ACS AEM Commons provide a Versioned ClientLibs tool to make serve the clientlibs files(JS and CSS) with postfix with a unique id that is know as long TTLs. Everytime you update your any JS and CSS file that unique id get updated for that and because of that AEM server always serve the latest clientlibs files to browser. It also helps to invalidate the caching at CDN and dispatcher level and ensure every request get served with latest and updated version of clientlibs file.

To make our clientlibs files versionable we need to do the following configurations in AEM.
Install latest ACS AEM Commons. Donwload link. This will help us to allow CSS and JavaScript served via AEM ClientLibs to be cached client-side with long TTLs.

Create a Rewriter Configuration Node  

Under project config folder [/apps/<project name>/config/] create a node rewriter with node type sling:Folder.
Now under the rewriter node, create a node versioned-clientlibs of node type nt:unstructured and add the following highlighted properties on versioned-clientlibs.
You may refer the default configuration of tranformer and versioned-clientlibs under path /libs/cq/config/rewriter/default. 
After adding all configurations xml file of versioned-clientlibs will look like this. /apps/<project name>/config/rewriter/versioned-clientlibs/.content.xml


You may verify the changes in sling rewriter rules. http://localhost:4502/system/console/status-slingrewriter

versioned-clientlibs configuration in sling rewriter
versioned-clientlibs configuration in sling rewriter

 Apache Configuration

We need to now configure the Apache to send the right header to set a long TTL with clientlibs (JavaScript and CSS) files:
SetEnvIf Request_URI "(\.min)?\.[a-f0-9]+\.js" long_expires=true
SetEnvIf Request_URI "(\.min)?\.[a-f0-9]+\.css" long_expires=true
Header set Cache-Control max-age=2592000 env=long_expires 

How to disable this versioning or TTL from clientlibs files

To disable this feature, in AEM config manager we have a configuration called "ACS AEM Commons - Versioned Clientlibs Transformer Factory".

Note:
This re-writer does NOT support with

  • URIs embedded in CSS or JavaScript, including: background-images, web fonts, etc.
  • Relative URIs, e.g. etc/clientlibs/mysite/styles.css
  • URIs including a scheme, e.g. http://example.com/etc/clientlibs/mysite/styles.css and //example.com/etc/clientlibs/mysite/styles.css
  • URIs to non-AEM HtmlClientLibrary resources, e.g. /etc/designs/mysite.css
  • Tags contained in conditional comments.
  • ClientLibs included by Javascript (e.g. when leveraging the property channels)

References