Level 4

Solved

Absolute URLs for Client Libs?

8 replies
1630 views
Translate All

I am creating a feature which allows for a header component to be created within AEM, and then distributed to a number of other webistes. Websites will call into AEM to receive the HTML containing the header component, and then render the resulting HTML on their website.

I have this working at a fundamental level. There's a fragment with a header component, a servlet which can return this fragment with some metadata, and a dedicated client lib bundle that contains just the necessary CSS/JS to get the header functioning.

Now I am noticing the links to resources such as fonts, css files, background images, etc- are all "relative" paths. Within my header component I am rendering the link to the CSS document as such:

<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='mysite.navigation'}"/>
</sly>

This results in the following output:

<link rel="stylesheet" href="/etc.clientlibs/mysite/clientlibs/clientlib-navigation.lc-1c5d6255215894d4a81a327a42dd95ef-lc.min.css" type="text/css">

How can I modify this behavior such that the publish servers generate an absolute URL for this stylesheet and all other elements of the Client Lib?

AmitVishwakarmaAccepted solution

Community Advisor

Use externalize=true in the data-sly-call: You can modify your clientlib code by adding the externalize=true parameter. This will ensure that the URLs are rendered as absolute:

<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='mysite.navigation', externalize=true}"/>
</sly>

This will transform the relative path like /etc.clientlibs/mysite/clientlibs/... into an absolute URL.

Use Output Rewriter Pipeline: You can use the Output Rewriter Pipeline to dynamically rewrite the relative URLs in your HTML to absolute URLs. This method is useful if you need more control over the output HTML and its URLs. You can read more about it in the Sling Output Rewriting documentation.

Use ACS Commons Static Reference Rewriter: The ACS Commons Static Reference Rewriter is another great option for rewriting URLs to absolute paths. This tool allows you to modify the references for static resources like CSS, JavaScript, and images to use absolute URLs.

Use AEM Externalizer: You can use the AEM Externalizer to generate fully qualified URLs for resources. This is particularly useful when dealing with external domains or integrations

Amit Vishwakarma - Adobe Commerce Champion 2025 | 17x Adobe certified | 6x Adobe SME

arunpatidar

Community Advisor

Hi @dylanmccurry

You can write sling output pipeline : https://sling.apache.org/documentation/bundles/output-rewriting-pipelines-org-apache-sling-rewriter.html

or AEM Externalizer : https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developer-tools/externalizer

Translate

Arun Patidar

konstantyn_diachenko

Community Advisor

Hi @dylanmccurry ,

I would suggest to take a look into ACS Commons Static Reference Rewriter: https://adobe-consulting-services.github.io/acs-aem-commons/features/utils-and-apis/static-reference-rewriter/index.html

Best regards,

Kostiantyn Diachenko.

Translate

Kostiantyn Diachenko, Community Advisor, Certified Senior AEM Developer, creator of free AEM VLT Tool, maintainer of AEM Tools plugin.

gkalyan

Adobe Champion and Community Advisor

@dylanmccurry I like the externalizer better, we use them for external website using our nav and footer. This link is for on prem. @arunpatidar shared the link for AEMaaCS.

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

Translate

Shiv_Prakash_Patel

Community Advisor

Hi @dylanmccurry ,

You can generate absolute URLs for client libraries with below two approach suggest by @arunpatidar & @konstantyn_diachenko .

Output Rewriter pipeline - This allows you to modify the HTML output dynamically, converting relative URLs of clientlibs to absolute URLs.

Static Reference Rewriter - This allow clientlibs URLs to rendered as absolute paths, facilitating their use across different domains or external integrations.

Regards,

Translate

Shiv Prakash

kapil_rajoria

Community Advisor

Hi @dylanmccurry did you try using:

<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='mysite.navigation', externalize=true}"/>
</sly>

Translate

AmitVishwakarma

Accepted solution

Community Advisor

Use externalize=true in the data-sly-call: You can modify your clientlib code by adding the externalize=true parameter. This will ensure that the URLs are rendered as absolute:

<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='mysite.navigation', externalize=true}"/>
</sly>

This will transform the relative path like /etc.clientlibs/mysite/clientlibs/... into an absolute URL.

Use Output Rewriter Pipeline: You can use the Output Rewriter Pipeline to dynamically rewrite the relative URLs in your HTML to absolute URLs. This method is useful if you need more control over the output HTML and its URLs. You can read more about it in the Sling Output Rewriting documentation.

Use ACS Commons Static Reference Rewriter: The ACS Commons Static Reference Rewriter is another great option for rewriting URLs to absolute paths. This tool allows you to modify the references for static resources like CSS, JavaScript, and images to use absolute URLs.

Use AEM Externalizer: You can use the AEM Externalizer to generate fully qualified URLs for resources. This is particularly useful when dealing with external domains or integrations

Translate

Amit Vishwakarma - Adobe Commerce Champion 2025 | 17x Adobe certified | 6x Adobe SME

D

dylanmccurryAuthor

Level 4

Using the externalize=true, I don't see any change in: 1) the URL to my client lib in the output HTML, or 2) the URLs within the CSS that point to client lib resources.

Externalizer is configured because my sitemap is externalizing URLs correctly. What am I missing?

Translate

A

AlbertoEl1

New Member

Same problem here.

Translate

Sign up

Login with SSO

Login to the community

Login with SSO