Using with Webpack

Since Webix Jet 3.0, the default bundler we use in demos is Vite. Still, you can continue using Webpack, click here to see the demo.

There are also some cases when you might want to add some extra configuration for your app. You can change the default Webpack configuration and get the expected result.

Changing View Creation Logic

Use the views parameter to change the names of view modules inside your code.

For example, if the module you want to show is in a subfolder and you want to shorten the URL of the module, you can do it in the views parameter:

// myapp.js
import "./styles/app.css";
import {JetApp, EmptyRouter, HashRouter } from "webix-jet";

export default class MyApp extends JetApp{
    constructor(config){
        const defaults = {
            router     : BUILD_AS_MODULE ? EmptyRouter : HashRouter,
            debug     : !PRODUCTION,
            start     : "/top/layout",
            views: {
                "start" : "area.list" // load /views/area/list.js
            }
        };

        super({ ...defaults, ...config });
    }
}

if (!BUILD_AS_MODULE){
    webix.ready(() => new MyApp().render() );
}

In this example, list module is stored in the area subfolder in /views (/views/area/list.js). Later, you can show the view by the new name, e.g.:

// views/top
import {JetView} from "webix-jet";

export default class TopView extends JetView {
    config(){
        return {
            cols:[
                { view:"button", value:"start",
                  click:() => {
                    this.show("start");
                }},
                { $subview: true }
            ]
        };
    }
}

this in the button click handler refers to the current instance of a Jet view class [1].

Check out the demo >>

Configuring Webix Jet to Work with a Backend Server

These instructions are for the development stage. For production, see this.

Let's look at an example of configuring Webix Jet to work with the Apache Tomcat server.

Prerequisites:

There is a Java app on your Tomcat server, configured to your needs.
There is a Webix Jet app (you can use the jet-start package).

You need to let the Webix Jet app access the Java app. Set the proxy path in webpack.config.js. Replace this:

with this:

"http://localhost:9200" is the web path to the Java server side.

This configuration will make it possible to set the path to the server as:

This will load the data from "http://localhost:9200/mydata".

Both servers can be run separately and at the same time. The Webix Jet app will be able to communicate with the server-side code as they both are run by the same server.

Changing the Port of the Dev Server

You can change the default port 8080 to another port (e.g. 3010). You can do this by changing the package.json file.

Modify the "start" command in the package.json file:

// package.json
...
"scripts": { 
     ... 
     "start": "webpack-dev-server --port 3010"
}

Multiple Start Files

By default, the app is built with one start file (admin.js in this example):

To create multiple entry files, pass an object to entry in config. For output filenames, use the [name] substitution to ensure that each file has a unique name:

Turning Off Localization

If you do not want to localize the app and do not want to create an empty locales folder, you can change the Webpack config.

By default, Webpack tries to resolve the locales in sources/locales. Delete the jet-locales alias:

Next tell Webpack to ignore jet-locales while compiling the app. Use the IgnorePlugin for this:

Now the app will be compiled without the locales.

Changing Paths tor Locales and Views

By default, views and locales are stores in sources/views and sources/locales correspondingly. If you want your app structure to be different, you can change the paths to views and locales in the Webpack config file:

Developing Big App with Webpack

Starting with Webix Jet 3.0, the toolchain has been migrated to Vite. However, you can still use Webpack.

Modules and Large App Development

Webix Jet toolchain has been updated to support such kind of development (Starting with Webix Jet 1.5). For new projects, just use the jet-start pack.

To update existing projects:

check webpack.config.js against the latest one
update the scripts section in package.json.

CLI commands:

Command What it does

Command	What it does
`npm run module` or `yarn module`	builds a standalone module, which is stored in dist/module/ (a JS and a CSS files); the module doesn't include webix-jet
`npm run standalone` or `yarn standalone`	builds a standalone module, which is stored in dist/full/ (a JS and a CSS files); the module includes all dependencies

npm run module or yarn module

builds a standalone module, which is stored in dist/module/ (a JS and a CSS files); the module doesn't include webix-jet

npm run standalone or yarn standalone

builds a standalone module, which is stored in dist/full/ (a JS and a CSS files); the module includes all dependencies

When the module is built, you can copy it to a subfolder of some other app, e.g. sources/modules/.

When to use module

If you want to use the module as a part of another Webix Jet app:

use npm run module or yarn module
import the JS and CSS files of your module from the subfolder you have put them into and initialize the app:

// views/someview.js
import OtherApp from "modules/app-name";
import "modules/style.css";
...
config(){
    return {
        rows:[
            ToolbarView,
            new OtherApp({ app: this.app })
        ]
    };
}

Be sure to use webix-jet 3.0+

Modules are much more lightweight than bundles with dependencies. So if you plan to create a lot of app modules, compile them this way.

When to use standalone

If you want to use the module on a page without Webix Jet:

app.js should contain explicit import of all views:

export default class MyApp extends JetApp{
    constructor(config){
        const views = (name) => require("./views/"+name);
        const defaults = {
            /* ... */
            views,
            start   : "/top/start"
        };
        super({ ...defaults, ...config });
    }
}

use npm run standalone or yarn standalone

