Installation

DevExtreme has the following dependencies.

Optionally, you can use DevExtreme with the following MVVM frameworks.

NOTE
DevExtreme provides a CTP version of the Angular 2 integration module. This version is available for your evaluation, yet it has certain issues that are in the process of being addressed. Keep track of them or post a newly-found one on this GitHub page.

Some functionality relies on additional libraries.

  • Globalize version 1.x
    Allows you to localize your app and use custom date, number and currency formatting.

  • Webpack version 1.13 (available via npm only)
    Allows you to create your own DevExtreme modules that include only what you need.

This article shows where to download and how to install DevExtreme and its required libraries.

Local Scripts

You can find all the required files in your DevExtreme package. Place the Lib folder of this package into the folder with your application. Then, depending on the library or framework you use in your app, link the needed files within the <head> tag of your index page in the given order.

  • jQuery

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="/js/dx.viz-web.js"></script> -->
    <!-- <script type="text/javascript" src="/js/dx.viz.js"></script> -->
  • Knockout

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
    <!-- The Knockout library -->
    <script type="text/javascript" src="/js/knockout-3.4.0.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="/js/dx.viz-web.js"></script> -->
    <!-- <script type="text/javascript" src="/js/dx.viz.js"></script> -->
  • AngularJS

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
    <!-- The AngularJS library -->
    <script type="text/javascript" src="/js/angular.min.js"></script>
    <script type="text/javascript" src="/js/angular-sanitize.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="/js/dx.viz-web.js"></script> -->
    <!-- <script type="text/javascript" src="/js/dx.viz.js"></script> -->

Localized apps and apps that use custom date, number or currency formatting require the Globalize library as well.

HTML
<!-- Globalize scripts -->
<script type="text/javascript" src="/js/cldr.min.js"></script>
<script type="text/javascript" src="/js/cldr/event.min.js"></script>
<script type="text/javascript" src="/js/cldr/supplemental.min.js"></script>
<script type="text/javascript" src="/js/globalize.min.js"></script>
<script type="text/javascript" src="/js/globalize/message.min.js"></script>
<script type="text/javascript" src="/js/globalize/number.min.js"></script>
<script type="text/javascript" src="/js/globalize/currency.min.js"></script>
<script type="text/javascript" src="/js/globalize/date.min.js"></script>
NOTE
Globalize scripts need to go before DevExtreme scripts.

CDN Services

Instead of delivering DevExtreme and other required libraries with your app, you can load them from Content Delivery Network (CDN) services. Depending on the library or framework you use in your app, link the needed resources within the <head> tag of your index page in the given order.

  • jQuery

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz-web.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz.js"></script> -->
  • Knockout

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"></script>
    <!-- The Knockout library -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz-web.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz.js"></script> -->
  • AngularJS

    HTML
    <!-- DevExtreme dependencies -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"></script>
    <!-- The AngularJS library -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-sanitize.min.js"></script>
    <!-- A DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz-web.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/16.1.13/js/dx.viz.js"></script> -->

Localized apps and apps that use custom date, number or currency formatting require the Globalize library as well.

HTML
<!-- Globalize scripts -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.5/cldr.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.5/cldr/event.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.5/cldr/supplemental.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize/message.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize/number.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize/currency.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/1.0.0/globalize/date.js"></script>
NOTE
Globalize scripts need to go before DevExtreme scripts.

NuGet Package

When using Visual Studio, you can add the DevExtreme libraries to your application using the DevExtreme Web NuGet package. To install this package, run the following command in the Package Manager Console.

Install-Package DevExtreme.Web

The jQuery and Globalize packages, upon which DevExtreme depends, will be installed as well, but the Knockout and AngularJS packages will not. If you need them, install them individually. Note that Knockout and AngularJS are not supposed to be used together.

Install-Package knockoutjs
Install-Package AngularJS.Sanitize

Another way to install or update the DevExtreme Web package is to use the Manage NuGet Packages dialog in Visual Studio. You can find more information here.

After installing all the necessary packages, link the needed scripts within the <head> tag of your index page as shown in the Local Scripts article.

See Also

Bower Package

