# Kendo CLI

To install:

``` bash
npm install --global @progress/kendo-cli
```

## KendoReact Project Generator

> Kendo ♥ Next.js

To use ***KendoReact*** and create a new ***React*** project using ***Next.js***:

``` bash
# JavaScript with routing
npx kendo react create nextjs MyKendoApp --theme
# JavaScript without routing
npx kendo react create nextjs MyKendoApp --no-app
# TypeScript with routing
npx kendo react create nextjs MyKendoApp --ts
# TypeScript without routing
npx kendo react create nextjs MyKendoApp --ts --no-app
```

### Options

Language options:

- `--js` - Use JavaScript (default)
- `--ts` - Use TypeScript

Theme options:

- `--theme=default`
- `--theme=bootstrap`
- `--theme=material`
- `--theme=fluent`

Other:

- `--eslint` - Initialize with eslint config.
- `--no-app` - Initialize as **no** App Router project.
- `--no-src-dir` - Initialize without a `src/` directory.
- `--import-alias="@/*"` - Specify import alias to use.

### Build and Run

After the project is generated, navigate into the new directory, install packages, build and run:

``` bash
cd MyKendoApp
npm install
npm run dev
```

### KendoReact Project Generator Synopsis

```
kendo react create nextjs [name]

Create KendoReact app based on NextJS

Positionals:
  name  Name of the generated application.   [string] [default: "KendoReactApp"]

Options:
      --help              Show help                                    [boolean]
      --version           Show version number                          [boolean]
  -v, --verbose           Set verbosity level, e.g. -vvv sets verbosity to level
                          3. max 5.                         [count] [default: 1]
  -q, --quiet             Silence output as much as possible. Sets verbosity to
                          level 0.                    [boolean] [default: false]
      --javascript, --js  Initialize as a JavaScript project.
                                                      [boolean] [default: false]
      --typescript, --ts  Initialize as a TypeScript project.
                                                      [boolean] [default: false]
      --eslint            Initialize with eslint config.
                                                      [boolean] [default: false]
      --app               Initialize as an App Router project.
                                                       [boolean] [default: true]
      --src-dir           Initialize inside a `src/` directory.
                                                       [boolean] [default: true]
      --import-alias      Specify import alias to use (default "@/*").
                                                       [string] [default: "@/*"]
      --theme             Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material", "fluent"] [default: "default"]
```

> Kendo ♥ Vite

To use ***KendoReact*** and create a new ***React*** project using ***Vite***:

``` bash
# Create KendoReact app with Vite with theme option 
npx kendo react create nextjs MyKendoApp --theme=bootstrap

# Create KendoReact app with Vite with styling option
npx kendo react create nextjs MyKendoApp --styling=Sass
```

### Options

Styling options:

- `--styling=CSS` - Use CSS styling (default)
- `--styling=Sass` - Use Sass styling

Theme options:

- `--theme=default`
- `--theme=bootstrap`
- `--theme=material`
- `--theme=fluent`

```

kendo react create vite [name]

Create KendoReact app with Vite.

Positionals:
  name  Name of the generated application.   [string] [default: "KendoReactApp"]

Options:
      --help              Show help                                    [boolean]
      --version           Show version number                          [boolean]
  -v, --verbose           Set verbosity level, e.g. -vvv sets verbosity to level
                          3. max 5.                         [count] [default: 1]
  -q, --quiet             Silence output as much as possible. Sets verbosity to
                          level 0.                    [boolean] [default: false]
      --typescript, --ts  Initialize as a TypeScript project.
                                                      [boolean] [default: false]
      --styling           Styling language
                              [string] [choices: "CSS", "Sass"] [default: "CSS"]
      --theme             Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material", "fluent"] [default: "default"]
```

> Kendo ♥ Astro

To use ***KendoReact*** and create a new ***React*** project using ***Astro***:

``` bash
# Create KendoReact app with Astro with theme option 
npx kendo react create astro MyKendoApp --theme=bootstrap

# Create KendoReact app with Astro with styling option
npx kendo react create astro MyKendoApp --styling=Sass
```

### Options

Styling options:

- `--styling=CSS` - Use CSS styling (default)
- `--styling=Sass` - Use Sass styling

Theme options:

- `--theme=default`
- `--theme=bootstrap`
- `--theme=material`
- `--theme=fluent`

