Highlighted

recommended clinetlibs & other folders in AEM 6.4

sivas61374651

20-08-2018

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

Replies

Highlighted

Arun_Patidar

MVP

20-08-2018

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

Highlighted

sivas61374651

20-08-2018

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

Highlighted

Arun_Patidar

MVP

20-08-2018

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>

Highlighted

sivas61374651

20-08-2018

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

Highlighted

sivas61374651

20-08-2018

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

Highlighted

prajwalreddy

20-08-2018

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.

Highlighted

sivas61374651

20-08-2018

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

Highlighted

Arun_Patidar

MVP

20-08-2018

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

Highlighted