Updating Clientlibrary base directory to DAM is not working

[mayank-saxena1987]

My requirement is to move Client library's JS files to DAM instead of placing it into /apps/myproject/clientlibrary/js folder.
I have updated base directory path defined in js.txt file as below
#base=../../../../content/dam/myfolder/clientlibs/base/js instead of #base=js (standard one)

BUT this is not working while same is working for /apps folder i.e. 

#base=../../../../content/dam/myfolder/clientlibs/base/js - NOT WORKING

#base=../../../../apps/dam/myfolder/clientlibs/base/js - WORKING FINE

I tried with updating Adobe Granite HTML Library Manager configuration as well adding root path in Allowed Library Path property
(Tried with specific relative path - /content/dam/myfolder/clientlibs AND /content root path both) But It didn't work for me.

Please provide the solution for this requirement.

@kautuk_sahni @sachinarora17 @aanchal-sikka @Kiran_Vedantam @sachinarora1703

[EstebanBustamante]

Can you explain why you would want to do that? That is an anti-pattern. Please go through this documentation to understand the purpose of client libraries: link.

Keep in mind that although the client libraries are stored under /apps, the "allowProxy" property will make them available at a certain open location from where they can be accessed publicly. I don't know if that's your use case, but it is worth noting.

Regards,

[mayank-saxena1987]

Thanks @EstebanBustamante for the reply. Requirement is just to ease the maintenance of files avoiding deployment each time to environment on changing of code.
My scenario is simple just to move the JS files into DAM and rest of all clientlibrary structure and its calling from page component would remain same as it is.

[Jagadeesh_Prakash]

@mayank-saxena1987  seems what ever you have done is right. But did you update the clientlibs definition ?

Modify your client library definitions to point to the new location. This typically involves updating the categories property in the clientlib node.

• Navigate to http://localhost:4502/libs/cq/ui/content/dumplibs.html.
• Update the categories property to point to the new location. For example, change apps/myproject/clientlibs to content/dam/clientlibs/myproject.

And Repackage your client libraries and deploy them. This might involve building your front-end code and recompiling your client libraries and also Update any references to client libraries in your codebase. Make sure your components and pages are referencing the correct paths.

• Best Practices: It's generally considered a best practice to keep client libraries in the "apps" directory, as this is where AEM expects them by default.

• Performance: Loading client libraries from content/dam might affect performance, as this directory is primarily intended for assets like images, documents, etc., rather than code and configurations.

[mayank-saxena1987]

Thanks @Jagadeesh_Prakash  for the reply but Our specific Requirement is just to ease the maintenance of files avoiding deployment each time to environment on changing of code.
In your response, I didn't understand below points:

• Navigate to http://localhost:4502/libs/cq/ui/content/dumplibs.html. 
  <Mayank> - This console provide existing clientlibrary info and validating them. What do we need to do with this?
• Update the categories property to point to the new location. For example, change apps/myproject/clientlibs to content/dam/clientlibs/myproject.
  <Mayank>: categories property we define like apps.myproject.customname
  How can we define any relative path in categories property? Is this valid?
  Note: allowProxy is set to true already for clientlib.

[partyush]

Hi @mayank-saxena1987 

Relocating client library JS files to DAM in AEM can be a bit tricky due to the intricacies of the configuration. Here's a step-by-step solution:

Solution:

1. Update js.txt File: In the js.txt file, use an absolute path for the base:

• #base=/content/dam/myfolder/clientlibs/base/js

  Ensure that this path matches the actual DAM folder structure where you want to store your client library files.

• Adobe Granite HTML Library Manager Configuration: Verify that your client library configuration in the Adobe Granite HTML Library Manager reflects the changes:

  • Go to the AEM Web Console at http://<your-aem-instance>:<port>/system/console/configMgr.
  • Find the configuration for "Adobe Granite HTML Library Manager."
  • Check that the configuration for your client library points to the correct path in DAM.

• Allowed Library Paths: In the same Adobe Granite HTML Library Manager configuration, under "Allowed Library Paths," ensure that you have added the path to your DAM folder:

• /content/dam/myfolder/clientlibs

• Replication: If your AEM instances are distributed (author and publish), ensure that the DAM assets and configurations are correctly replicated to the publish environment.

• Flush and Reload: After making changes, flush the AEM cache and clear your browser cache. This ensures that you are not seeing cached versions of the JavaScript files.

• Logs and Debugging: If the issue persists, check the AEM logs for any errors related to the client libraries. Additionally, enable client-side debugging tools in your browser to inspect network requests and identify any issues.
  
  Thanks

[mayank-saxena1987]

This is already did but not working.

[arunpatidar]

Hi @mayank-saxena1987 
Writing code directly in the content area is not considered a best practice. Doing so may result in issues, especially if someone gains access to code files through the Digital Asset Manager (DAM), where they could potentially delete those files. It is recommended to create JavaScript files in the /apps folder instead

[mayank-saxena1987]

@arunpatidar Requirement is just to ease the maintenance of files avoiding deployment each time to environment on changing of code.

[arunpatidar]

If you have specific use cases where you need to reference clientlibs stored in DAM for your front-end, you might need to develop custom solutions, but this would deviate from standard AEM practices. Always consider the maintainability, security, and performance implications of any custom solutions.

Using Event Listener can help here, using Event Listeners you can copy/modify/delete DAM files to /apps from restricted DAM folder.

However this approach will not work in AEMaaCS.

[kautuk_sahni]

@mayank-saxena1987 

Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[mayank-saxena1987]

Hi @kautuk_sahni I need more helpful information on this to achieve.
I believe #base=<relative path> should work but it doesn't.

However, if there is no satisfactory solution by using the #base=<rel-path> way then only alternate solution comes to my mind is load the js files through one of master clientlibrary's js file and appending to <head> section.