Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Client Libraries JavaScript Page Head Not Loading into Publisher

Avatar

Level 2

I have configured a Client Library JavaScript Page Head like so:

1744822_pastedImage_0.png

In author is appears as expected:

1744985_pastedImage_1.png

In publisher, however, it does not appear. All pages and packages are active/published.

Is there anything that could be preventing this from appearing in the publisher instance?

Thanks,

Francesca

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

If your clientlibs files are under /apps (which is recommended by adobe from AEM 6.4 onwards) you need to add "allowProxy" property so that clientlibs will be loaded via etc.clientlibs

jcr:primaryType="cq:ClientLibraryFolder"

allowProxy="{Boolean}true"

Also, make sure in publisher /etc is having read access for everyone user

From Adobe Documentation:

In order for the client libraries under /apps to be accessible, a proxy servelt is used. The ACLs are still enforced on the client library folder, but the servlet allows for the content to be read via /etc.clientlibs/ if the allowProxy property is set to true.

A static resource can only be accessed via the proxy, if it resides below a resource below the client library folder.

As an example:

  • You have a clientlib in /apps/myproject/clientlibs/foo
  • You have a static image in /apps/myprojects/clientlibs/foo/resources/icon.png

Then you set the allowProxy property on foo to true.

  • You can then request /etc.clientlibs/myprojects/clientlibs/foo.js
  • You can then reference the image via /etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png

View solution in original post

7 Replies

Avatar

Employee

francesca​ You might have to reference using /etc.clientlibs but before that you need to configure "Client Library Folder and Using the Proxy Client Libraries Servlet" - Please check Using Client-Side Libraries - read section "Locating Client Library Folder and Using the Proxy Client Libraries Servlet"

Avatar

Correct answer by
Community Advisor

If your clientlibs files are under /apps (which is recommended by adobe from AEM 6.4 onwards) you need to add "allowProxy" property so that clientlibs will be loaded via etc.clientlibs

jcr:primaryType="cq:ClientLibraryFolder"

allowProxy="{Boolean}true"

Also, make sure in publisher /etc is having read access for everyone user

From Adobe Documentation:

In order for the client libraries under /apps to be accessible, a proxy servelt is used. The ACLs are still enforced on the client library folder, but the servlet allows for the content to be read via /etc.clientlibs/ if the allowProxy property is set to true.

A static resource can only be accessed via the proxy, if it resides below a resource below the client library folder.

As an example:

  • You have a clientlib in /apps/myproject/clientlibs/foo
  • You have a static image in /apps/myprojects/clientlibs/foo/resources/icon.png

Then you set the allowProxy property on foo to true.

  • You can then request /etc.clientlibs/myprojects/clientlibs/foo.js
  • You can then reference the image via /etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png

Avatar

Level 10

As Ravi points out - you should include Clientlibs the correct way - using a script tag does not address best practice.

Avatar

Level 2

Hi Ravi,

Thank you for your response! I have updated the allowProxy property and the path has been updated accordingly:

1745410_pastedImage_0.png

However, it is still missing on publish. Though it seems to be able to pull in other clientlibs without issue:

1745462_pastedImage_1.png

Can you elaborate on how to "make sure in publisher /etc is having read access for everyone user"?

Thanks,

Francesca

Avatar

Level 2

Hi,

The script tag is generated by referencing the library via the template policy:

1745463_pastedImage_0.png

Is including libraries at the template-level like so not best practice?

Best,

Francesca

Avatar

Community Advisor

You can add read permission to everyone and anonymous user in publish instance (/etc/designs, /etc/clientlibs) by going to useradmin console and search for below users

Everyone

Screen Shot 2019-05-03 at 10.01.35 AM.png

Anonymous

Screen Shot 2019-05-03 at 9.59.05 AM.png

Avatar

Level 2

In practice, when configuring webpack.dev.js, webpack.prod.js, or webpack.common.js, you will encounter a configuration similar to the one below:

 devServer: {
      inline: false,
      proxy: [{
        context: ['/content', '/etc.clientlibs'],
        target: 'http://localhost:4502',
      }],
      writeToDisk,
      liveReload: !writeToDisk
    }

If you examine the index.html file in the ui.front-end module, you will find a sample declaration as follows:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Flagtick Frontend file</title>
    <meta name="template" content="page-content"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="/etc.clientlibs/flagtick/clientlibs/clientlib-base/css/site.css" type="text/css">
    <link rel="stylesheet" href="/etc.clientlibs/flagtick/clientlibs/clientlib-site/site.css" type="text/css">
    ...
</head>

We utilize the ui.front-end code, which depends on resources served by the AEM instance. The primary method involves leveraging /etc.clientlibs. Alternatively, the second approach is to load resources directly from the front-end dist folder, referencing the stats.json file.

Way 1: <link rel="stylesheet" href="/etc.clientlibs/flagtick/clientlibs/clientlib-site/site.css" type="text/css">
Way 2: 
stats.json
{
      "type": "asset",
      "name": "clientlib-site/site.css",
      "size": 8501,
      "emitted": false,
      "comparedForEmit": false,
      "cached": true,
      "info": {
        "size": 8501
      },
      "chunkNames": [
        "site"
      ],
      "chunkIdHints": [],
      "auxiliaryChunkNames": [],
      "auxiliaryChunkIdHints": [],
      "related": {},
      "chunks": [
        "site"
      ],
      "auxiliaryChunks": [],
      "isOverSizeLimit": false
    },
Then we have:
<link rel="stylesheet" href="/clientlib-site/site.css" type="text/css">

You can see picture as below to understand why we need allowProxy="true".

Capture.PNG