All docs
V19.1
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

DevExtreme CLI

DevExtreme CLI is a set of command-line tools to be used with the DevExtreme controls library.

Installation

npm i -g devextreme-cli

Alternatively, you can use npx to execute DevExtreme CLI commands without installing the CLI globally. Examples in this article illustrate both approaches.

NOTE
npx is available with npm v5.2 and later. If you have an earlier version, upgrade npm.

Add DevExtreme to an Existing Application

Angular

devextreme add devextreme-angular
// ===== or without installing the DevExtreme CLI =====
npx -p devextreme-cli devextreme add devextreme-angular

This command does the following:

  • Adds the devextreme and devextreme-angular npm packages to the dependencies in package.json and installs their latest versions.
  • References the dx.common.css and dx.light.css DevExtreme stylesheets in angular.json.
  • Registers the JSZip library in tsconfig.json.

These steps are explained in the Add DevExtreme to an Angular CLI Application article.

Once the command is executed, import DevExtreme modules.

React

devextreme add devextreme-react
// ===== or without installing the DevExtreme CLI =====
npx -p devextreme-cli devextreme add devextreme-react

This command does the following:

  • Adds the devextreme and devextreme-react npm packages to the dependencies in package.json and installs their latest versions.
  • Imports the dx.common.css and dx.light.css DevExtreme stylesheets in src/App.js.

These steps are explained in the Add DevExtreme to an React Application article.

Once the command is executed, import DevExtreme components.

Vue

devextreme add devextreme-vue
// ===== or without installing the DevExtreme CLI =====
npx -p devextreme-cli devextreme add devextreme-vue

This command does the following:

  • Adds the devextreme and devextreme-vue npm packages to the dependencies in package.json and installs their latest versions.
  • Imports the dx.common.css and dx.light.css DevExtreme stylesheets in src/main.js.

These steps are explained in the Installation article.

Once the command is executed, you can use DevExtreme components.

DevExtreme Application

Angular

Create a new DevExtreme Angular application:

devextreme new angular-app app-name [--layout][--empty]
// ===== or without installing the DevExtreme CLI =====
npx -p devextreme-cli devextreme new angular-app app-name [--layout][--empty]

Add the DevExtreme layout template to an existing Angular application:

devextreme add angular-template [--layout][--empty][--resolve-conflicts]
// ===== or =====
npx -p devextreme-cli devextreme add angular-template [--layout][--empty][--resolve-conflicts]

Add a view to an Angular application that uses the DevExtreme layout template:

devextreme add view view-name [--icon]
// ===== or =====
npx -p devextreme-cli devextreme add view view-name [--icon]

React

Create a new DevExtreme React application that uses the DevExtreme layout template:

devextreme new react-app app-name [--layout][--empty]
// ===== or without installing the DevExtreme CLI =====
npx -p devextreme-cli devextreme new react-app app-name [--layout][--empty]

Add a view to the DevExtreme React application:

devextreme add view view-name [--icon]
// ===== or =====
npx -p devextreme-cli devextreme add view view-name [--icon]

Vue

Create a new DevExtreme Vue application that uses the DevExtreme layout template:

devextreme new vue-app app-name [--layout][--empty]
// ===== or without installing the DevExtreme CLI =====
npx -p devextreme-cli devextreme new vue-app app-name [--layout][--empty]

Add a view to the DevExtreme Vue application:

devextreme add view view-name [--icon]
// ===== or =====
npx -p devextreme-cli devextreme add view view-name [--icon]

Command-Line Arguments

  • --layout
    Specifies the DevExtreme layout to add. Available values:

    • side-nav-outer-toolbar (default)
    • side-nav-inner-toolbar

    Both layouts are illustrated in this article.

  • --empty
    Specifies whether to skip sample views generation (default: false).

  • --icon
    Specifies the view's icon (default: folder). You can choose an icon from the DevExtreme icon library.

  • --resolve-conflicts (Angular only)
    Specifies whether to override the existing app.component or create a component with another name. Available values:

    • createNew (default)
    • override (NOTE: all changes in the overridden files will be lost)

    If you created a new component, register it in app.module.ts:

    app.module.ts
    // ...
    import { AppComponent } from './app1.component';
    // ...
See Also

ThemeBuilder

The ThemeBuilder UI is a tool that allows you to create custom themes in the browser; its CLI counterpart allows you to do the same via commands.

Build a custom color scheme:

devextreme build-theme [--base-theme][--input-file][--make-swatch][--output-file][--output-color-scheme][--help]
// ===== or without installing the DevExtreme CLI =====
npx -p devextreme-cli devextreme build-theme [--base-theme][--input-file][--make-swatch][--output-file][--output-color-scheme]

Export theme variables as a .less or .scss file:

devextreme export-theme-vars [--base-theme][--input-file][--output-format][--output-file][--base][--help]
// ===== or =====
npx -p devextreme-cli devextreme export-theme-vars [--base-theme][--input-file][--output-format][--output-file][--base]

Export theme variables as a .json metadata file:

devextreme export-theme-meta [--base-theme][--input-file][--output-file][--base][--help]
// ===== or =====
npx -p devextreme-cli devextreme export-theme-meta [--base-theme][--input-file][--output-file][--base]

Command-Line Arguments

  • --base-theme
    Specifies a base theme's name (default: generic.light).

  • --input-file
    Specifies the name of the file that contains input data (a .json file with metadata or a .less or .scss file with Bootstrap variables).

  • --output-file
    Specifies the output file name.

  • --output-format
    Specifies the format of the output variables: less or scss (default: less or the extension extracted from the --output-file value (if it contains any)).

  • --output-color-scheme
    Specifies the custom color scheme name (default: custom-scheme).

  • --make-swatch
    If present, creates a color swatch, i.e., adds a CSS scope to each CSS rule (.dx-swatch-xxx, where xxx is the value from the --output-color-scheme parameter).

  • --base
    Exports only base variables which are used to produce the derived variables.

Examples

Generate a new custom color swatch that uses Generic Dark as a base theme:

npx -p devextreme-cli devextreme build-theme --base-theme="generic.dark" --make-swatch --output-color-scheme="custom"

Generate a new pink color scheme based on the Material Blue Light theme, use constants from the pink.json file:

npx -p devextreme-cli devextreme build-theme --base-theme="material.blue.light" --input-file="pink.json" --output-color-scheme="pink"

Export base variables for the Generic Carmine theme in LESS format:

npx -p devextreme-cli devextreme export-theme-vars --base-theme="generic.carmine" --output-format="less" --base