Expand my Community achievements bar.

SOLVED

Serving Clientlibs from /content

Avatar

Community Advisor

Hi Everyone,

I know "Adobe recommends locating client libraries under /apps and making them available using the proxy servlet. However keep in mind that best practice still requires that public sites never include anything that is served directly over an /apps or /libs path."
However, my question is - is there any way to expose clientlib from /content ? I have my clientlib under page and I want to make it load when page is rendered (having specified categories in page script).


Thanks in advance!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hey @SantoshSai ,

Pretty much when you make a clientlibrary proxy=true, it will change the /apps/my-site/clientlibs/clientlib-site.js to /etc.clientlibs/apps/my-site/clientlibs/clientlibs-site.js. /etc.clientlibs is by default accessible to the public without any configurations from the publisher, but however, you do need to allow /etc.clientlibs in the dispatcher, and allow cache on this path.

<?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"/>

Documentation: Using Client-Side Libraries | Adobe Experience Manager

View solution in original post

10 Replies

Avatar

Community Advisor

Well, tried this way - to update configuration here and allow library paths in Adobe Granite HTML Library Manager 

Screenshot 2023-02-14 at 6.35.08 PM.png

But NO LUCK!

Avatar

Community Advisor

@SantoshSai This seems like a similar thread on this topic- https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/html-library-manager-allow...

As per this, we could embed it via the /libs/ clientlibs. As clientlibs gets expose them via /etc.clientlibs

 

Avatar

Community Advisor

@SantoshSai 

To serve clientlibs from /content, you will need to perform the following steps:

  1. Configure the clientlibs to be stored under /content. This can be done by updating the clientlibs node under the cq:designer node in the CRX repository. Change the baseFolderPath property to /content/clientlibs.

  2. Update the clientlib categories to point to the new base folder. This can be done by updating the categories property for each clientlib in the CRX repository. For example, change the value from /etc/clientlibs/myproject to /content/clientlibs/myproject.

  3. Create a mapping in the Apache Sling Resource Resolver configuration to map requests for clientlibs from /content to the appropriate location in the repository. This can be done by creating a new mapping rule in the Apache Sling Resource Resolver configuration under /conf/global or /apps.

With these steps in place, requests for clientlibs from /content will be routed to the appropriate location in the repository, and the clientlibs will be served from there.

It's important to note that serving clientlibs from /content can have an impact on performance, as clientlibs are typically cached and served from a different location in AEM. Therefore, it's important to test and monitor the performance of your AEM instance after making this change.

Avatar

Correct answer by
Community Advisor

Hey @SantoshSai ,

Pretty much when you make a clientlibrary proxy=true, it will change the /apps/my-site/clientlibs/clientlib-site.js to /etc.clientlibs/apps/my-site/clientlibs/clientlibs-site.js. /etc.clientlibs is by default accessible to the public without any configurations from the publisher, but however, you do need to allow /etc.clientlibs in the dispatcher, and allow cache on this path.

<?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"/>

Documentation: Using Client-Side Libraries | Adobe Experience Manager

Avatar

Community Advisor

@BrianKasingli Thank you for your response. However, As I mentioned in my query I want to expose clientlib from /content - Basic Idea behind this is -

1. Place clientlib under page and when user activate the the page clientlib should also be activated and load the library.

 

I have tried placing clientlib under page but clientlib not loading and if I place it under /apps, /etc, /libs it works.

 

Hope you get my question now.

Avatar

Community Advisor

okay, interesting,

This would be an expensive implementation, given that you might need to produce your own backend code to handle the conversion of aem clientlib category to /etc.clientlibs or /content/*.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.js @ categories='sourcedcode.site'}"/>
</sly>

As you can see the code above, this produces /etc.clientlibs/sourcedcode/clientlibs/clientlibs-site.js|css. Not only that AEMaaCS will produce clientlib versioning, when using the Adobe snippet to reference client libs in your AEM environment.

 

======================================================================

 

Hmm, it sounds to me that this is a dispatcher issue. Maybe take a look at it and allow /etc.clientlibs/*

 

 

Avatar

Community Advisor

@BrianKasingli that's right - will have many issues if we go with above process - instead I'm planning to build replication dependency injector by implementing 

com.day.cq.wcm.api.reference.ReferenceProvider

 for listing these clientlibs.

https://wcm.io/caconfig/extensions/jacoco/io.wcm.caconfig.extensions.references.impl/ConfigurationRe...

Avatar

Employee Advisor

Still I don't get why you need to place clientlibs below /content for that requirement. If your clientlibs are part of the deployment, you don't need to replicate/activate them at all, because they are already available on the publish system.

Avatar

Community Advisor

@Jörg_Hoh I wanted to create clientlib at run time - It's not part of deployment actually. basically gathering component level clientlibs together and creating one as a page name - and dependencies once the page is loaded, then planning to replicate as a reference when the page has been replicated. 

Avatar

Employee Advisor

For how many pages do you want to perform this operation? I don't think that the clientlib approach was tested with a scale of thousands of clientlibs yet ...