How to Serve Static Assets in AEM as Client Library Resources

This article provides step by step instructions on how to create a client library, to only serve structural static assets as client library resources. Resources from this article will build upon the latest maven AEM Project Archetype, and the instructions below will demo the configuration setup within the code.

Mention!
Learn more about the reasons why we should not to store structural static assets “as content”, rather to utilise client library static resources, click here.

Instructions

1. Create a cq:ClientLibraryFolder node

JCR Path: /apps/sourcedcode/clientlibs/cllienlib-site
Separate code from content and configuration to maximize project file oranization and separation of concerns, Adobe recommends to place client libraries under /apps and expose these client libraries via the path, /etc.clientlibs, by leveraging the allowProxy property.

1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="sourcedcode.site"/>


When allowedProxy is enabled, we instead of accessing the client library from /apps/sourcedcode/clientlibs/cllienlib-site, we can access the cliebt library from the proxy servlet via /etc.clientlibs/sourcedcode/clientlibs/cllienlib-site.

2. Create a nt:folder node named “resources”

JCR Path: /apps/sourcedcode/clientlibs/cllienlib-site/resources
By convention, the client library “resource” folder is named as “resources”; which the naming is very important if structural static assets are planned be served from a client library. This setup allowes structural static assets to be accessed via the proxy.
Example: /etc.clientlibs/sourcedcode/clientlibs/cllienlib-site/resources/tick.svg

3. Place the assets under the “resources” folder

In this example, we will only insert one asset image, tick.svg.
JCR Path: /apps/sourcedcode/clientlibs/cllienlib-site/resources/tick.svg

4. Build and Upload into AEM

This default maven profile should be a part of the maven AEM Project Archetype.

1
mvn clean install -PautoInstallPackage -Padobe-public
Results: Review the JCR

A successful project build and deploy should make JCR node resources available in the AEM environment.

Results: Access the Asset(s)

The images can be resolvable via the proxy servlet, replacing /apps with /etc.clientlibs.
Visit: http://localhost:4502/etc.clientlibs/sourcedcode/clientlibs/cllienlib-site/resources/tick.svg

Mention!
Learn the reasons why structural assets should not be stored “as content” and managed as DAM assets, click here.

Was this post helpful?

Certified AEM Developer who has been working on AEM software developer for the past 5 years.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top