This article tells how to prepare the workspace for developing with Webix and lists all available ways of installing the library:
For the simplest Webix app, you need just an HTML file (HTML5 doctype recommended) with:
The lib package contains two versions of Webix JS file:
All the coding can be done in any text editor (Sublime, Visual Studio Code, etc.), optionally you can enable code completion.
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).
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/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.
You can get the package locally by:
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.
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