Creating a Link Rewriter for Adobe Experience Manager | Community
Skip to main content
smacdonald2008
smacdonald2008
October 16, 2015

Creating a Link Rewriter for Adobe Experience Manager

  • October 16, 2015
  • 2 replies
  • 19348 views

In today’s competitive business environment, a great looking website is just not enough. Focus has shifted towards page loading speeds, cross device compatibility with responsive and adaptive design patterns and also accessibility. When it comes to speed, there are many ways to improve your website’s performance. One of them is to keep resources that change infrequently cached. Using Adobe Experience Manager (AEM), you can cache most content, including images, scripts and HTML/JSP pages.

Not only can you cache these files on the dispatcher server but you can also make use of the visitor’s browser cache. If you allow files to be cached directly in the browser, the amount of load placed on the dispatcher server decreases drastically. You can inform the browser that is actually is okay for it to cache JavaScript and CSS files for a few days or maybe even weeks depending on your release cycle. But what happens when you make a change in these files before they have expired in the visitor’s browser cache? Well, then you have a problem, the user does not receive any changes unless they actually clear their browser cache, which is something that one cannot demand of their visitors.

This article explains a workaround for this issue when using AEM. The basic idea is by using Sling selectors; you can append a version number to the CSS/JavaScript files so that they will change with each release. This affects the actual name of the file so it does not matter if the browser has cached the scripts because it will look for the new file in the browser cache. Because this file does not already exist, it will fetch this new file from the server and the user will receive the latest changes.

You can create a custom Adobe Experience Manager (AEM) Link Rewriter that is based on the Apache Sling Rewriter module. This module is used for rewriting the output generated by the Sling rendering process.

Note: For more information about a Sling Rewriter, see Apache Sling Rewriter.

An Adobe CQ Link Rewriter is implemented as an OSGi bundle that contains a Java class that extends the org.apache.sling.rewriter.Transformer class. For information, see Interface Transformer.

To read this development article, click http://helpx.adobe.com/experience-manager/using/creating-link-rewrite.html.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    2 replies

    S
    Sam205505050
    October 16, 2015

    Hi Scott, thank you for this tutorial! 

    You have mentioned here "you can append a version number to the CSS/JavaScript files so that they will change with each release."  

    Could you kindly let me know how can I do this in Geometrixx example? I created bundle as per the instruction given in this tutorial but I'm not sure how to append version number to CSS/JS using Rewriter? Thank you for your help!

    smacdonald2008
    smacdonald2008Author
    October 16, 2015

    The Java logic is in the rewriteLink method. Once you deploy and activate the bundle, CQ ensures that a file is obtained from the server as opposed to using any cached version. Ojjis (our community member )can provide more details as he is the developer whom put this Java example together. 

    S
    Sam205505050
    October 16, 2015

    Did you add the correct urls for the designs in the geometrixx example.
    Find out where the geometrixx example you are looking at have it's design set and add that url to the config of the rewriter as shown in the example :)

    Good Luck
    /Johan


    @Johan, I updated your code like this with geometrixx design path -

    public CustomLinkTransformer(String version, String[] pathArray)
        {
                      this.version = "1.0.0";
                      String[] myStringArray = new String[]{"/etc/designs/geometrixx"};
                      this.pathArray = myStringArray;
        }

    After I can see the difference with version number appended but page does not load properly with CSS as /etc/designs/geometrixx/static.1.0.0.css does not exists - 

    <link href="/etc/designs/geometrixx/static.1.0.0.css" rel="stylesheet" type="text/css">
    <link href="https://forums.adobe.com/etc/designs/geometrixx.1.0.0.css" rel="stylesheet" type="text/css">

    Please advice if anything else needs to be done, Thanks

    Tyler_Maynard
    Tyler_Maynard
    November 16, 2017

    I get the following maven compile error when trying to run this code example:

    Appears to be from the following line of code:

    @Property(label = "Version", description = "Version Number to be appended.", value="1.0.0")
    private static final String VERSION = "version";
    smacdonald2008
    smacdonald2008Author
    November 17, 2017

    I just followed that older doc and it complied --

    Tyler_Maynard
    Tyler_Maynard
    November 17, 2017

    Intersting.

    What version of the  maven bundle plugin are you using? and are you using the latest AEM archetype? That seems to be whats complaining about the named variable....

    Terms & ConditionsAccessibility statement

    Loading footer...