Theia: Embedding Theia on an existing page

[tritao]

Hey, really nice work so far on Theia so far!

I was wondering if there is any documentation on how to embed Theia into an existing page?

And how to customize builds (for instance, enable/disable extensions by default)?

[akosyakov]

I was wondering if there is any documentation on how to embed Theia into an existing page?

Right now only with iframe. There is an assumption that Theia should be attached to document.body. Please open a feature request if in your case iframe is not enough.

And how to customize builds (for instance, enable/disable extensions by default)?

Theia extensions are node packages as well as Theia applications. You can compose a new application package with extension packages and use Theia CLI to build and start it.

[spoenemann]

I was wondering if there is any documentation on how to embed Theia into an existing page?

Right now only with iframe. There is an assumption that Theia should be attached to document.body. Please open a feature request if in your case iframe is not enough.

Now there is a way to do it without iframe: Create a subclass of FrontendApplication, register it via dependency injection, and override getHost to return some HTML element. The default returns document.body.

[tritao]

Thanks, we will check it out when we get a chance.

[hojas]

How to do this specifically?

[johnwiseheart]

Also interested:

register it via dependency injection

How would this look, @spoenemann?

[spoenemann]

• Create a subclass of FrontendApplication (@theia/core/lib/browser/frontent-application)
• Override getHost() so it returns the DOM element where the IDE shall be embedded.
• Add a binding to your frontend contribution module:

rebind(FrontendApplication).to(MyFrontendApplicationSubclass).inSingletonScope();

Default implementation:

https://github.com/theia-ide/theia/blob/63365dc1d787df19f47898a2aa0204bb4c2dadda/packages/core/src/browser/frontend-application.ts#L128-L138

[johnwiseheart]

Hey @spoenemann, thanks for the update. I have created a minimal repo to try to help out this issue, and once we solve it I can add an example for future use. On my repo, I have gotten much closer to things working - but I am running into the issue:

Uncaught Error: Could not unbind serviceIdentifier: FrontendApplication
    at Container.unbind (container.js:174)
    at Container.rebind (container.js:166)
    at eval (container.js:280)
    at ContainerModule.inversify_1.ContainerModule [as registry] (index.tsx:28)
    at Container.load (container.js:113)
    at runApplication (index.tsx:34)
    at eval (index.tsx:53)
    at Object../src/index.tsx (main.js:9405)
    at __webpack_require__ (main.js:20)
    at eval (webpack:///multi_(:8082/webpack)-dev-server/client?:2:18)

If I try to just call bind(...) instead of rebind(...), I get:

webpack:///./src/index.tsx?:49 Error: No matching bindings found for serviceIdentifier: MyFrontendApplication
    at _validateActiveBindingCount (webpack:///./node_modules/inversify/lib/planning/planner.js?:62)
    at _getActiveBindings (webpack:///./node_modules/inversify/lib/planning/planner.js?:48)
    at _createSubRequests (webpack:///./node_modules/inversify/lib/planning/planner.js?:85)
    at Object.plan (webpack:///./node_modules/inversify/lib/planning/planner.js?:136)
    at eval (webpack:///./node_modules/inversify/lib/container/container.js?:317)
    at Container._get (webpack:///./node_modules/inversify/lib/container/container.js?:310)
    at Container.get (webpack:///./node_modules/inversify/lib/container/container.js?:230)
    at runApplication (webpack:///./src/index.tsx?:43)
    at eval (webpack:///./src/index.tsx?:53)
    at Object../src/index.tsx (main.js:9405)

Is there a better way that I should be binding my subclass, or perhaps I am just doing something wrong here?

My repo: https://github.com/johnwiseheart/theia-embedded-demo/blob/master/src/index.tsx

[spoenemann]

You need to make sure the modules are loaded in the correct order, in particular the frontendApplicationModule from @theia/core needs to be loaded before your own one.

I never tried to manage the module loading order myself, always took the one generated by @theia/cli.

[johnwiseheart]

Thanks for your help! I successfully got this to work (you can see my changes in the repo). Where would be the best place to add this documentation? I'd be happy to transfer my repo to the @theia-ide org, or could just add the relevant files to a folder somewhere in the @theia-ide/theia structure?

[spoenemann]

Which documentation do you mean?

[johnwiseheart]

Documentation on how to run theia embedded in a larger web-app - aka my example repo (and I could do a small write-up explaining)

[spoenemann]

I guess that should go to https://www.theia-ide.org/doc/

The source is here: https://github.com/theia-ide/theia-website

[sanakanchha]

@johnwiseheart looking for something similar.. is there a doc I can look into? If you could add a readme to your repo, that would work as well, thanks.