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:
This variant is suitable only for the open-source Webix edition distributed under General Public Licence (GPL).
To install the open-source version, you just need to run the next command:
npm install webix
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
When being asked for the credentials, use the data below:
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:
Back to top
// run samples without rebuilding node backend/index.js