Monday, February 27, 2023

Responsive Layouts not working for the nested containers - Adobe Experience Manager(AEM)

The responsive layout resizing was not working for the nested 3rd-level containers in the Editable template.

The responsive layout containers with Editable templates help the authors to manage the page layouts through drag-and-drop resizing. But it looks to be the resizing is not working when nested more than two levels - the resizing stopped working in the 3rd level.

The actual issue is the responsive configurations (cq:responsive node) are not inherited to the 3rd level.

Added a container (container1) 

  •   Container(container1) is aligned to a specific column, e.g., 8.
  •   Added a child container 2 to the container 1.
  •   Added a child container 3 to container 2.
  •   Made container 3 a responsive grid.
  •   Added a text component to container 3.
  •   Layouting not working for the text component.

Workaround: Resize container 3 to a different column size and return to the original column size — this will add the cq:responsive node to container 3 and allow the layout for the text component.

Monday, February 13, 2023

npm ERR! code ENOENT - npm WARN checkPermissions Missing write access

I received the exception below while installing the magnolia CLI npm package from the checked-out code repository(

npm install -g

npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\bluebird
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\command-exists
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\commander
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\diff
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\fs-extra
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\findup-sync
npm WARN checkPermissions Missing write access to xxxxt\Magnolia\magnolia-cli\node_modules\i18next
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\i18next-sync-fs-backend
npm WARN checkPermissions Missing write access to xxxxt\Magnolia\magnolia-cli\node_modules\npm-registry-client
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\inquirer
npm WARN checkPermissions Missing write access to xxxxt\Magnolia\magnolia-cli\node_modules\osenv
npm WARN checkPermissions Missing write access to xxxxt\Magnolia\magnolia-cli\node_modules\progress
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\tar
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\yaml-js
npm WARN checkPermissions Missing write access toxxxx\Magnolia\magnolia-cli\node_modules
npm WARN checkPermissions Missing write access to xxxx\Magnolia\magnolia-cli\node_modules\@magnolia
npm ERR! code ENOENT
npm ERR! syscall access
npm ERR! path xxxx\Magnolia\magnolia-cli\node_modules\ansi-escapes
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, access 'xxxx\Magnolia\magnolia-cli\node_modules\ansi-escapes'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2023-02-13T18_36_08_935Z-debug.log

This error was due to the magnolia CLI already installed globally through "npm install  @magnolia/cli -g".

Use "npm list @magnolia/cli -g" command to view the existing package; uninstall the existing package through "npm uninstall @magnolia/cli"

Now the local installation(npm install -g) from the checked-out code will be a success.

Thursday, January 26, 2023

Selective Proxying to debug live website issues.

I was recently working on debugging a live website issue; it was only reproducible on the live website, and it was challenging to debug the issue with the live site. Based on my research, I identified selective proxying — modifying the response for the selected URLs and passing the rest of the traffic to the live URL- helping debug live website issues quickly. I want to share some possible tools and configurations that can be used to debug live website issues through selective proxying.

The actual issue was the JavaScript embedded into the HTML page was not working as expected; to debug the problems, the script in the HTML should be modified. Finally, I used the Fiddler Autoresponder to serve only the specific HTML from the Local File and the remaining URLs through live websites. This helps me modify the embed script, identify the root of the problem, and address it.

Fiddler Autoresponder:

The Auto Responder feature in Fiddler Everywhere allows you to create “Rules” triggered when a particular request is issued. Fiddler’s Autoresponder will enable you to return files from your local disk instead of transmitting the request to the server.

The Fiddler can be downloaded from Download Fiddler Web Debugging Tool for Free by Telerik.

Select Autoresponder from Fiddler UI and click Add Rule.

Add the string to match — the URL that should be responded to with local file content.

Select Find File and locate the local File — in my case, I will replace the response for one the HTML — copy the actual HTML response through the view page source in the live URL, store it in the local File, and modify the content as required.

Save and Enable the Rule

Enable the “Decrypt HTTPS Traffic” option if you are debugging HTTPs websites.

Tools → Options → HTTPS

I am selecting No for the root certificate; if the root certificate is not accepted, you will receive an untrusted SSL certificate error while accessing the website — the root certificate can be trusted later if required.

I am enabling the Decrypt only for the browsers.

Click Ok and access the website(page); the specific page will be rendered from a local file — I have enabled a quick alert on the local File.

Now the specific HTML file is loaded locally; all remaining requests are responded to from the live server— including the relative links inside the HTML page loaded from locally.

The SSL certificate error may block some of the externally linked resources from loading; if you want, you can trust the Fiddler root certificate (keep security in mind)

Go to Tools → Option → HTTPS, Click on Actions → Trust Root Certificate.

Follow the screens and Trust the certificate; now, the SSL error will be removed.

You can remove the root certificate if required through Tools →Options → HTTPS →Actions →Reset All Certificates.

The Fiddler is enabled system-wide to capture all the traffic; you can modify the configurations to capture only the specific traffic. Also, you can pause the capturing by unselecting the File →Capture Traffic configuration.


Another option is using the Requestly Desktop app to proxy the response; the Requestly Desktop app can be downloaded from Desktop App to Intercept & Modify HTTP Requests | Requestly

First, open the browser profile (recommend new profile) through the connected app.

Now enable an HTTP Rule.

Select Modify Response Rule

Add the URL for the response that should be replaced — refer to the previous option for replacing HTML with local content.

Place the updated content (in my case, HTML) in the response body.

Provide a Rule name and Save the Rule (Ctrl+S)

Now test the page through the browser session opened by Requestly. For the matching page, the response body is replaced by content specified in the Rule, and the remaining links are directed to the live server.

The Requestly is simple to configure and restricted to a specific browser session, but the Fiddler will give more functionalities like traffic monitoring, SSL support, etc. You can even use other proxies like Charles proxy etc.; consider the security before using any tools for proxying the requests- use the proxies only when you need some debugging.

Tuesday, January 17, 2023

How to support multiple test environments on Coveo Non-Prod Org?

 When you onboard the Coveo search platform by default, you will get two organizations — Prod and Nod Prod, prod can manage the Live search experiences, and non-Prod by default can manage one of the test search experiences, e.g., search on stage platform.

But in most cases, you may need to support multiple test platforms to support various testing, e.g., UAT, Stage, etc.; in this post, let us see one of the approaches to support multiple environments, e.g., UAT, Stage on Coveo Non-Prod organization.

Here the assumption is UAT websites enabled with domains containing uat, e.g.,, and stage websites enabled with the domains containing stage

Login to the Coveo Admin console and select non-Prod organization.

Create two conditions to identify the UAT and Stage environments.

Add two Filter conditions to the query pipelines to filter the content based on the environment conditions defined in the earlier step (filter based on the environment).

Enable UAT/Stage sources — Enable the source (I am using a sitemap source) with both the stage and uat sitemap URLs.

The source index both stage and uat content, but the query pipeline filters the content based on the source_environment and renders it to the end user.

Enable the source_environment context variable to the search page; if you are using the Coveo search page, enable the below event handler — the event handler sets the DNS that accessed the search page to the source_environment context variable. If you are using API to access the search result, pass the source_environment as part of the API context.

Coveo.$$(document.getElementById('coveo-search')).on('buildingQuery', function(e, args) {
args.queryBuilder.addContextValue('source_environment', window.location.hostname);

Now when the user accesses the search result page from the stage environment, the stage content is displayed, and uat data is while accessing the UAT search result page.

Specifying the source_environment context variable while accessing the search result through API.{"country":"us","locale":"es","source_environment":"stage"}&q=xxxx

Refer to Coveo Search Implementation with AEM (Adobe Experience Manager) | by Albin Issac | Tech Learnings | Sep, 2022 | Medium | Tech Learnings for more details on enabling Coveo search for AEM websites.