```
kendo react create astro [name]

Create KendoReact app with Astro.

Positionals:
  name  Name of the generated application.   [string] [default: "KendoReactApp"]

Options:
      --help              Show help                                    [boolean]
      --version           Show version number                          [boolean]
  -v, --verbose           Set verbosity level, e.g. -vvv sets verbosity to level
                          3. max 5.                         [count] [default: 1]
  -q, --quiet             Silence output as much as possible. Sets verbosity to
                          level 0.                    [boolean] [default: false]
      --typescript, --ts  Initialize as a TypeScript project.
                                                      [boolean] [default: false]
      --styling           Styling language
                              [string] [choices: "CSS", "Sass"] [default: "CSS"]
      --theme             Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material", "fluent"] [default: "default"]
```

## Kendo jQuery Project Generator

To use ***Kendo UI for jQuery*** and create a new ***jQuery*** project using ***our new project templates***:

1. ***Blank Template*** - A simple ASP.NET MVC project with no pages with included Kendo UI for jQuery scripts and stylesheets.

``` bash
# Create Kendo UI for jQuery app with Blank Template
npx kendo jquery create jba MyjQueryBlankApp 
```

2. ***Admin Template*** - A complex ASP.NET MVC application with multiple views which include a Task Dashboard, Products and Performance statistics as well as an Account Settings page (back-end is not included). The project showcases many Kendo UI for jQuery components, including Grid, Charts, and many navigational components.

```bash
# Create Kendo UI for jQuery app with Admin Template 
npx kendo jquery create jqa MyjQueryAdminApp
```

3. ***Dashboard Template** - An ASP.NET MVC project which mocks a Team Efficiency report, with a ListView component that contains team members, and a Scheduler and Chart components that represent task and performance information.

```bash
# Create Kendo UI for jQuery app with Dashboard Template
npx kendo jquery create jda MyjQueryDashboardApp
```

4. ***Dashboard Layout Template** - An ASP.NET MVC project that represents various data displayed through multiple Chart components, which are placed in a TileLayout.

```bash
# Create Kendo UI for jQuery app with Dashboard Layout Template
npx kendo jquery create jdla MyjQueryDashboardLayoutApp
```

5. ***Grid Template*** - An ASP.NET MVC project that demonstrates a simple Grid configuration.

```bash
# Create Kendo UI for jQuery app with Grid Template
npx kendo jquery create jga MyjQueryGridApp
```

6. ***Standard Template*** - An ASP.NET MVC project that showcases some of the navigational components in the Kendo UI for jQuery suite, such as PanelBar, Menu, TabStrip, and TreeView.

```bash
# Create Kendo UI for jQuery app with Standard Template
npx kendo jquery create jsa MyjQueryStandardApp
```

### Options

Theme options:

- `--theme=default`
- `--theme=bootstrap`
- `--theme=material`
- `--theme=fluent`

### Build and Run

After the project is generated, navigate into the new directory, install packages, build and run:

```bash
cd MyKendojQueryApp
npm install
npm start
```

### Kendo UI for jQuery  Project Generator Synopsis

```
kendo jquery create [template] [name] 

Create a new jQuery app.

Commands:
  kendo jquery create jqa [name]   Create jQuery Admin app
  kendo jquery create jba [name]   Create jQuery Blank app
  kendo jquery create jda [name]   Create jQuery Dashboard app
  kendo jquery create jdla [name]  Create jQuery Dashboard Layout app
  kendo jquery create jga [name]   Create jQuery Grid app
  kendo jquery create jsa [name]   Create jQuery Standard app

Options:
      --help     Show help                                             [boolean]
      --version  Show version number                                   [boolean]
  -v, --verbose  Set verbosity level, e.g. -vvv sets verbosity to level 3. max
                 5.                                         [count] [default: 1]
  -q, --quiet    Silence output as much as possible. Sets verbosity to level 0.
                                                      [boolean] [default: false]
      --theme    Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material", "fluent"] [default: "default"]                                                  
```

## Kendo Angular Project Generator

To use ***Kendo UI for Angular*** and create a new ***Angular*** project using ***our new project template***:

1. ***Blank Template*** - A simple Angular project with no pages with included Kendo UI for Angular scripts and stylesheets.

``` bash
# Create Kendo UI for Angular app with Blank Template
npx kendo angular create aba MyAngularBlankApp 
```

