Watch for changes while debugging

Hi all,
In order to debug the frontend, I ran yarn start and then opened localhost:3000 in a browser and used Chrome debug tools.

yarn start doesnt watch for changes and theia needed to be recompiled again when there are changes.

Instead, is there a way to run the app like using npx gulp serve and test ?
Thanks in advance.

Yes, there is.

theia build --watch

does exactly that.

Taking into account you’ll probably want to watch for changes in an extension you’re developing you could put something like this:

"watch": "tsc -w"

in the ‘scripts’ part of your extension’s package.json. You could then build your app in watch mode like this, for example:

concurrently "yarn --cwd path/to/your/extension run watch --preserveWatchOutput" "theia build --watch --mode development"

Keep in mind you’ll still need to reload the page to see the changes.

Hope this helps!

Personally I use lerna run --parallel watch.

One usually needs 3 terminals:

  • one running the app
  • one watches tsc compiling an extension
  • one watches webpack bundling everything together

You could add more tooling like gulp or use some shell/npm scripts to start it at once.

For Theia repo we are trying to avoid overload of build tools and follow the simple approach: https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

1 Like