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. 

URI http://localhost:4502/crx/de/index.jsp#/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

 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".

Go to http://localhost:4502/system/console/configMgr 

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

• ACS Commons | https://adobe-consulting-services.github.io/acs-aem-commons/
• https://adobe-consulting-services.github.io/acs-aem-commons/features/versioned-clientlibs/index.html
• http://aempodcast.com/2016/front-end-engineering/versioning-clientlibs-aem/#.Xg_LpEczbIV
• http://www.aemcq5tutorials.com/tutorials/versioned-clientlibs-aem/
• 
  

Custom Dispatcher flush rule setup | acs commons

Create a custom dispatcher flush rule for your content, which an author can trigger using UI, without any involvement of developer and DevOps person. This is a single click activity for an author to invalidate the dispatcher cache.

For this ACS-commons provide a powerful which we need to configure in our AEM author instance. Here are the steps to set up the custom dispatcher flush using acs-commons.

 

Step 1: Log in to AEM instance.

Step 2: Download the acs-commons latest version from acs official site and install the acs-commons package in your AEM instance using AEM package manager [http://localhost:4502/crx/packmgr].

Step 3: After the successful installation of acs-commons, browse to AEM tools section. http://localhost:4502/miscadmin. 

Step 4: Now create a dispatcher flush page to set up your dispatcher configuration. Below is the screenshot.

1. Click on the Dispatcher Flush directory from the left rail.

2. Click on the new button from the menu bar, and select the option, New Page. As soon as you click on the New Page option a new window will appear. As highlighted below.

3. Put the Title and Name for the page. e.g. custom dispatcher flush

4. Click on the create button.

5. This will create a custom-dispatcher-flush page under the Dispatcher Flush directory.

Custom dispatcher flush

Step 5: Open this newly created "custom dispatcher flush" page. To open double click on the page name. Our custom dispatcher flush page will look like as below.

Note: In the above screenshot we could see under the Active Dispatcher Flush Agent there is no active dispatcher flush replication agent is showing.

Step 6: Click on the Edit option from next to the Dispatcher Flush Configuration. Once we click on Edit, the configuration settings option will appear. Here we have to set the following;

1. Flush method - We need to specify whether we want to invalidate the caching or completely delete the caching from the dispatcher server.

2. Paths to flush - We will list all the path and pages which we want to invalidate or delete from the dispatcher server.

Step 7: Now we have to enable the Dispatcher Flush agent queue on AEM author. [http://localhost:4502/etc/replication/agents.author/flush.html]. If the AEM instance is already configured with dispatcher then we need not do anything extra in this case, just verify the Dispatcher Flush agent from the above-mentioned path. 

In case the dispatcher Flush is not setup then configure the following in properties in the configuration setting.

1. Edit the Dispatcher Flush settings. Click on the Edit button from the below screen.

2. Enabled - Check enabled option.

3. Move to the transport tab and set the following

a. URI - URL of the dispatcher server.

b. User - a transport user name

c. Password - password of transport user

Our dispatcher configuration is set, now using the Test Connection option we can verify the configuration setting and ensure everything is fine. 

Step 8: We have done with our custom dispatcher setup.

Step 9: Now go back to your custom dispatcher page which we had created in Step 4. Open the page and see the changes. In the dispatcher flush page now we could see Flush paths on Dispatcher button and Dispatcher Flush under Active Dispatcher Flush Agent.

Step 10: Click on Flush Paths on the Dispatcher button highlighted in red to invalidate and delete the caching from the dispatcher server. Below is the screenshot. After triggering the flush go and validate the status of the cached content.

 

Dispatcher flush

References:

Adobe consulting services: 

https://adobe-consulting-services.github.io/acs-aem-commons/features/dispatcher-flush-ui/index.html