Adobe Experience Manager Sites & More

NathanVieira · 6/27/24

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] };
 }

}

MukeshYadav_ · 6/27/24

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

EstebanBustamante · 6/27/24

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...

Hope this helps

Esteban Bustamante

MukeshYadav_ · 6/27/24

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

NathanVieira · 6/28/24

Thanks it worked, I was forgetting this part of documentation

Adobe Experience Manager Sites & More

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

Esteban Bustamante

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe