Expand my Community achievements bar.

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 7

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 7

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