Whatever IDE you develop apps in, you can always add the DevExtreme libraries to your project using the devextreme Bower package. To install this package, open the console, navigate to your app folder and run one of the following commands depending on the DevExtreme package you need.

bower install devextreme-web#~16.1 --save // installs the DevExtreme Web package
bower install devextreme#~16.1 --save // installs the DevExtreme Complete package

The jQuery and Globalize packages, upon which DevExtreme depends, will be installed as well, but the Knockout and AngularJS packages will not. If you need them, install them individually. Note that Knockout and AngularJS are not supposed to be used together.

bower install knockout
bower install angular-sanitize

After installation is completed, you can find all the libraries in the bower_components folder. Link them within the <head> tag of your index page.

HTML
<script type="text/javascript" src="/bower-components/jquery/dist/jquery.min.js"></script>
. . .
<script type="text/javascript" src="/bower-components/devextreme/js/dx.all.js"></script>
<!-- <script type="text/javascript" src="/bower-components/devextreme-web/js/dx.viz-web.js"></script> -->
<!-- <script type="text/javascript" src="/bower-components/devextreme-web/js/dx.viz.js"></script> -->
See Also

Add Bower Packages to a Visual Studio 2015 ASP.NET 5 Application

The Visual Studio 2015 MVC 5 Web Application template supports Bower out of the box. Follow the steps below to add the DevExtreme libraries to an MVC 5 application using Bower.

  1. Open the bower.json file located in the root folder of your application project.

  2. Find the dependencies section in this file, put a comma after the last entry and copy-paste one of the following lines depending on the DevExtreme package you need.

    "devextreme-web": "~16.1", // for restoring the DevExtreme Web package
    "devextreme": "~16.1" // for restoring the DevExtreme Complete package

    Wait a few seconds until the libraries are loaded. DevExtreme scripts will be located in the wwwroot/lib/devextreme-web or wwwroot/lib/devextreme folder.

  3. Link the needed libraries within the <head> tag of your index page.

    HTML
    <script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
    . . .
    <script type="text/javascript" src="/lib/devextreme/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="/lib/devextreme-web/js/dx.viz-web.js"></script> -->
    <!-- <script type="text/javascript" src="/lib/devextreme-web/js/dx.viz.js"></script> -->
NOTE
The Knockout and AngularJS libraries are not included in the DevExtreme Bower package or its dependencies.

npm Package

DevExtreme is available through the npm package manager. To install the DevExtreme package, run the following command.

npm install devextreme
NOTE
npm ver. 3 will not install the DevExtreme dependencies automatically. Run the following commands to install them manually.
// Required by DevExtreme
npm install jquery@2.2.3

// Optional: allow you to use the MVVM approach
npm install knockout@3.4
npm install angular@1
npm install angular-sanitize@1

// Optional: enable you to localize your app
npm install globalize@1
npm install cldr-data

// Optional: enables you to create DevExtreme modules
npm install webpack@1.13

After installation is completed, you can find all the libraries in the node_modules folder. Link them within the <head> tag of your index page.

HTML
<script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>

<!-- Reference either Knockout or AngularJS, if you do -->
<script type="text/javascript" src="/node_modules/knockout/build/output/knockout-latest.js"></script>
<script type="text/javascript" src="/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="/node_modules/angular/angular-sanitize.min.js"></script>

<script type="text/javascript" src="/node_modules/cldrjs/dist/cldr.min.js"></script>
<script type="text/javascript" src="/node_modules/cldrjs/dist/cldr/event.min.js"></script>
<script type="text/javascript" src="/node_modules/cldrjs/dist/cldr/supplemental.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize/message.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize/number.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize/currency.min.js"></script>
<script type="text/javascript" src="/node_modules/globalize/dist/globalize/date.min.js"></script>

<script type="text/javascript" src="/node_modules/devextreme/dist/js/dx.all.js"></script>
<!-- <script type="text/javascript" src="/node_modules/devextreme/dist/js/dx.viz-web.js"></script> -->
<!-- <script type="text/javascript" src="/node_modules/devextreme/dist/js/dx.viz.js"></script> -->
See Also
  • npm Documentation - solves any difficulties you may encounter working with npm.
  • Modularity - shows how you can create your own DevExtreme module that includes only what you need.