Setup IDE for OpenEMS UI

Visual Studio Code is the recommended development environment for OpenEMS UI. If you do not plan to actively develop on OpenEMS UI, you can simply use the hosted version we provide at https://openemsuilocal.consolinno.de .

1. Setup Visual Studio Code

  1. Download node.js LTS and install it.

  2. Download Visual Studio Code , install and start it.

  3. Open OpenEMS UI source code in Visual Studio Code:

    Menu: File → Open Folder…​ → Select the ui directory inside the downloaded source code (for example C:\Users\your.user\git\openems\ui) → Select directory

  4. Open the integrated terminal:

    Menu: Terminal → New Terminal

  5. Install Angular CLI :

    npm install -g @angular/cli

    If you receive an error message that the command npm could not be found, make sure that node.js is installed and restart Visual Studio Code.

  6. Resolve and download dependencies:

    npm install

2. Run OpenEMS UI

  1. In Visual Studios integrated terminal type…​

    ng serve -c openems-edge-dev

    If you receive an error message, that you have no rights to execute "ng serve", set Set-ExecutionPolicy RemoteSigned -Scope CurrentUser.

    The log shows:

    NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/

  2. Open a browser at http://localhost:4200