Absolute URLs for Client Libs?

[dylanmccurry]

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?

[arunpatidar]

Hi @dylanmccurry 

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

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

[konstantyn_diachenko]

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

Best regards,

Kostiantyn Diachenko.

[gkalyan]

@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/pla...

[Shiv_Prakash_Patel]

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,

[kapil_rajoria]

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>

[AmitVishwakarma · Accepted solution]

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

[dylanmccurry]

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?