DevExtreme React - Link Modules

DevExtreme comes in pre-assembled bundles. dx.viz.js includes Charts, Gauges, Funnel, VectorMap, and other data visualization widgets. dx.web.js includes Grids, Scheduler, Form, and various editors. dx.viz-web.js and dx.all.js compile the previous two bundles. Bundles that include a particular widget are listed on the widget's overview page in the API reference.

Alternatively, you can use DevExtreme modules to import only the functionality you require. Unlike the bundles, modules are compact and can be loaded on demand. This optimizes memory consumption and speeds up your application.

You can create a smaller bundle from modules using Webpack or load modules using jspm or RequireJS.

Use Webpack

First, ensure the Webpack is installed globally. If not, execute the following command. 

npm install webpack -g

Install the DevExtreme package to the directory where you wish to store the files. 

npm install devextreme

To link up the modules to your application using Webpack, begin by defining the configuration object.

JavaScript
var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

Link the bundle script file to your HTML page.

HTML
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>

Add themes to your application.

HTML
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />

Create an entry script of your application. For example, it can specify required modules.

JavaScript
var $ = require('jquery');
var dialog = require('devextreme/ui/button');
...

Then, create the bundle.

webpack
NOTE
Check the supported versions of 3rd-party libraries. For details, see Integration with 3rd-Party Libraries and Frameworks.

The example below demonstrates how to create an application with a single button using modules, and how to configure Webpack to pick up and bundle all the required scripts to your application.

jQuery

You can download the example from GitHub. To use it, follow the instructions on GitHub.

webpack.config.js

JavaScript
var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

index.js

JavaScript
var $ = require('jquery');
var dialog = require('devextreme/ui/dialog');

require('devextreme/ui/button');

$("#myButton").dxButton({
    text: "Say 'Hello world'",
    onClick: function() {
        dialog.alert('Hello world!', '', false);
    }
});

index.html

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with Webpack and Knockout example</title>
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div id="myButton"></div>
  </div>
  <!-- Include the bundle script -->
  <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>

</html>
AngularJS
NOTE
To use AngularJS and DevExtreme widget modules with Webpack, load the DevExtreme integration and angular modules.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

webpack.config.js

JavaScript
var path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    }
};

index.js

JavaScript
var angular = require('angular');
var dialog = require('devextreme/ui/dialog');

require('devextreme/integration/angular');
require('devextreme/ui/button');

var myApp = angular.module('myApp', ['dx']);
myApp.controller("myController", function($scope) {
  $scope.buttonOptions = {
    text: "Say 'Hello world'",
    onClick: function() {
      dialog.alert('Hello world!', '', false);
    }
  };
});

angular.bootstrap(document, ['myApp']);

index.html

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with Webpack and AngularJS example</title>
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
</head>

<body>
  <div ng-controller="myController">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
      <div dx-button="buttonOptions"></div>
    </div>
  </div>
  <!-- Include the bundle script -->
  <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>

</html>
Knockout
NOTE
To use KnockoutJS and DevExtreme widget modules with Webpack, load the DevExtreme integration module.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

webpack.config.js

JavaScript
var path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

index.js

JavaScript
var ko = require('knockout');
var dialog = require('devextreme/ui/dialog');

require('devextreme/integration/knockout');
require('devextreme/ui/button');

var viewModel = {
    buttonOptions: {
        text: "Say 'Hello world'",
        onClick: function() {
            dialog.alert('Hello world!', '', false);
        }
    }
};
ko.applyBindings(viewModel);

index.html

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with Webpack and Knockout example</title>
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div data-bind="dxButton: buttonOptions"></div>
  </div>
  <!-- Include the bundle script -->
  <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>

</html>

Use jspm

First, install jspm in your application folder. For detailed information on installing, see the jspm documentation.

npm install jspm
NOTE
Install the DevExtreme package with the help of jspm.
jspm install npm:devextreme

To link up the modules to your application using jspm, first add links to the library and then the configuration file to your application.

