Developers can test how plug-ins work while working on them by running Che-Theia in the hosted mode. It is a special mode in which Che-Theia loads your plug-in directly from the /projects directory (as opposed to the rest of the plug-ins, which are loaded from the plug-in registry). The Che-Theia hosted mode is similar to the debug mode in VS Code.

Starting a hosted Che-Theia instance

  1. Press F1 to display the command palette, and run the Hosted Plugin: Start Instance command.

  2. Specify the path to the plug-in. A new browser tab is opened.

Status in the hosted instance

When running in the hosted mode, Che-Theia displays a Development Host message in the status bar. When you hover your mouse over the message, a tip is displayed with the name of the hosted plug-in.

che theia hosted mode
Status in the main instance

At the same time, the main instance of Che-Theia displays a Hosted Plugin message in the status bar. This element indicates the state of the hosted instance. After starting the hosted instance, main Che-Theia begins to watch the code changes.

watching hosted plug in

When you change something in your plug-in, you can switch to the hosted Che-Theia instance, refresh the page, and immediately see the results.

Plug-in output

When you run a hosted instance, the main Che-Theia instance opens the Output view. This view contains all the output from the yarn backend process. It also contains the output of the backend plug-in that is being developed.

hosted instance output

Controlling a hosted Che-Theia instance

You can control the state of the hosted instance directly from the main instance. Click Hosted Plugin element in the status bar, and a context menu with the available actions is displayed. You can stop and restart the running hosted Che-Theia instance from the context menu. When a hosted instance is stopped, use the context menu to start it again.

controlling hosted che theia

Using code completion

There is a full code completion provided to help you write your plug-in. Code completion covers both the Che Editor plug-in API and the Che Plugin plug-in API.

Example 1. Code-completion example

Your plug-in will handle the opening of a document and displaying a notification message when the document is opened.

code completion example

Tags: