Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

recommended clinetlibs & other folders in AEM 6.4

Avatar

Level 3

Hi all,

can anyone help on this below folders restructuring. This has been required for me to work on the 6.4 migrations.

1) etc/designs/myproject/clientlibs - right now I moved this to apps/myproject/clientlibs . but I'm worrying on this path since the dispatcher will block this path. I have refered this URL Using Client-Side Libraries  . This URL is useful if am referring a single image/js/css. But how should I refer a categories?

2) /etc/commerce/products/web/Default/en (before)- var/commerce/products/web/Default/en (after - is it aright path which I moved?)

3) /etc/commerce/products/web/Default/en (before)- - var/commerce/products/web/Default/en (after)

I also referred the blogs which is related my queries. But still i'm confused. Requesting those guys as well to help me here . wimsymonsprajwalreddysmacdonald2008 Arun Patidar  Appreciate your help.

regards,

Vijay

9 Replies

Avatar

Community Advisor

Hi,

Locating a Client Library Folder and Using the Proxy Client Libraries Servlet

In previous versions, client library folders were located below /etc/clientlibs in the repository. This is still supported, however it is recommended that client libraries now be located under /apps. This is to locate the client libraries near the other scripts, which are generally found below /apps and /libs.

Note:

In order to better isolate code from content and configuration, it is recommended to locate client libraries under /appsand expose them via /etc.clientlibs by leveraging the allowProxy property.

In order for the client libraries under /apps to be accessible, a proxy servelt is used. The ACLs are still enforced on the client library folder, but the servlet allows for the content to be read via /etc.clientlibs/ if the allowProxy property is set to true.

A static resource can only be accessed via the proxy, if it resides below a resource below the client library folder.

As an example:

  • You have a clientlib in /apps/myproject/clientlibs/foo
  • You have a static image in /apps/myprojects/clientlibs/foo/resources/icon.png

Then you set the allowProxy property on foo to true.

  • You can then request /etc.clientlibs/myprojects/clientlibs/foo.js
  • You can then reference the image via /etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png

Caution:

When using proxied client libraries, the AEM Dispatcher configuration may require an update to ensure the URIs with the extension clientlibs are allowed.

More info

Using Client-Side Libraries



Arun Patidar

Avatar

Level 3

Hi Arun,

Thanks for you response. You have referred this URL Using Client-Side Libraries  and even I have referred the same. My question is, if I have a folder(myapp) under etc/designs/myapp . And I gave the categories name as myapp.clientlib.all. In this case how should I handle the categories when I moved the clientlibs to apps/ folder. In the reference there is an example for single js & single img but not for categories.

Thanks,

Vijay

Avatar

Community Advisor

Hi,

You can include clientlibs as you doing like <cq:includeClientLib categories="myapp.all"/> or

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='myapp.all'}" data-sly-unwrap/>

Then the clientlib will then be proxied via <script type="text/javascript" src="/etc.clientlibs/myapp/clientlibs/all.js"></script>



Arun Patidar

Avatar

Level 3

Hi Arun,

If I call the clientlibs like this <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='myapp.all'}" data-sly-unwrap/> will it work in dispatcher? Since I'm having my clientlibs under /apps.

For the Clientlibs folder I will give the allowProxy = true as property value. This will help to call the clientlibs in dispatcher without any issues are you saying? or Do I need to call explicitly like this <script type="text/javascript" src="/etc.clientlibs/myapp/clientlibs/all.js"></script> any where?

I'm worried about the same issue which has been logged in some other forums.

Regards,

Vijay

Avatar

Level 3

Hi Arun,

In this forum if you see the last reply mentioned as static resource can only be accessed via proxy. Do we need to have the structure like this /apps/myapp/clientlibs/resources - inside this we should have our categories (css/js)? any idea?

https://forums.adobe.com/thread/2485009

Thanks,

Vijay

Avatar

Community Advisor

Hi Vijay,

  • you don't need to call clientlibs explicitly like this <script type="text/javascript" src="/etc.clientlibs/myapp/clientlibs/all.js"></script>
  • Yes, configure dispatcher.any to allow for /etc.clientlibs/
  • For proxied clientlibs, static resources(images/font) should be kept inside resources folder.

Thanks
Arun



Arun Patidar

Avatar

Level 3

sivas61374651​ - If you add allowProxy Property to your clientlibrary folder. You can include it using the categories.When it is rendered on the page it is rendered as etc.clientlibs for which you may need to modify your dispatcher settings.

Coming to the static resource, It is applicable only for the images/font files which are referred in the css. All those types of files should be placed in /resources folder in the clientlibrary to be accessible.

Hope your question is answered.

Avatar

Level 3

Hi Prajwal,

Thanks for you response and I got the answer. I should give the /apps/myapp/clientlibs read access for anonymous user ? Can you help me on the access related things? what are all the things which I should give read access to load the page properly in dispatcher for anonymous user?

Thanks,

Vijay

Avatar

Level 10

In AEM 6.4 - clientlibs is recommended to go under /apps. You should modify the Dispather so this is not blocked.