How to watch file change and rebuild browser app when develop an extensions?

[znoliver]

I develop an theia extensions, I want hot reload the changes where I modify. I use --watch args ,but I can't find the changes.
My code is there: example

[msujew]

Hey @znoliver,

Theia doesn't support hot reloading, as it's not served by webpack itself. In order to correctly watch the source code, you need a script similar to this:

theia/examples/browser/package.json

Line 88 in 9ff0ced

"watch": "concurrently --kill-others -n tsc,bundle -c red,yellow \"tsc -b -w --preserveWatchOutput\" \"yarn -s watch:bundle\"",

And reload your browser tab after every change.

[znoliver]

Yes，I have a script similar to example , when I modify the extension code , tsc can listen the change and rebuild , but the watch:bundle don't listen ,so I reload reload my browser tab and can't find the change.

"start:watch": "concurrently --kill-others -n tsc,bundle,run -c red,yellow,green \"tsc -b -w --preserveWatchOutput\" \"theia build --watch --mode development\" \"yarn -s start\""

[msujew]

That does seem correct. Not sure what's wrong, maybe you have a reproducible example?

[znoliver]

Yes，I clone the theia code from github, and run watch , it obtained the same result.

[msujew]

Does the webpack watch script generate new output in your console? I don't really have a clue what could be wrong, it works for me/us.

[znoliver]

Sorry, I have figured out the reason. I use windows docker with WSL2 and mount the theia workspace to docker container ，and the I use vscode remote develop to the container, so the problem reproduced. If I don't use docker, the problem can't reproduced.
I guess the reason is windows file change event don't fire docker container file change event.