Skip to main content

i4scada Knowledge Base

Visual Studio Code

Abstract

Learn more about the Microsoft Visual Studio Code involvement in management of the i4scada App Template.

Microsoft's Visual Studio Code is a free, open source, light-weight source code editor, ideal for web projects, like i4scada App Template based projects. However developing i4scada App Template projects in Visual Studio code implies some additional setup. This article will guide you through the process of setting up your development environment and the i4scada App Template for development with Visual Studio Code.

Prerequisites

The following software is required in order to use Visual Studio Code to develop i4scada App Template based applications:

  • Microsoft Visual Studio Code - use this download link to get Visual Studio Code.

  • i4scada App Template zip package - you can unzip the package in any folder of your choice but for a seamless development procedure, we recommend that you unzip it in a work folder inside the IIS directory (for example c:\inetpub\wwwroot\i4scada-app).

  • Visual Studio Code extensions* - HTML Snippets, Debugger for Chrome/Firefox/Edge. The extensions are installed from the Visual Studio Code's extension manager (available in the left-side toolbar or by pressing Ctrl + Shift+ X).

  • Modern web browser - Google Chrome, Mozilla Firefox, Microsoft Edge, or Internet Explorer 10 or newer.

  • Node.js - use this download link to get Node.js

  • Gulp.js - used for automating tasks like compressing JavaScript files and compiling JavaScript from TypeScript . Gulp is installed by executing the following NPM command in an elevated command prompt: npm install gulp g.

    The i4scada App Template comes with predefined Gulp.js tasks, some of the more often used being:

    • watch - monitors the application files and automatically triggers the build process whenever a file has changed

    • build - runs a complete build of all bundles

    • clean - deletes all generated bundles

    • publish-app - runs a complete build and gathers all generated files in the /releases/[version]/app folder.

    • publish-standalone - runs a complete build and gathers a minimum set of files required to run a standalone application in the /releases/[version]/standalone folder.

Note

Visual Studio Code extensions are not required for developing i4scada App Template based applications but can provide a lot of help while coding and debugging.

In this section: