adobe / adobe/aem-project-archetype

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

Open
#1,193 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
596
Forks
431
Avg merge
10d 6h
Merged PRs (30d)
1

Description

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.

Contributor guide

Open the contributing guide

Research direction

Start with the npm scripts, the chokidar command, webpack.prod.js, and the src/dist paths described in the issue. Verify the watch flow on Windows 11 and Ubuntu after an SCSS change; done means npm run watch rebuilds the assets, populates dist, and the browser reflects the change, with npm-run-all available from the declared development dependencies.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, scss, webpack
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.