Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

How to access clientlibs in ui.apps from other js file in ui.frontend

Avatar

Level 3

Hello community

 

The code below needs to return an SVG from a folder within clientlibs in ui.apps. However, when I attempt to access it, it returns "<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML...."

 

This SVG will be located in the folder mysite/ui.frontend/src/main/webpack/resources/images, and when built, it generates the same SVG in mysite/ui.apps/src/main/content/jcr_root/apps/project/clientlibs/clientlib-site/resources/images.

When attempting to access directly in /apps in the local environment, it works. However, it does not work in the production environment.

 

I would like to better understand why this is happening and how I can access this folder using this method.

 

const iconsPath = '/src/main/webpack/resources/images';

export async function fetchSvg(value) {
if (!iconCache[value.htmlType]) {

const response = await fetch(`${iconsPath}/${value.htmlType}.html`);
const htmlContent = await response.text();

if (htmlContent) {
iconCache[value.htmlType] = htmlContent;
return { type: value.iconDataType, value: htmlContent };
} else {
throw new Error(`SVG for ${value.htmlType} not found in the HTML content`);
}
} else {
return { type: value.iconDataType, value: iconCache[value.htmlType] };
}

}
1 Accepted Solution

Avatar

Correct answer by
Level 5

Hi @NathanVieira ,

We can access resource from clientlibs proxy as /etc.clientlibs/sourcedcode/clientlibs/cllienlib-site/resources/tick.svg

const iconsPath = '/etc.clientlibs/project/clientlib-site/resources/images';

 

Pls have a look https://sourcedcode.com/blog/aem/how-to-serve-static-assets-in-aem-as-client-library-resources

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/int...

Thanks

View solution in original post

3 Replies

Avatar

Community Advisor

Hi,

I think you are accessing incorrectly the resource, please check the proxy property from clientlibs: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/int... 

EstebanBustamante_0-1719522820617.png

 


Hope this helps



Esteban Bustamante

Avatar

Correct answer by
Level 5

Hi @NathanVieira ,

We can access resource from clientlibs proxy as /etc.clientlibs/sourcedcode/clientlibs/cllienlib-site/resources/tick.svg

const iconsPath = '/etc.clientlibs/project/clientlib-site/resources/images';

 

Pls have a look https://sourcedcode.com/blog/aem/how-to-serve-static-assets-in-aem-as-client-library-resources

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/int...

Thanks

Avatar

Level 3

Thanks it worked, I was forgetting this part of documentation