A command-line interface for DevExtreme
Clone or download
Latest commit 03021fd Dec 20, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
commands Get rid of workaround (#57) Dec 4, 2018
utility Update lint and fix code (#53) Nov 9, 2018
.eslintrc Update lint and fix code (#53) Nov 9, 2018
.gitignore Initial Aug 16, 2018
LICENSE Add license, update package (#31) Oct 5, 2018
README.md Update readme (#46) Oct 30, 2018
index.js Update lint and fix code (#53) Nov 9, 2018
package.json Prepare 1.0.1 (#58) Dec 20, 2018

README.md

DevExtreme CLI

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

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.