Rendering AEM pages with proxy layer not loading the CSS and JS files | Community
Skip to main content
R
Rama_KrishnaPo
December 17, 2024

Rendering AEM pages with proxy layer not loading the CSS and JS files

  • December 17, 2024
  • 3 replies
  • 1464 views

Hi,
I want to call the AEM page from another proxy layer, which contains an extra path.

https://xxx.com/extrapath/content/acc-coach.html

It's loading the HTML content, but it's not loading the JS and CSS file because of the relative path. 

 

Could anyone help me on this?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

Kamal_Kishor
Community Advisor
Kamal_KishorCommunity Advisor
Community Advisor
December 17, 2024

@rama_krishnapo : Can you please check the network request for those clientlibs? What is the response code for them i.e 404 or something else.

If you can access the page, ideally you should be able to access the clientlibs as well.
Are there any errors in developer console?

thanks.

    GabrielMircea
    GabrielMircea
    Level 2
    December 18, 2024

    Hi @rama_krishnapo 

     

    There are multiple ways to do this. I recommend you read into it but i will share some of the most common ones, since i do not know the exact infrastructure you are using.

     

    From the image, your client libraries (clientlibs) have relative paths like /etc.clientlibs/.... When an extra path (e.g., /extrapath/) is added in a proxy setup, these relative paths break because they don’t account for the additional base path.

     

    You can make these clientlib references absolute by prepending the correct base path. Modify your HTML or HTL to render the full path dynamically:

    <link rel="stylesheet" href="${request.scheme}://${request.serverName}/etc.clientlibs/foundation/clientlibs/main.min.b4994788cf1eaed300a0aa7af53f3c8.css" type="text/css"/> <script src="${request.scheme}://${request.serverName}/etc.clientlibs/clientlibs/granite/jquery.min.cee8557e8779d371fe722bbcd0b3eb7.js"></script>

     

    If you are using an AEM Dispatcher or a reverse proxy like Nginx/Apache, you can rewrite static asset paths. This ensures requests for /extrapath/etc.clientlibs/... are correctly forwarded to /etc.clientlibs/... on the AEM server.

     

    For example, in an Apache Dispatcher configuration:

    # Rewrite asset paths for extra base path RewriteEngine On RewriteRule ^/extrapath/etc\.clientlibs/(.*)$ /etc.clientlibs/$1 [L]

     

      R
      Rama_KrishnaPoAuthor
      December 18, 2024

      I want to add an extra path to the JS and CSS files in AEM page.

      For example, I have the below CSS and JS links in AEM page

      <link rel="stylesheet" href="/etc.clientlibs/foundation/clientlibs/main.min.b4994788cf1eaeed300a0aa7af53f3c8.css" type="text/css"/>
      <script src="/etc.clientlibs/clientlibs/granite/jquery.min.cee8557e8779d371fe722bbcdd3b3eb7.js"></script>

      I want to prefix with extra path to CSS and JS
      <link rel="stylesheet" href="/extrapath/etc.clientlibs/foundation/clientlibs/main.min.b4994788cf1eaeed300a0aa7af53f3c8.css" type="text/css"/>
      <script src="/extrapath/etc.clientlibs/clientlibs/granite/jquery.min.cee8557e8779d371fe722bbcdd3b3eb7.js"></script>

       

      I am getting 403 response code when I call through the proxy for the above links.


      How to add this extra path?

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      December 18, 2024

      Hi @rama_krishnapo 

      You need a rewrite rule at dispatcher to fix this

       

      #Remapping /extrapath/etc.clientlibs - remove /extrapath RewriteCond %{REQUEST_URI} ^/extrapath RewriteRule ^/extrapath/(.*) /$1 [L,NC,PT]

       

      Arun Patidar
        MukeshYadav_
        Community Advisor
        MukeshYadav_Community Advisor
        Community Advisor
        December 19, 2024

        Hi @rama_krishnapo ,

        So the issue is you want to transform (remap) the /etc.clientlibs/foundation/clientlibs/* to /extra-path//etc.clientlibs/foundation/clientlibs/* and it should reflect in html itself so that it can be routed via proxy.

        It seems tedious process as clientlibs get added with OOTB template

        <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
            <sly data-sly-call="${clientlib.js @ categories='sourcedcode.site'}"/>
        </sly>

        You may check if you can create custom clienlibs utility to include in page

        OOTB interface https://adobedocs.github.io/aem-developer-materials/6-5/javadoc/com/adobe/granite/ui/clientlibs/HtmlLibraryManager.html

        https://github.com/DantaFramework/AEM/blob/master/src/main/java/danta/aem/util/ClientLibraryUtil.java

        https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/serving-clientlibs-from-content/td-p/573873

         

        Thanks

          Terms & ConditionsAccessibility statement

          Loading footer...