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

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

  • December 17, 2024
  • 3 replies
  • 1458 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

    MukeshYadav_
    MukeshYadav_
    New Participant
    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

      GabrielMircea
      GabrielMircea
      New Participant
      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
        New Participant
        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
        arunpatidar
        New Participant
        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
          Kamal_Kishor
          Kamal_Kishor
          New Participant
          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.

            Terms & ConditionsAccessibility statement

            Loading footer...