WKND tutorial npm run watch issues

[Luscas]

I've been following the WKND tutorial again (https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-wknd-tutorial-de...)

Although it was going well, I've now run into an issue where 'npm run watch' does absolutely nothing similar to what happens in the instructor's video. I first followed the tutorial on my own project which I made from just the archetype, and when reaching the part where I'm supposed to run 'npm run watch', it ran a localhost:8080 instance instead of just building the frontend, and it ended up completely removing any and all CSS on the actual pages I wanted to work on when I ran it like the tutorial did. After debugging and searching for a while I simply gave up on that end due to not finding any answers.

At first I believed it to be an issue with my project, so I cloned it from the github repository provided by the tutorial, switched to the tutorial/component-basics-solution and ran 'npm run watch'. It seemed alright, seemingly running well despite a warning or two on the console, and after changing the SCSS, lo and behold, nothing was updating.

I changed the 'watch' script to be "watch": "webpack-dev-server --config ./webpack.dev.js --env writeToDisk & chokidar -c \"clientlib\" ./dist & aemsync -w ../ui.apps/src/main/content" which someone who was having a similar issue in another thread mentioned working for them but it unfortunately didn't work for me.

I'm using VSCode to mess with the HTL, SCSS, and run terminal related commands, and while my ui.frontend/dist folder is getting updated, with the color and extra attributes appearing whenever I update the SCSS, my ui.apps/.../clientlib-site isn't, so in order to deploy simple changes to the frontend I need to rebuild the entire project, which isn't great for small frontend changes. I've also attempted to run '-PautoInstallBundle' and it also doesn't work. It likely has to do with my environment not being fully prepared but at the same time I find it odd that I'd need to have a boatload of other things setup before working on a simple tutorial.

Anyhow, as suggested by the tutorial, I've installed AEM Sync by 'Yinkai15', HTL Language Support by 'Olman San Lee Montero', Maven for Java by Microsoft, and VSCode AEM Sync by 'yamato-ltd'. I haven't configured any of them because the tutorial didn't go over that.

I've followed step by step, done the exact same things, yet when I update my SCSS like the tutorial does, mine doesn't update, I need to run 'mvn clean install -PautoInstallSinglePackage' in order for any changes to be deployed and appear on the website.

I have also attempted the same fixes as "https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/wknd-tutorial-issue-no-fil..." this thread to no avail.

[EstebanBustamante]

Hi, 

Follow the instructions from the archetype: ui.frontend/README.md

Go to "ui.frontend" and run "npm run start"

Hope this helps

[Luscas]

Hey, thanks for the reply.

I've attempted that and while it does actively update changes on the dev server @ localhost:8080, it opens the home page and not what I actually want to check out. The changes in AEM itself are still not being applied.

My current solution is to run 'npm run dev' and then use an extension to export the changes in ui.apps/.../clientlibs

[Vishal_Anand]

Yes. Because your ui.apps and ui.frontend won't talk to each other unless explicitly published across modules. You can probably try setting up your clientconfig file to automatically copy clientlibs from your frontend module to ui.apps whenever build is triggered. 

[Luscas]

Yeah, I know what I have to do because I figured out how the AEM modules interact and work, but I don't exactly know how to do it.

Is there a doc or something of the sort?

[lch_dh]

My guess is you are running on Windows as there are posts from as old as 2022 with people having problems getting "npm run watch" doesn't properly function as a seamless live-reload.

I was just troubleshooting this today as I've been re-visiting the AEM weekend tutorials.   What I noticed is that there are 3 commands being run in parallel in the watch task (separated by ampersands), but they don't actually appear to be running in parallel under Windows 10-11.  The individual commands work if run separately, but the 2 additional commands after the ampersands are both separate watch commands which I believe is the root cause of the problem.  

To solve this, you will need to install the npm-run-all package and then revise package.json to have separate commands for chokidar and aemsync and then revise the watch command to use npm-run-all.  I'm re-using "start" which has --env writeToDisk=true which is a step mentioned in the tutorial.  So basically I am using npm-run-all to run 3 commands in parallel that were previously separated with ampersands in the original "watch".

This is now makes "npm run watch" function as expected.

To recap:

• install npm-run-all package
• revise your package.json as follows:

"scripts": {
    "dev": "webpack --env dev --config ./webpack.dev.js && clientlib --verbose",
    "prod": "webpack --config ./webpack.prod.js && clientlib --verbose",
    "start": "webpack-dev-server --open --config ./webpack.dev.js --env writeToDisk=true",
    "sync": "aemsync -d -p ../ui.apps/src/main/content/jcr_root/apps/wknd",
    "chokidar": "chokidar -c \"clientlib\" ./dist",
    "aemsync": "aemsync -w ../ui.apps/src/main/content",
    "watch": "npm-run-all --parallel start chokidar aemsync"
  },