@progress/kendo-cli v1.9.4

Kendo CLI

To install:

npm install --global @progress/kendo-cli

KendoReact Project Generator

Kendo ♥ Next.js

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

# 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

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:

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"] [default: "default"]

Kendo ♥ Vite

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

# 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

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"] [default: "default"]

Kendo ♥ Astro

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

# 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

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"] [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.

# 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.

# 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.

# 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.

# 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.

# 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.

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

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"]                                                  

Assisted Migration

Overview

0. Install the Kendo CLI globally.

   npm i -g @progress/kendo-cli

1. In the root of your project, run:

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

# 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.

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.