Mastering URL Shortening in AEM: Vanity URLs and Beyond

Quote of the Day

" Train your mind to see the good in every situation  "

 What is URL shortening (or shorthand URL)?

A URL shortening (or shorthand URL) is a way to make a long, complicated web address shorter and easier to share. 

Instead of sharing a long URL like:

https://www.colibra.com/content/weretail/us/en/products/womens/shoes.html

We can create a short, friendly URL like:

https://www.colibra.com/shoes

We have three ways to do URL shortening/create shorthand URLs.

1.Vanity URL

2.Redirect/Rewrite Rule

3.etc Mapping

Here, we discussed how to implement URL shortening in AEM using Vanity URLs and how AEM handles this internally.

How we can add AEM vanity Url for a particular page

Step 1: Navigate to this URL and download vanity URL’s components package.

Step 2: Accept EULA terms and conditions and press download button highlighted red in color.

Step 3: Upload vanityurls-components package and install on publish instance:

 Step 4: To add a vanity URL for a specific field available in the page properties.

Go to the page and open its properties.

 

Step 5: Here, the Vanity URL property is a multi-field, which means you can apply multiple vanity URLs for this page.

Step 6: These vanity URLs are mapped as Sling mappings.

    

step 7: after that Save&Close.

Note:

• The Vanity URL is based on the page, not the domain.
• Vanity URLs work on both Author and Publish instances.

Step 8: Now access this page.

Step 9: If we want to publish this page, we must first replicate it.

Step 10: Page is accesible using Vanity Url on Publish.

⚙️ How It Works Internally

1.Vanity Property in JCR Node

• In the JCR repository, when a content author sets a Vanity URL for a page, AEM stores it as a property inside the page’s jcr:content node:
• For example,
  /content/wknd/us/en/author-info/jcr:content.
• sling:vanityPath = "/author-info"

---

1. AEM provides an internal resource at:

• /libs/granite/dispatcher/content/vanityUrls
• This path is part of AEM’s Granite UI framework and is responsible for exposing vanity URL mappings.

  2. sling:resourceType Mapping

• Node, sling:resourceType = granite/dispatcher/components/vanityUrls

• This means that when the resource is requested, AEM uses the component located at: /libs/granite/dispatcher/components/vanityUrl to render the response.

 

 3. Accessing in Browser

• When you open this path in a browser (e.g., http://localhost:4502/libs/granite/dispatcher/content/vanityUrls.html), AEM dynamically generates response.
• This response contains all the registered vanity URL mappings across the repository (collected from sling:vanityPath properties).

🔎 How AEM Compares and Traverses Vanity URLs Internally

1. Saving the Vanity URL

• In the page node (/content/wknd/us/en/author-info/jcr:content), AEM adds a property:

sling:vanityPath = "/author-info"

At this point, if we check the /vanityUrls.html response, we’ll see our vanity mapping, which confirms it’s saved.

• When  hit http://localhost:4502/author-info

sling checks its vanity path mappings.

If a match is found → it traverses the mapping and internally redirects to the actual page path (/content/wknd/us/en/author-info).

On the Dispatcher / Web Server, sometimes the page cannot be accessed using the configured Vanity URL.

Let’s see how we can resolve such issues:

Step 11: To allow Vanity URLs on Dispatcher

We need to add the /vanity_urls section inside the dispatcher.any file. This section allows the dispatcher to resolve Vanity URLs. Here, we have to define three properties:

• /url → This property points to the service that returns all the available Vanity URLs configured in AEM.
• /file → Dispatcher stores these Vanity URL mappings in the specified file. This allows the dispatcher to frequently check and resolve Vanity URLs without calling AEM every time.
• /delay → This defines the time interval (in seconds) between consecutive calls that the dispatcher makes to AEM to refresh the Vanity URL list.

 Advantages of Vanity URLs

• Easy to remember – Short and clean links are more user-friendly.

• Author controlled – Content authors can manage URLs directly from page properties.

• Marketing friendly – Perfect for campaigns, landing pages, and promotional content.

Disadvantages of Vanity URLs

• Performance impact – Vanity URLs are resolved at runtime. If you configure thousands of vanity URLs or sling mappings, it can become an expensive operation in terms of resources.

• Dispatcher setup required – Vanity URLs must be enabled and properly configured in the dispatcher.

• Not scalable for bulk usage – If many URLs need to be shortened, other approaches like Apache rewrite rules or URL mapping may perform better.

     Thanks !!

How to Configure Dispatcher Flush Agent in AEM: A Practical Guide

🌟 Quote of the Day

"Sometimes you win, sometimes you learn."

Dispatcher Flush Agent

It is replication agent used to clear/invalidate cache from the Dispatcher whenever content is activated or deactivated.

Multiple Ways to Clear Cache on Dispatcher

1. Using AEM Dispatcher Flush Agent – Automatically clears cache when content is activated or deactivated.

2. Using ACS Commons – Provides additional tools and utilities to invalidate or flush dispatcher cache selectively.

3. Manual or Custom Code – Manually deleting cached files on the dispatcher or writing scripts to programmatically clear cache.

 

How to Configure Dispatcher Flush Agent

1. Dispatcher Flush Agent on Author

• Not recommended in most cases.

• Author instance is primarily for content creation, not for serving live traffic.

• If configured, it can trigger cache invalidation on the dispatcher, but it may cause unnecessary load.

2. Dispatcher Flush Agent on Publish

• Recommended approach.

• Publish instance serves live content through the dispatcher.

• Flush agent is triggered automatically whenever content is activated (published) or deactivated, clearing the relevant cache.

Steps to configure:

1. Traverse to author instance. http://localhost:4502/sites.html/content

 2. Click on Adobe Experience Manager icon → tools → Deployment → Replication as shown below:

3. Click on Agents on Author as highlighted below:

4. Select Dispatcher flush option as shown below:

5. Click on Edit option as highlighted below:

6. Set dispatcher URL and PORT as shown below:

http://localhost:80/dispatcher/invalidate.cache

7. Check the Enabled checkbox to enable disable flush agent. Click on OK to save the changes.

8. It will show below highlighted green color radio button on successful enable.

9. Click on Test Connection anchor link to verify connection in between dispatcher and author instance.

10. To resolve above issue, lets open dispatcher.any file and update below line to allow 127.0.0.1 address:

Inside allowedClients we can allow specific IP addresses or IP ranges which are permitted to access the Dispatcher or AEM instance.

11. Below is the screen shot of the page and its cached timestamp.

12. Publish the home page as shown below:

13. home page will get deleted from the cache directory, as shown below, as soon as we publish the page.

Dispatcher Flush Agent on Publish

Steps to configure:

1. Click on Adobe Experience Manager icon → tools → Deployment → Replication as shown below:

3. Click on Agents on publish as highlighted below:

4. Select Dispatcher flush option as shown below:

5. Click on Edit option as highlighted below:

6. Set dispatcher URL and PORT as shown below:

7. Check the Enabled checkbox to enable disable flush agent. Click on OK to save the changes.

The Author and Publish instances share the same base AEM setup, but their configurations differ based on their role: 

Author = content creation, Publish = content delivery.

🔹 Step-by-Step Flow After Publish/Activate

1. Author Instance (Content Created/Updated)

• Author creates or edits a page, asset, or component.

• When finished, the content is published (activated).

---

2. Replication Agent on Author

• The replication agent sends the content from Author → Publish.

• This includes the page/asset data, references, and metadata.

---

3. Publish Instance (Receives Content)

• The content is stored in the Publish instance JCR.

• Now, the publish instance has the latest version of that page/asset.

---

4. Dispatcher Flush Agent (on Publish)

• A dispatcher flush agent is triggered automatically.

• It tells the Dispatcher (cache layer) to clear or invalidate the old cache for that content.

---

5. Dispatcher (Cache Layer)

• Dispatcher removes the outdated cached file(s).

• The next time a visitor requests that page, Dispatcher fetches the fresh content from Publish and caches it again.

---

6. End User (Website Visitor)

• Visitor requests the page (e.g., homepage).

• Dispatcher serves the latest version that was just published.

• ✅ Website shows updated content instantly.

home page will get deleted from the cache directory, as shown below, as soon as we publish the page.

Thank you !!

All About AEM Dispatcher: From Basics to Advanced Setup

✨ Quote of the Day ✨

“Every day brings a new opportunity!” 🌱

Why Do We Need Dispatcher in AEM?

• When a website receives millions of requests, if every request directly hits AEM, it would become slow and overloaded. AEM is powerful for creating, managing, and publishing content, but handling things like caching, redirects, load balancing, and security is not its main job.
• That’s why we never expose AEM publish servers directly to end users. Instead, we place a web server in between. But a normal web server alone doesn’t know how to work with AEM.
• To solve this, Adobe provides the Dispatcher – a module that works with the web server.

👉 Dispatcher helps with:

• ⚡ Caching → Serves pages instantly without hitting AEM every time

• 📊 Load Balancing → Distributes traffic across multiple AEM instances

• 🔒 Security → Blocks unwanted requests and protects AEM servers

• 🎯 Request Handling → Manages redirects and access control

✅ Note:

Dispatcher is the bridge between AEM and the web server, ensuring your website is fast, scalable, and secure.

photo:

What is Dispatcher?

👉 Dispatcher in AEM is a caching and load balancing tool that sits in front of the publish instance. It improves performance by serving cached content, ensures scalability by distributing requests, and adds security by filtering access to AEM.

🚀 How to Set Up AEM Dispatcher

🔹 Step 1: Understand the Architecture

👉 User request → Web Server + Dispatcher → AEM Publish Instance

Here, Dispatcher is not a standalone server – it’s a module installed on a web server like Apache HTTP Server or Microsoft IIS.

🔹 Step 2: Install a Web Server

1. Choose your web server (commonly Apache HTTPD).

Open URL and download below highlighted .msi file highlighted red in color to setup Apache Web Server.

2. Go to download folder and double click on httpd-2.2.25-win32-x86-no_ssl.msi file to install the same.

Click on Next button as shown below

3. Select option I accept the terms in the license agreement and click on Next button.

4. Click on Next button as no changes are required.

5. Click on Next button as no changes are required.

6. Select Typical and click on Next button.

7. Select folder to install Apache server if want to install in required folder or else leave it as it is.

8. Click on Install button to start installation.

9. Installation will take 2 to 3 min. It will show below in progress screen:

Click on Finish button once installation is done.

11. Hit http://localhost URL in browser and check if dispatcher setup is successful or not.

12. Open URL and download required file. For current setup we are going to have OpenSSL as none as highlighted below red in color.

13. Unzip downloaded folder and verify below files:

14.copy disp_apache2.2.dll and paste inside apache module folder.

14. Navigate to Apache download folder and looks for httpd.conf file

Inside conf httpd.conf file

15.Add below line to load AEM dispatcher module at line number 129.

After that restart your web server (apache).

16.Copy dispatcher.any file and paste inside conf folder.

17. And add Configuration inside <IfModule> 133 to 147 and add directory 149 to 159, and add 154 SetHandler dispatcher-handler.

📖 Line-by-Line Explanation

1. <Directory /> ... </Directory>

   • This applies rules to the root directory / (i.e., the entire server).

   • Means: these settings affect all incoming requests.

---

2. <IfModule disp_apache2.c>

   • Only applies if the Dispatcher module (disp_apache2.c) is loaded.

   • Dispatcher is Adobe’s caching & load balancing module for AEM.

---

3. ModMimeUsePathInfo On

   • Tells Apache to use extra path info after a file.

   • Example: /page.html/extra/path → the /extra/path part is still recognized and passed along.

   • Useful in AEM, where selectors like /page.print.html or /page.html/some/data are common.

---

4. SetHandler dispatcher-handler

   • Basically, every request will go through the Dispatcher first (for caching & filtering).

---

5. Options FollowSymLinks

   • Allows Apache to follow symbolic links (shortcuts to files/folders).

   • Needed so Apache can resolve linked paths properly.

---

6. AllowOverride None

• Prevents .htaccess files from overriding these settings.

• Means: only this config file controls behavior, no local overrides.

• Improves security and performance.

18. Open dispatcher.any file and navigate to line number 65. Just for testing with publish AEM instance, update deny to allow keyword for all request URL’s as shown below:

Update the docroot path inside the cache section of your dispatcher.any farm file to point to your web server’s document root.

21. Update port number from 8080 to your AEM publish post, in my case it is 4503.

Restart Web server (apache).

AEM Publish instance URL

http://localhost:4503/content/we-retail/us/en/men.html

Dispatcher URL

http://localhost/content/we-retail/us/en/men.html

Press enter or click to view image in full size

Both AEM publish and dispatcher URL’s will show the same page. One will be via dispatcher and other by hitting direct AEM publish instance URL using 4503 port.

Thank you!

Press enter or click to view image in full size

Press enter or click to view image in full size