DevExtreme CLI

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

• Installation
• Add DevExtreme to an Existing Application
  • Angular
• DevExtreme Application
  • Angular
  • Command Line Arguments
• Theme Builder
  • One-off Usage
  • Global package usage
  • Command Line Arguments
  • Examples
• License
• Support

Installation

> npm i -g devextreme-cli

Alternatively, you can execute DevExtreme CLI commands by using npx.

Add DevExtreme to an Existing Application

Angular

Add DevExtreme to an Angular application (follow this link for more information):

Without global package usage

> npx -p devextreme-cli devextreme add devextreme-angular

Global package usage

> devextreme add devextreme-angular

DevExtreme Application

Angular

Without global package usage

Create a new DevExtreme application:

> npx -p devextreme-cli devextreme new angular-app app-name [--layout][--empty]

Add the DevExtreme layout template to an Angular application (follow this link for more information):

> npx -p devextreme-cli devextreme add angular-template [--layout][--empty][--resolve-conflicts]

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

> npx -p devextreme-cli devextreme add view view-name [--icon]

Global package usage

Create a new DevExtreme application:

> devextreme new angular-app app-name [--layout][--empty]

Add the DevExtreme layout template to an Angular application (follow this link for more information):

> devextreme add angular-template [--layout][--empty][--resolve-conflicts]

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

> devextreme add view view-name [--icon]

Command line arguments

• --layout – Specifies the type of a DevExtreme layout to add (default: side-nav-outer-toolbar) Available values:

  • side-nav-outer-toolbar
  • side-nav-inner-toolbar

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

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

  • createNew
  • override

• --icon – Specifies the view's icon name (default: folder) You can choose the icon name from the icon library

ThemeBuilder

One-off usage

Build a custom color scheme:

> npx -p devextreme-cli devextreme build-theme [--base-theme][--input-file][--make-swatch][--output-file][--output-color-scheme]

Export theme variables as a less/scss file:

> 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:

> npx -p devextreme-cli devextreme export-theme-meta [--base-theme][--input-file][--output-file][--base]

Global package usage

Build a custom color scheme:

> devextreme build-theme [--base-theme][--input-file][--make-swatch][--output-file][--output-color-scheme][--help]

Export theme variables as a less/scss file:

> devextreme export-theme-vars [--base-theme][--input-file][--output-format][--output-file][--base][--help]

Export theme variables as a json metadata file:

> devextreme export-theme-meta [--base-theme][--input-file][--output-file][--base][--help]

Command line arguments

• --base-theme – Specifies a base theme’s name (the default value is generic.light)

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

• --output-file – Specifies the output file name

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

• --output-color-scheme – Specifies the custom color scheme name (the default value is custom-scheme)

• --make-swatch – If present, 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

The following command generates a new custom color swatch using Generic Dark as a base theme:

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

The following command generates a new pink color scheme based on Material Blue Light theme using constants from pink.json file:

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

The following command exports base variables for Generic Carmine theme in LESS format:

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

License

Familiarize yourself with the DevExtreme License. Free trial is available!

DevExtreme CLI is released as a MIT-licensed (free and open-source) add-on to DevExtreme.

Support

Feel free to ask questions, share your ideas and report bugs using DevExpress Support Center.