This section describes how to set up an environment for developing the Che-Theia plug-ins in Eclipse Che.

Prerequisites

  • A running instance of Eclipse Che. To install an instance of Eclipse Che, see Che 'quick-starts'.

  • chectl management tool is installed. See Installing the chectl management tool

    1. Create a workspace for development. Che has dedicated stacks for plug-in development. In the Dashboard, click the Workspaces tab, and click the Add Workspace button.

      adding workspace
      Figure 1. Adding a workspace

    2. Select the Che 7 Dev stack, and click the CREATE & OPEN button.

      choosing che 7 dev stack
      Figure 2. Choosing the 'Che 7 Dev' stack

    3. Generate a plug-in scaffold. The workspace created from this stack provides an easy way to scaffold a new plug-in. When the workspace is started and fully ready, execute the Yeoman Wizard from the command palette:

      1. Press F1 or Ctrl+Shift+p to invoke the command palette, and start typing the command name Yeoman …​ (note that you can also use the keyboard to navigate through the offered commands).

        launching yeoman wizard
        Figure 3. Launching the Yeoman Wizard

      2. Fill in the following fields about the plug-in that you want to create:

  • plug-in name: For example, my-first-plugin.

  • plug-in type: Select backend plug-in.

  • plug-in template: Select the Hello World plug-in.

    A message confirming that the plug-in generation has been successful indicates creation of the plug-in.

    yeoman successful
    Figure 4. Yeoman successfully generated a new plug-in

    1. Open the Files panel, to see the sources of the generated plug-in in the src directory.

    2. Build the plug-in. After the plug-in is created, build the plug-in:

      1. Open a new terminal in the development container (use Ctrl+`, then select ws/dev).

        open terminal in container
        Figure 5. Opening a new terminal in the development container

      2. In the terminal, go to the plug-in directory, and run the yarn command:

        # cd my-first-plugin/
# yarn
        building plug in using yarn
        Figure 6. Building a Che-Theia plug-in using yarn
        The plug-in generator automatically builds the plug-in after its generation.

    3. Run the plug-in. To see your plug-in in action in the IDE, use the Hosted mode to start a new IDE instance and to install the plug-in in it. You now have two IDEs running: one for developing your plug-in and one for testing it.

      1. In the command palette, run: Hosted Plugin: Start Instance command (press F1, and type the command).

      2. Select the path to the root directory of the plug-in in your workspace.

        If you get a warning that your browser prevented the opening of a new tab, click the Open button in the dialog box. A new tab with another Theia instance (with the developed plug-in loaded) is opened.
        running plug in hosted mode
        Figure 7. Running a Che-Theia plug-in in Hosted mode

    4. Debug the plug-in.

      1. In the source code of your plug-in, set a breakpoint by clicking behind a line number (in the editor gutter).

      2. Using the command palette, stop your Hosted Plug-in instance (if any) by running the Hosted Plugin: Stop Instance command.

      3. Start the Hosted Plug-in instance again in the debugging mode by running the Hosted Plugin: Debug Instance command.

      4. Switch to the Hosted Instance tab and perform the required actions to reach the code with the breakpoint.

      5. Go back to the Main Theia window, and use the Debug panel as you need.

        debugging plug ins
        Figure 8. Debugging a Che-Theia plug-in
        When developing a frontend plug-in, debug it using your browser’s Developer Tools option.