### Options

Theme options:

- `--theme=default`
- `--theme=bootstrap`
- `--theme=material`
- `--theme=fluent`

Swatch options:

- `--swatch=default-main`
- `--swatch=default-main-dark`
- `--swatch=default-nordic`
- `--swatch=default-purple`
- `--swatch=default-turquoise`
- `--swatch=default-ocean-blue`
- `--swatch=default-ocean-blue-a11y`
- `--swatch=fluent-main`
- `--swatch=fluent-main-dark`
- `--swatch=bootstrap-main`
- `--swatch=bootstrap-main-dark`
- `--swatch=bootstrap-nordic`
- `--swatch=bootstrap-urban`
- `--swatch=bootstrap-vintage`
- `--swatch=material-main`
- `--swatch=material-main-dark`
- `--swatch=material-arctic`
- `--swatch=material-lime-dark`
- `--swatch=material-nova`

### Build and Run

After the project is generated, navigate into the new directory, install packages, build and run:

```bash
cd MyAngularBlankApp
npm install
ng build 
ng serve
```

### Kendo UI for Angular  Project Generator Synopsis

```

Create a new Kendo UI for Angular app.

Commands:
  kendo angular create aba [name]  Create Angular Blank app

Options:
  -h, --help     Show help                                             [boolean]
      --version  Show version number                                   [boolean]
  -v, --verbose  Set verbosity level, e.g. -vvv sets verbosity to level 3. max
                 5.                                         [count] [default: 1]
  -q, --quiet    Silence output as much as possible. Sets verbosity to level 0.
                                                      [boolean] [default: false]
      --theme    Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material", "fluent"] [default: "default"] 
      --swatch    Kendo theme swatch to apply.
     [string] [choices: "default-main", "default-main-dark", "default-nordic", "default-purple", "default-turquoise", "default-ocean-blue", "default-ocean-blue-a11y",
            "fluent-main", "fluent-main-dark", "bootstrap-main", "bootstrap-main-dark", "bootstrap-nordic", "bootstrap-urban", "bootstrap-vintage",
            "material-main", "material-main-dark", "material-arctic", "material-lime-dark", "material-nova"]                                                                             
```

### Kendo UI for Vue Project Generator Synopsis

To use ***Kendo UI for Vue*** and create a new ***Vue*** project using ***Vite***:

``` bash
# Create KendoReact app with Vite with theme option 
npx kendo vue create vite MyKendoVueApp --theme=bootstrap

# Create KendoReact app with Vite with styling option
npx kendo vue create vite MyKendoVueApp --styling=Sass
```

### Options

Styling options:

- `--styling=CSS` - Use CSS styling (default)
- `--styling=Sass` - Use Sass styling

Theme options:

- `--theme=default`
- `--theme=bootstrap`
- `--theme=material`
- `--theme=fluent`

```
kendo vue create vite [name]

Create Kendo UI for Vue app with Vite.

Positionals:
  name  Name of the generated application.   [string] [default: "KendoUIForVueApp"]

Options:
      --help              Show help                                    [boolean]
      --version           Show version number                          [boolean]
  -v, --verbose           Set verbosity level, e.g. -vvv sets verbosity to level
                          3. max 5.                         [count] [default: 1]
  -q, --quiet             Silence output as much as possible. Sets verbosity to
                          level 0.                    [boolean] [default: false]
      --typescript, --ts  Initialize as a TypeScript project.
                                                      [boolean] [default: false]
      --styling           Styling language
                              [string] [choices: "CSS", "Sass"] [default: "CSS"]
      --theme             Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material", "fluent"] [default: "default"]
```

## Assisted Migration

### Overview

0. Install the Kendo CLI globally.

    ```bash
    npm i -g @progress/kendo-cli
    ```

1. In the root of your project, run:

    ```bash
    npx @progress/kendo-cli migrate
    ```

    If not already installed, you will be prompted to install the Kendo CLI. Next, this command checks for available Kendo UI updates (including any peer dependencies), prompts you to install the updates, and then applies any available codemods on top. 

2. Confirm that you want to install the available updates.
3. Confirm that you want to apply the available transformations. 
4. Review and accept the suggested transformations.<br/>The Kendo CLI begins to apply the available codemods version by version, starting with the transformations for the earliest version. 
5. Look for newly added code comments to your code. These indicate that you need to further adjust any existing custom logic.
6. Finally, do a test run of your project to verify that everything works as expected.

