ui.frontend + "npm run watch" not working on Windows 11 (fix/workaround inside)

[mrjayviper]

2 issues

1. npm-run-all command is used BUT it's not part of dev dependencies. I have to manually install it.
2. more importantly, I cannot get "npm run watch" to work at all

this is what I see in terminal AFTER changing some values in my SCSS file (like changing the text color to red)

[webpack-dev-middleware] wait until bundle finished: / assets by status 56.4 KiB [cached] 6 assets assets by path . 244 KiB asset clientlib-site/site.css 20.1 KiB [emitted] (name: site) asset clientlib-site/site.js 224 KiB [emitted] (name: site) Entrypoint site 244 KiB = clientlib-site/site.css 20.1 KiB clientlib-site/site.js 224 KiB 2024-05-21 18:39:39: webpack 5.91.0 compiled successfully in 402 ms

After refreshing my browser tab, the text color has not changed.

this is the original NPM script => "chokidar": "chokidar -c \"clientlib\" ./dist". I've noticed that changing the SCSS file does nothing to my "dist" folder. it remained empty.

After looking at the chokidar-cli README and this is what I've done to get it to work => "chokidar": "chokidar ./src -c \"webpack --config ./webpack.prod.js && clientlib --verbose\"",

With my changes...

• I am now watching for changes in the src folder
• chokidar-cli will now run the whole NPM "prod" script instead of just the aem-clientlib-generator script

EDIT/UPDATE:

• I just tried the original "npm run watch" in ubuntu 24.04 and it's still not working.
• I changed the "chokidar" script to the one I mentioned above and it's working now.

[ndresgarc]

I had same problem.

I created a PR to add npm-run-all to devDependencies in ui.frontend.general.

https://github.com/adobe/aem-project-archetype/pull/1198