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.

Instructions
1. Create a cq:ClientLibraryFolder node
JCR Path: /apps/sourcedcode/clientlibs/cllienlib-site
Separate code from content and configuration to maximize project file organization 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.

<?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 an nt:folder node named “resources”
JCR Path: /apps/sourcedcode/clientlibs/cllienlib-site/resources
By convention, the client library “resource” folder is named as “resources”; naming is very important if structural static assets are planned to be served from a client library. This setup allows 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.

mvn clean install -PautoInstallPackage -Padobe-public

Results: Review the JCR
A successful project builds and deployment 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