There are two ways to scaffold a new plug-in development environment in Che-Theia:

  • Console plug-in generator (based on the Yeoman generator)

  • Yeomand wizard (launched from the command palette)

List of available plug-in samples

The Che-theia plug-in generator provides a number of pre-defined samples:

  • Hello World plug-in: The plug-in registers a new Che-Theia command. When the user launches this command, Che-Theia displays a notification with the Hello World message. The example illustrates how to define and use commands in Che-Theia.

  • Skeleton plug-in: The plug-in prints the current Che-Theia window state in the browser log.

  • Samples plug-in: The plug-in contains examples of how to use the Che-Theia API:

    • Commands sample: The plug-in shows how to define a Che-Theia command with arguments. Command arguments are useful when another plug-in needs to call a command with parameters.

    • Information message sample: An example of how to define and show a modal information message.

    • Quick-pick sample: An example of how to define a command list with items and a handler for a selected item.

    • Status-bar item sample: An example of how to apply information to the status bar. The status bar is a widget located at the bottom of the Che-Theia window (a footer).

Overview of generating plug-ins

To simplify plug-in development, there is a plug-in generator (@theia/generator-plugin) for creating new plug-ins from scratch. The plug-in generator provides the Yeoman wizard for a step-by-step plug-in generation:

  1. Choose project name for the future plug-in.

  2. Select plug-in type. The Che-Theia plug-in API has two plug-in types:

    • frontend: The plug-in works on the client side

    • backend: The plug-in works on the server side

    During plug-in creation, you need to decide the purpose of the plug-in and, accordingly, select the plug-in type.

  3. Select a plug-in sample.

TODO Apply stack for development: For plugin development inside Eclipse CHE You could use any stack, but apply theia-dev plugin. This stack contains installed npm, node, git and preinstalled @theia/generator-plugin.

Installing the plug-in generator

  1. Run the following command to install the plug-in generator:

    $ yarn add global yo @theia/generator-plugin
  2. Check that the @theia/plugin generator is installed:

    $ yo --help

    The command returns a list of pre-installed generators.

Generating a new plug-in in the console

  1. Create a new terminal inside your workspace using the Terminal menu, and run the plug-in generator:

    $ yo @theia/plugin

    Alternatively, run yo without any parameters and select the @theia/plugin generator from the list of available generators.

    yo select plug in generator
  2. Enter the information to configure the plug-in. For example:

    launching console plug in generator

When the plug-in is generated, it appears in the Files panel. The sample is already compiled and contains the plug-in binary. In this example, the plug-in binary is named my_first_plugin.theia.

Generating a new plug-in using the Yeoman wizard

Che-theia provides the Yeoman wizard command for creating new plug-ins from the command palette.

  1. To launch the command palette, press Ctrl+Shift+p (or Cmd+Shift+p on macOS).

  2. Type Yeom to filter the commands. Select the Yeoman Wizard command.

    yeoman wizard launching

    Note that launching the wizarad may take a few seconds.

  3. Enter the new project name.

    yeoman wizard choosing plug in name
  4. Select the desired plug-in type (client-side or server-side).

    yeoman wizard choosing plug in type
  5. Select the plug-in sample to use.

    yeoman wizard choosing plug in sample

When the plug-in is generated, the Yeoman wizard displays a notification.

yeoman wizard plug in generated

The plug-in sample displays in the Files panel. Use the Output tab in the botton panel to access logs for plug-in generation.

yeoman wizard logs
The Yeoman wizard only works when a workspace is opened in Che-Theia.