Add VSXI plugin to Eclipse Theia

After installing Eclipse Theia Blueprint or building your own Theia application, what you have is a modern IDE, ready to be used to develop a wide range of applications. It won’t be fun, as the included list of plugins is empty. You’d need to do a lot of manual work and not benefit from plugins that make the life of a developer easier. Regarding SAP and specifically Fiori development: there is no SAP related plugin included. If you ever had to do everything in Fiori / UI5 development manually, you know: help is highly appreciated.

Let’s make this help available in Eclipse Theia. It is possible to list the installed plugins / extension in Theia or to install new ones via the Open VSX Registry. Open the extensions view to get an overview of the available or installed plugins / extensions.

Just like VS Code, a marketplace is available that allows to enhance Theia easily. Note the text in the search bar: Search Extensions in Open VSX Registry.

Searching here for one of the SAP Fiori plugins known from VS Code won’t work. They won’t be found. The reason is simple: SAP is providing their plugins to the VS Code plugins marketplace, but not to the Open VSX Registry.

Some plugins related to SAP exists – and of course one from Lars. You won’t be able to find any SAP authored plugins for Fiori development. The plugins cannot be installed in the same user-friendly way developers are used to from VS Code. You need to download the VSXI file and install it manually.

One SAP plugin is available on GitHub: Application Wizard. As mentioned in my previous post, you cannot simply use the VSXI files from the VS Code marketplace to enhance your Theia application. Fortunately, the application wizard GitHub repo includes the VSXI file also for usage in Theia.

I do not know why this plugin is available on GitHub and others not. Maybe it’s a glitch in the matrix, someone did not pay attention, or it is some requirement for another tool. But it is available and can be installed in Theia. Thanks to everyone involved in making this plugin available on GitHub!

Application Wizard

Download the VSIX file from GitHub (when I wrote this: v1.7.7). Add it to Eclipse Theia. For this, use the command “Extensions: Install from VSIX”.

The file explorer opens, select the file “yeoman-ui-1.7.7.vsix” and select “Install”.

The extension will be installed.

After a successful installation, the extension will be listed in the section “Installed”.

The extension will now appear in the extension view as an installed extension.

Note: to be able to use the extension, you might have to restart Theia.

To start the extension, enter “Open Template Wizard” in the command palette.

When starting the extension for the first time, you might not see much, as the Yeo generators must be installed for the extension to work. To install generators, use the link “Explore and Install Generators…”.

From the list of available generators, @sap/generator-fiori and generator-easy-ui5 are interesting.

Install both. This should take a few minutes. Switching back to the tab “Template Wizard” will show the freshly installed generator.

Create an SAP Fiori application.

A nice side effect of Eclipse Theia and VS Code: in case an SAP system connection was already created in VS Code, Theia can re-use that connection! In the end, it is the same plugin. Of course, the wizard works just like in Code or BAS.

Adding a Fiori Launchpad configuration is working, too.

Finish the project wizard.

Open the workspace and happy Fiori coding!