Trouble authoring a custom plugin!

#1

First of all, I would like to congratulate and thank Theia’s team for the incredible work they have done so far. I just discovered Theia, but personally, i think that the project is magnificent and opens the door to many possibilities in terms of IDE’S.

Now, having that in mind, i wanted to create a custom plugin for testing, and possibly contribute.

In first place, i succesfully built my own IDE as it was shown in https://theia-ide.org/docs/composing_applications/, after seeing the IDE running in my browser i knew i could keep going.

Then, i decided to follow the tutorial in https://theia-ide.org/docs/authoring_plugins/ and, after getting to the execution of the yeoman generator plugin i found the first misshap (or at least, i think it is)

yeoman_misshap.PNG
yeoman_misshap.PNG1084×894

I didn’t thought too much about it and kept going, and so, i went to the IDE folder, updated the package.json file adding @theia/plugin (“next”), @theia/plugin-packager (“latest”) and @theia/plugin-ext (“next”) and then i updated the workspace using yarn, so far so good.

After that i restarted Theia and tried to look for the “hosted mode” command, but i couldn’t find it anywhere.

hosted_mode_not_found1.png
hosted_mode_not_found1.png1329×427

hosted_mode_not_found2.png
hosted_mode_not_found2.png1274×534

hosted_mode_not_found3.png
hosted_mode_not_found3.png1267×330

no_plugins_found1.PNG

no_plugins_found.PNG
no_plugins_found.PNG1505×816

plugin_installed.PNG

And so, i thought that maybe it was a problem of the custom plugin, so i tried to build it again, and then this happened.

plugin_no_build.PNG
plugin_no_build.PNG1098×554

So, there it is, i’m stuck. I can’t start a Hosted Mode instance, and i can’t rebuild my plugin for updating it (for clarification, the only changes made to the plugin code after the yeoman instalation is just a change in the label and the information message strings, nothing else).

Where did i go wrong? How can i fix this?. My objective is to create a plugin for a real-time preview of an express.js server, should it be a plugin? can i get this real-time preview using another method?

Thank you very much for your attention and help.

[original thread by loladmebrah]

#2

[loladmebrah]

#3

[loladmebrah]

By the way, this is my current package.json for Theia’s build.

#4

You know that you can develop VS Code extension and run it in Theia and VS Code?

#5

Whether you want Theia extension or plugin depends more whether you want to build own product or just contribute a bit of functionality to some existing IDEs. VS Code extensions (plugins) allow to contribute some views like trees and webviews. But they are very limited and design to treat such views as remote content. If you design your product (meaning you are in control of user experience including performance) then you are better to use Theia extensions contribute a widget directly, have access to DOM, good integration with editors and so on. If you are not go with VS Code extensions.

#6

But it is only concerning UX and UI tech, for languages, debuggers and so on I would try always go with VS Code extensions first to run them more isolated and allow to plug more at runtime.

#7

For debugging plugins you can use launch configurations, like here https://github.com/eclipse-theia/theia/issues/3251#issuecomment-468166533

#8

[loladmebrah]

Thank you very much for your response and guidance! To be clear, i just want to automatically deploy a service and create a preview of that service after theia starts, just like it’s shown on theia’s workspace example hosted in gitpod. I just have not been lucky getting some example to do so.

Deploying a custom service (like an express server, or a simple js program) it is something already coded on theia? Maybe i’m way overcomplicating things, and it has already done. By the way i’ll check your link and report back as soon as i can.

#9

Hi, what do you mean by realtime preview of express.js? Do you mean it serves some website and you want to show in Theia widget? There is already the mini-browser extensions, you can use it to open some page. As a user look for Preview: Open URL command and then just type it. Programmatically, you will need a theia extension (not plugin), which calls MiniBrowserOpenHandler.open.

#10

[loladmebrah]

@anton-kosyakov thank you, i tried what you suggested, and it worked fine. Now i have another issue, but i will make another post.