Skip to content

Preparation of the development environment

This section describes how to install all the software required to compile your SiOME plugin.

Installation of Node.js

Which version of Node.js you have to install is dependent on the Angular version (specified in dependencies of package.json) used in the plugin project. The dependency versions required by Angular are listed on their website: https://angular.dev/reference/versions.

Without version Manager

Node.js install wizard

To install Node.js follow these steps:

  1. Open the Node.js download page: https://nodejs.org/en/about/previous-releases.
  2. Search for the version of Node.js required by your Angular version and select "Releases".
  3. Download the Windows Installer node-<version>-x64.msi.
  4. Install Node.js via the downloaded installer.
  5. To check if the installation succeeded, open a terminal and type the following command to check your installed Node.js version:
node --version

The output must match the version you have downloaded previously.

With version Manager

Node.js install nvm

A version manager such as NVM for Windows (https://github.com/coreybutler/nvm-windows) can provide more flexibility when switching between projects with different versions of Angular.

  1. Follow the installation guide on github: https://github.com/coreybutler/nvm-windows#installation--upgrades

  2. To install a specific Node.js version, use

    nvm install <version>
    
  3. To select the installed Node.js version, use

    nvm use <version>
    
  4. To display the currently selected Node.js version, use

    nvm current
    

Installation of Angular

To install the Angular, run the following command in the command line:

npm install -g @angular/cli

And allow the execution of Powershell Scripts with the command:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy.

Info

More Information about this topic is available under: https://angular.dev/tools/cli/setup-local

Set up SiOME for plugin use

  1. Open SiOME.
  2. Open " Settings > General" and under "Plugin directory" set the location of your plugin directory, where the folder containing your plugin files should be.

Building the siome-base-plugin

  1. Download and extract or fork and clone the siome-base-plugin repository.
  2. (optional) Open the now extracted project folder in Visual Studio Code.
  3. Open a terminal at the now extracted project location.
  4. Install packages with the following command:

    npm install 
    
  5. (optional) In case you get the error message below, restart Visual Studio Code, this should fix the problem:

    Cannot find type definition file for 'node'. The file is in the program because: Entry point of type library 'node' specified in compilerOptions

  6. Build the plugin with the following command:

    npm run build-plugin
    
  7. If the build was successful, you will find the created plugin folder under siome-base-plugin/dist/releases. The plugin folder has the name of the plugin and contains one .css and one .js file, which are the actual plugin files, as well as a license .txt.

  8. Copy the plugin folder to the "Plugins directory", you set earlier in SiOME.

Running the plugin in SiOME

Change "Layout" to "Plugin".

run_plugin_select_layout

Click on "Select plugin".

run_plugin_select_plugin

Click on "siome-base-plugin".

run_plugin_hello_world_button

To test the plugin, click on the button "Hello World".

run_plugin_hello_world_alert

Close the dialog, by clicking "Ok".

Close the plugin, by clicking "Remove plugin from SiOME".

Get SiOME