### Best Practices

For a more manageable migration process, consider the following recommended practices:

* Migrate between consecutive major versions. For example, migrate from v10 to v11. This lets you review and adjust your code version by version, avoiding possible conflicts between breaking changes.
* Migrate one package at a time. This provides finer control over the migration process.

### CLI Quick Guide

The following list describes the most common migration scenarios.

* You can run any of the listed commands with or without a package specified.
* If not already installed, you will be prompted to install the Kendo CLI when running `npx @progress/kendo-cli migrate` for the first time.
* Once installed, you can also run commands with the `kendo` handle instead of `npx @progress/kendo-cli`. For example: `kendo migrate`.

```bash
# Install the Kendo CLI globally.
npm i -g @progress/kendo-cli

# Run a guided migration. You will be prompted every step of the way.
npx @progress/kendo-cli migrate

# Migrate a specific package.
npx @progress/kendo-cli migrate @progress/kendo-react-grid

# Migrate between specific versions.
npx @progress/kendo-cli migrate @progress/kendo-react-grid --from 10 --to 11

# Run a quick migration without any prompts.
npx @progress/kendo-cli migrate --force

# Only install the available updates. Do not run any codemods.
# Useful when you want to manually migrate your code.
npx @progress/kendo-cli migrate --no-codemods

# Only run the available codemods. Do not install any packages.
# Useful when you already have the packages installed.
npx @progress/kendo-cli migrate @progress/kendo-react-grid --no-install 

# Ignoring specific files or directories during the migration.
npx @progress/kendo-cli migrate @progress/kendo-react-grid --no-install --ignore-pattern="dist/**"
```

### CLI Arguments

If you want more control over the migration, you can use any of the following arguments when running `npx @progress/kendo-cli migrate`.

| Argument | Description | Sample Use |
| -------- | ----------- | ---------- |
| `<pkg>`  | Specifies one or more packages for which to execute the assisted migration (with any additional arguments). If not set, runs for all available Kendo packages. | `npx @progress/kendo-cli migrate @progress/kendo-react-grid` |
| `--help` | Prints the help for the command. | `npx @progress/kendo-cli migrate --help` |
| `--version`         | Prints the version of the Kendo CLI.            | `npx @progress/kendo-cli --version`          |
| `--verbose`         | Sets the verbosity level of the command output on a level from 0 (silent) to 5 (most verbose). By default: 1.              | `npx @progress/kendo-cli migrate --verbose=3`           |
| `--quiet`         | Silences the output as much as possible. Shorthand for `--verbose=0`.           | `npx @progress/kendo-cli migrate --quiet`           |
| `--force`         | Runs in force mode and does not ask for any confirmations.             | `npx @progress/kendo-cli migrate --force`           |
| `--to`         | Specifies the package version to migrate to. If not set, migrates to the latest available version of the respective package(s).            | `npx @progress/kendo-cli migrate @progress/kendo-react-grid --codemods --to=11`           |
| `--from`         | Specifies the package version to migrate from. If not set, uses the current version.            | `npx @progress/kendo-cli migrate @progress/kendo-react-grid --codemods --from=10`           |
| `--no-install`         | Skips the installation part of the migration. Use this option if you have already updated your packages and want to **only** run the available codemods.             | `npx @progress/kendo-cli migrate --no-install`           |
| `--no-codemods`         | Skips the codemods step of the migration. Use this option to **only** install the available updates.            | `npx @progress/kendo-cli migrate --no-codemods`           |
| `--no-peer-deps`         | Skips the installation of any peer dependencies for the updated packages. By default, the `migrate` command always installs the available peer dependencies.            | `npx @progress/kendo-cli migrate --no-peer-deps`           |
| `--no-optional` | Skips the optional codemods, if any. Use this option to run **only** the required transformations. | `npx @progress/kendo-cli migrate --no-optional` |
| `--ignore-pattern` | Specifies a glob pattern to ignore specific files or directories during the migration. Use this option to exclude files that you do not want to be modified. | `npx @progress/kendo-cli migrate --ignore-pattern="dist/**"` |

---

*Copyright © 2023 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.*

*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software* *Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*