HTML
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

Create an entry script of your application. For example, it can specify the required modules.

JavaScript
import $ from 'jquery';
import 'devextreme/ui/button';
...

Then, in the HTML page, import your application's main entry point.

HTML
<script>
    System.import('./index.js');
</script>
NOTE
Check the supported versions of 3rd-party libraries. For details, see Integration with 3rd-Party Libraries and Frameworks.

The example below demonstrates how to create an application with a single button using the modules from a local directory.

jQuery

You can download the example from GitHub. To use it, follow the instructions on GitHub.

index.js

JavaScript
import 'devextreme/dist/css/dx.common.css!';
import 'devextreme/dist/css/dx.light.css!';

import $ from 'jquery';
import 'devextreme/ui/button';
import dialog from 'devextreme/ui/dialog';

$("#myButton").dxButton({
  text: "Say 'Hello world'",
  onClick: function() {
    dialog.alert('Hello world!', '', false);
  }
});

index.html

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>DevExtreme with Jspm and jQuery example</title>
        <!--Include SystemJS loader and the config file-->
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
    </head>
    <body>
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
            <div id="myButton"></div>
        </div>
        <!--Import of the application main entry point-->
         <script>
            System.import('./index.js');
        </script>
    </body>
</html>
AngularJS
NOTE
To use AngularJS and DevExtreme widget modules with RequireJS, you should load the DevExtreme integration and angular modules.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

index.js

JavaScript
import 'devextreme/dist/css/dx.common.css!';
import 'devextreme/dist/css/dx.light.css!';

import angular from 'angular';
import 'devextreme/integration/angular';
import dialog from 'devextreme/ui/dialog';
import 'devextreme/ui/button';

var myApp = angular.module('myApp', ['dx']);
myApp.controller("myController", function($scope) {
  $scope.buttonOptions = {
    text: "Say 'Hello world'",
    onClick: function() {
      dialog.alert('Hello world!', '', false);
    }
  };
});

angular.bootstrap(document, ['myApp']);

index.html

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>DevExtreme with Jspm and AngularJS example</title>
        <!--Include SystemJS loader and the config file-->
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
    </head>
    <body>
        <div ng-controller="myController">
            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
            <div dx-button="buttonOptions"></div>
            </div>
        </div>
        <!--Import of the application main entry point-->
         <script>
            System.import('./index.js');
        </script>
    </body>
</html>
Knockout
NOTE
To use KnockoutJS and DevExtreme widget modules with RequireJS, load the DevExtreme integration module.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

index.js

JavaScript
import 'devextreme/dist/css/dx.common.css!';
import 'devextreme/dist/css/dx.light.css!';

import ko from 'knockout';
import 'devextreme/integration/knockout';
import dialog from 'devextreme/ui/dialog';
import 'devextreme/ui/button';

var viewModel = {
    buttonOptions: {
        text: "Say 'Hello world'",
        onClick: function() {
        dialog.alert('Hello world!', '', false);
        }
    }
};
ko.applyBindings(viewModel);

index.html

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>DevExtreme with Webpack and Knockout example</title>
        <!--Include SystemJS loader and the config file-->
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script>
    </head>
    <body>
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
            <div data-bind="dxButton: buttonOptions"></div>
        </div>
        <!--Import of the application main entry point-->
        <script>
            System.import('./index.js');
        </script>
    </body>
</html>

Use RequireJS

First, install RequireJS to your application folder.

npm install requirejs

Then, install the DevExtreme package. 

npm install devextreme

DevExtreme modules are defined using the CommonJS format. RequireJS does not support this format. Thus, convert DevExtreme modules to the AMD format before using them with RequireJS. Use the RequireJS conversion tool to convert modules. Follow these steps to convert the modules.

  • Add the devextreme package to the 'node_modules/devextreme' directory

    npm i devextreme

  • Add global 'r_js' command

    npm i r.js -g

  • Convert the devextreme package and save it to the 'devextreme_amd' directory

    r_js -convert node_modules/devextreme devextreme_amd