The compiled sources should be copied to the main application or published on npm. Otherwise, if the sources are simply imported from one project to another, Webpack will try to use different webix-jet instances, while only one instance will ensure correct initialization.

include the JS and CSS files of your module from the subfolder you have put them into:

<!-- index.html -->
<script src="modules/app-name.js"></script>
<link rel="stylesheet" type="text/css" href="modules/style.css">
<script>
    webix.ready(function(){
        const app = new appname.default();
        app.render(document.body);
    });
</script>

Instead of document.body you can use the ID of the target HTML container.

Standalone bundles include all dependencies (except webix.js), so they are more stable. However, the size of a bundle is much bigger than the size of a module.

Code Splitting

You can split your code into bundles and load them on demand, which can greatly influence the initial loading time of the application. Lazy loading of app code is possible in Webix Jet with the help of a custom app.views handler. Where you can import the bundle on demand [2].

// myapp.js
import "./styles/app.css";
import {JetApp, EmptyRouter, HashRouter } from "webix-jet";

export default class MyApp extends JetApp{
    constructor(config){
        const defaults = {
            router: BUILD_AS_MODULE ? EmptyRouter : HashRouter,
            debug: !PRODUCTION,
            start: "/top/layout",
            views: (name) => {
                if (name === "modules.clients") //sources/modules/
                    return import("modules/clients");

                // load all other modules with default strategy
                return name;
            }
        };

        super({ ...defaults, ...config });
    }
}

if (!BUILD_AS_MODULE){
    webix.ready(() => new MyApp().render() );
}

In webpack.config.js, you can define the chunk naming scheme (the chunkFilename property) in output:

// webpack.config.js
...
output: {
    ...
    filename: "[name].js",
    chunkFilename: "[name].bundle.js"
    // will be 'clients.bundle.js' in this case
}

Check out the demo >>

If you want to nest an app module into Webix layout, you should create a custom widget based on webix.ui.jetapp and wrap the app into it.

// sources/myapp.js
import {JetApp} from "webix-jet";
export default class MyApp extends JetApp {
    //app config
    constructor(){
        const defaults = {
            id     	: APPNAME,
			version	: VERSION,
            router  : BUILD_AS_MODULE ? EmptyRouter : HashRouter, //!
            debug   : !PRODUCTION,
            start   : "/top/start"
        };
        super({ ...defaults, ...config });
    }
}

if (!BUILD_AS_MODULE){
    webix.ready(() => new MyApp().render() );
}

// add this
webix.protoUI({
    name:"some-widget",
    app: MyApp
}, webix.ui.jetapp);

Make sure the app config includes the EmptyRouter.

Now you can run npm run standalone or yarn standalone to get a standalone bundle. Then you can copy the bundle to any subfolder of your app and use it:

<script src="module/app-name.js"></script>
<script>
    webix.ui({ view:"some-widget" })
</script>

This JetApp works as a widget and can be combined and sized like any other Webix UI widget.

Check out the demo >>

If you want to load custom widget code on demand, you can split your code and import the bundles with widget code when it is needed. For example, widgets can be imported in config() of a Jet view:

// views/statistics.js
import {JetView} from "webix-jet";
export default class StatisticsView extends JetView{
    config(){
        const widgets = import(/* webpackChunkName: "widgets" */ "modules/customgrid");
        return widgets.then(() => {

            return { rows:[
                { type:"header", template:"Sales 2018" },
                { view:"custom-grid" }
            ]};

        });
    }
}

This works for both custom Webix widgets and Jet apps as custom widgets.

Check out the demo >>

Importing Webix as Module

We strongly recommend you to include Webix as a script, e.g.:

<script type="text/javascript" src="//cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.webix.com/edge/webix.css">

But if you really need to include Webix as a module, you can do this in two ways.

Building a Huge Bundle of Webix and the App

Please note that this way is not recommended, as the resulting file is relatively big and will work better as a separate script, without bundling in the single app.js.

1. Make Webix available for all includes by adding the following section in webpack.config.js:

plugins: [
	new webpack.ProvidePlugin({
		// SET PATH TO WEBIX HERE
		webix: path.join(__dirname, "node_modules", "@xbs", "webix-pro")
	}),
	// ...
]

2. Import Webix:

import { JetApp } from "webix-jet";
import * as webix from "webix"; // use script !!!

export default class MyApp extends JetApp{
    constructor(config){
        const defaults = {
            id: APPNAME,
            version: VERSION,
            debug: !PRODUCTION,
            start: "/top",
            webix: webix
       	};
        super({ ...defaults, ...config });
    }
}

Troubleshooting

If you get can not resolve error in webpack, make sure you add the alias and the path to the lib in question in webpack.config.js. Check the docs.

PreviousUsing with Vite NextUsing Webix Jet without Vite or Webpack

Last updated 1 month ago

Webix Jet

Using with Webpack

Changing View Creation Logic

Configuring Webix Jet to Work with a Backend Server

Changing the Port of the Dev Server

Multiple Start Files

Turning Off Localization

Changing Paths tor Locales and Views

Developing Big App with Webpack

Modules and Large App Development

When to use module

When to use standalone

Code Splitting

Using Jet App as a Widget

Dynamic Widget Loading

Importing Webix as Module

Building a Huge Bundle of Webix and the App

Troubleshooting