Home Original page

Webix Installation Guide of Getting Started, Start Coding with Webix Webix Docs

Beginner

This article tells how to prepare the workspace for developing with Webix and lists all available ways of installing the library:

Preparing Workspace

For the simplest Webix app, you need just an HTML file (HTML5 doctype recommended) with:

  • included library sources, JS and CSS files fetched by any of the ways described below
  • Javascript part or an included JS file with the code of your Webix app.

The lib package contains two versions of Webix JS file:

  • full (webix.js) - human-readable code with debugging options
  • minified (webix.min.js) - light-weight code for production.

All the coding can be done in any text editor (Sublime, Visual Studio Code, etc.), optionally you can enable code completion.

CDN links

You can directly set links to webix.js and webix.css files located in Webix CDN:

<!DOCTYPE HTML>
<html>
    <head>
    <link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css"
         type="text/css"> 
    <script src="https://cdn.webix.com/edge/webix.js" type="text/javascript"/> 
    </head>
</html>

This variant is suitable only for the open-source Webix edition distributed under General Public Licence (GPL).

Installing with NPM

The Webix library can be installed via NPM, which allows you to get updates for both open-source and commercial (PRO) Webix editions.

GPL edition

To install the open-source version, you just need to run the next command:

npm install webix

PRO edition

If you have a Webix PRO, you can install it via NPM.

You need to register a developer in your Webix Clients Area (the Users section), then the registered developer will get credentials.

Run the following commands to log in to our private NPM server:

npm config set @xbs\:registry https://npm.webix.com
npm login --registry=https://npm.webix.com --scope=@xbs --auth-type=legacy

When being asked for the credentials, use the data below:

User:
Password:

After that you can use common npm commands to install Webix PRO and Complex Widgets according to your license:

npm i @xbs/webix-pro
 
npm i @xbs/chat 
npm i @xbs/diagram 
npm i @xbs/docmanager
npm i @xbs/editor
npm i @xbs/filemanager
npm i @xbs/gantt
npm i @xbs/kanban
npm i @xbs/pivot
npm i @xbs/query
npm i @xbs/reports 
npm i @xbs/scheduler
npm i @xbs/spreadsheet
npm i @xbs/usermanager
 
// deprecated yet still available for download
npm i @xbs/querybuilder

After that you will be able to install Webix PRO and Complex widgets according to your license. Updates will be available during the whole licensing period.

Downloading Webix Package

You can get the package locally by:

Enabling Autocompletion

You can enable suggestions and automatic completion for Webix methods in text editors, e.g. Visual Studio Code.

If you import Webix as ES6 code, the autocompletion will work automatically:

import * as webix from "@xbs/webix-pro";
 
const t = webix.uid(); // will show the signature and types of Webix methods

If you use Webix as global, you can use the following reference instruction (aka triple-slash directive):

<reference path="../../node_modules/@xbs/webix-pro/types/webix.global.d.ts" />
 
const t = webix.uid(); // will show the signature and types of Webix methods

The directive will instruct the compiler to include the TypeScript type definitions to enable autocompletion of code.

Note that the reference instruction must be at the beginning of the file or after other reference instructions of comments. If it is preceded by a statement or declaration, it is ignored as any other comment.

Running Package Samples Locally

After downloading Webix package there are 3 ways to run package samples locally. The simplest way is to navigate to the root directory (core) and open the samples folder. Find the desired file and open it with a double-click. The sample will be opened in a new browser tab.

Running samples on a local server

You can run package samples on a local server (e.g Apache). Set the Webix folder as the root directory of the local server and launch the server. In general a local server runs at localhost.

Running samples on a development server

To be able to modify samples and see the corresponding changes you should run them on a dev server. Go to the Webix root folder, install the necessary dependencies and start the server as:

// navigate to the root directory
cd core
 
// install dependencies
yarn install //or npm install
 
// start dev server
yarn server //or npm run server

Note, that to run web socket samples you should use the following command:

// run samples without rebuilding
node backend/index.js

Back to top