To link up the modules to your application using RequireJS, begin by adding themes to your application.

HTML
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />

Then, link RequireJS and define the configuration object.

HTML
<script src="node_modules/requirejs/require.js"></script>
NOTE
Check the supported versions of 3rd-party libraries. For details, see Integration with 3rd-Party Libraries and Frameworks.

The example below demonstrates how to create an application with a single button using the modules from a local directory.

jQuery

You can download the example from GitHub. To use it, follow the instructions on GitHub.

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with RequireJS and jQuery example</title>

  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
  <!-- Include RequireJS -->
  <script src="node_modules/requirejs/require.js"></script>
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div id="myButton"></div>
  </div>

  <script>
    require.config({
      paths: {
        "jquery": "node_modules/jquery/dist/jquery",
        // The path where the devExtreme modules are located.
        "devextreme": "node_modules/devextreme"
      }
    });
    // Loads the required scripts.
    require(["jquery", "devextreme/ui/dialog", "devextreme/ui/button"], function($, dialog) {
      $("#myButton").dxButton({
        text: "Say 'Hello world'",
        onClick: function() {
          dialog.alert('Hello world!', '', false);
        }
      });
    });
  </script>
</body>
</html>
AngularJS
NOTE
To use AngularJS and DevExtreme widget modules with RequireJS, load the DevExtreme integration and angular modules.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with RequireJS and AngularJS examples</title>

  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
  <!-- Include RequireJS -->
  <script src="node_modules/requirejs/require.js"></script>
</head>

<body>
  <div ng-controller="myController">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
      <div dx-button="buttonOptions"></div>
    </div>
  </div>
  <script>
    require.config({
      paths: {
        "jquery": "node_modules/jquery/dist/jquery",
        "angular": "node_modules/angular/angular",
        // The path where the devExtreme modules are located.
        "devextreme": "node_modules/devextreme"
      },
      shim: {
        "angular": {
          deps: ["jquery"],
          exports: 'angular'
        },
        "devextreme/integration/angular": {
          deps: ['angular']
        }
      }
    });
    // Loads the required scripts. Note that for correct integration with AngularJS,
    // you should load the DevExtreme integration module.
    require(["angular", "devextreme/ui/dialog", "devextreme/integration/angular", "devextreme/ui/button"], function(angular, dialog) {
      var myApp = angular.module('myApp', ['dx']);
      myApp.controller("myController", function($scope) {
        $scope.buttonOptions = {
          text: "Say 'Hello world'",
          onClick: function() {
            dialog.alert('Hello world!', '', false);
          }
        };
      });
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>

</html>
Knockout
NOTE
To use KnockoutJS and DevExtreme widget modules with RequireJS, load the DevExtreme integration module.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

HTML
<!DOCTYPE html>
<html>

<head>
  <title>DevExtreme with RequireJS and Knockout examples</title>

  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
  <!-- Include RequireJS -->
  <script src="node_modules/requirejs/require.js"></script>
</head>

<body>
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
    <div data-bind="dxButton: buttonOptions"></div>
  </div>
  <script>
    require.config({
      paths: {
        "jquery": "node_modules/jquery/dist/jquery",
        "knockout": "node_modules/knockout/build/output/knockout-latest",
        // The path where the DevExtreme modules are located.
        "devextreme": "node_modules/devextreme"
      }
    });
    // Loads the required scripts. Note that for correct integration with KnockoutJS,
    // you should load the devExtreme integration module.
    require(["knockout", "devextreme/ui/dialog", "devextreme/integration/knockout", "devextreme/ui/button"], function(ko, dialog) {
      viewModel = {
        buttonOptions: {
          text: "Say 'Hello world'",
          onClick: function() {
            dialog.alert('Hello world!', '', false);
          }
        }
      };
      ko.applyBindings(viewModel);
    });
  </script>
</body>

</html>
NOTE
We recommend you use other approaches (for example, webpack or jspm) for better productivity.