Theia extension development setup

How do I set up the brower-app (build), so that the theia browser build UI and backend update automatically whenever I make changes in the extension folder (eg: contribute.ts or frontend files).

As of now, I am making the changes, stoping the already running theia browser build and again restarting it with yarn start, just to see the changes that I have made.

Hi @iam_abd038,

it depends a bit on your setup, but I assume you should be able to set up a watch script for both the theia build and the tsc commands, see these scripts in our examples:

Running both of these in separate terminals will allow you to see your frontend changes after reloading the browser window (without restarting the server). However, as far as I know, there’s no way to make changes to the backend while it’s running. So after the typescript compiler has compiled your changes in watch mode, you’ll have to restart the server.

1 Like

This is the rough project structure (default folder setup created by yo install theia-extension)
-> yo generated folder
—>browser-app
—>extension
—>…rest of stuff

In the extension folder, i should do yarn watch to auto compile .ts files on save.

Now i should start the browser-app with yarn watch:bundle, to get auto updated frontend ?

Is it correct ?

In the extension folder, i should do yarn watch to auto compile .ts files on save.

Yes, exactly.

Now i should start the browser-app with yarn watch:bundle , to get auto updated frontend ?

This won’t start the browser-app but run webpack in watch mode. You’ll still have to run yarn start to start the app. The rest is correct.