Edit this page

NPM Packages

The Node Package Manager (NPM) is a popular JavaScript package manager.

The article assumes that you are familiar with the necessary steps to use browser-based libraries from NPM. Some of the tools that address this issue are Browserify, Webpack, and SystemJS.

For more information on possible setups, refer to the sample repository on GitHub.

Overview

Kendo UI maintains two NPM packages:

Official releases, service packs, and internal builds are published for each package.

Important

Kendo UI Core

The Kendo UI Core NPM Package is published as kendo-ui-core on http://npmjs.com/.

The package is accessible without credentials.

Example
npm install --save kendo-ui-core

Kendo UI Professional

The Kendo UI Professional NPM Package, named @progress/kendo-ui is available at the Progress NPM registry.

Installation

  1. Access the Progress NPM registry. To do so, you need an Telerik account with active commercial license.

    • Check the scoped packages section in the NPM documentation for more information about npm scopes and how they work.
    • Note that the Progress NPM registry is designed to work as a scoped registry. This means that if you set it as a main registry by mistake, the access to the official registry (https://registry.npmjs.org/) will be blocked.
  2. Enable the Progress NPM registry on your machine by associating the @progress scope with the registry URL. Run the following command in your terminal:

    npm login --registry=https://registry.npm.telerik.com/ --scope=@progress
  3. Enter the username (if the username is an email address, use everything before the @) and password you use to log in your Telerik account as NPM will ask you for your Telerik account credentials and an email. The login name will be ignored.

  4. Verify that the code works. If the command has passed successfully, you should be able to install the Kendo UI NPM packages. Verify this by querying the versions of the package:

    npm view @progress/kendo-ui versions
    

    The output should be something like this (json):

    [ '2017.1.118' ]
    
    Example
    npm install --save @progress/kendo-ui
    

Important

The scripts in the NPM package are not usable in the browser. To work around this issue, use a bundler such as WebPack.

Legacy Package

The legacy kendo package that is available as a GitHub repository and is accessible through git+https://bower.telerik.com/npm-kendo-ui/npm-kendo.git will not be updated after May 2017. The repository itself will remain active.

Authenticating Build Agents

Your credentials can be used to authenticate build agents running on Travis CI, Visual Studio Team Services, and others.

After logging in, the ~/.npmrc (on Windows - %HOMEDRIVE%%HOMEPATH%\.npmrc) will be populated with an authentication token that can be copied to build agents.

The token will remain valid until you execute npm logout --scope=@progress or until your license expires.

Travis CI

You can add the following .travis.yml configuration to populate your .npmrc file:

before_install:
  - echo "@progress:registry=https://registry.npm.telerik.com/" > .npmrc
  - echo "//registry.npm.telerik.com/:_authToken=\"$PROGRESS_REGISTRY_TOKEN\"" >> .npmrc

Here PROGRESS_REGISTRY_TOKEN is an environment variable set in the project configuration or as an encrypted variable.

Visual Studio Team Services

You can authenticate directly on the build machine or store the npmrc file per-project.

Troubleshooting

This section provides solutions for common issues you might encounter while installing the Kendo UI NPM packages.

The jQuery Module Is Not Found

During the installation process, you might see the following error:

Error: Cannot find module 'jquery' from '/Users/bernhard/Documents/JavaScriptDevelopment/kendo-ui-npm-example/javascript-browserify'

The most probable cause of this issue is the usage of an old NPM version.

Solution

Use an NPM ^3.0.0 version.

See Also

Other articles on getting started with Kendo UI:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy