Telerik UI for Blazor CDN

The Telerik Blazor CDN is a complimentary service that can be used in development and production environments. This article describes the CDN URLs and what to keep in mind when using CDN in general.

The CDN hosts two kinds of static client assets for the Telerik UI for Blazor components:

• Theme CSS files
• JavaScript (JSInterop) files

CSS Theme URLs

The Telerik CSS themes are available on two CDN hosts:

• unpkg.com provides all built-in theme swatches. The version number in the theme URL matches the version of the theme itself. Make sure to use compatible theme and component versions. For example, use theme version 10.0.1 with UI for Blazor version 7.0.0.
• blazor.cdn.telerik.com provides a limited set of popular theme swatches. The version number in the theme URL matches the version of the Telerik UI for Blazor components, for example, 7.0.0.

UNPKG CDN

The CSS file URLs on unpkg.com look like this:

unpkg.com/@progress/kendo-theme-<THEME-NAME>@<THEME-VERSION>/dist/<SWATCH-NAME>.css

The separate font icons stylesheet URL looks like this:

unpkg.com/@progress/kendo-font-icons@<PACKAGE-VERSION>/dist/index.css

Here are a few examples:

UNPKG CDN URLs for Telerik CSS themes

<!-- Ocean Blue swatch of the Default theme -->
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@10.0.1/dist/default-ocean-blue.css" />

<!-- Main swatch of the Bootstrap theme -->
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@10.0.1/dist/bootstrap-main.css" />

<!-- Latest font icon stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />

Telerik CDN

The CSS file URLs on blazor.cdn.telerik.com look like this:

blazor.cdn.telerik.com/blazor/<COMPONENT-VERSION>/kendo-theme-<THEME-NAME>/swatches/<THEME-NAME>-<SWATCH-NAME>.css

The separate font icons stylesheet URL looks like this:

blazor.cdn.telerik.com/blazor/<COMPONENT-VERSION>/kendo-font-icons/font-icons.css

Here are a few examples:

Telerik UI for Blazor CDN URLs for CSS themes

<!-- Ocean Blue swatch of the Default theme -->
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/7.0.0/kendo-theme-default/swatches/default-ocean-blue.css" />

<!-- Main swatch of the Bootstrap theme -->
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/7.0.0/kendo-theme-bootstrap/swatches/bootstrap-main.css" />

<!-- Font icon stylesheet -->
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/7.0.0/kendo-font-icons/font-icons.css" />

JavaScript URLs

The CDN hosts the JavaScript (JSInterop) file of Telerik UI for Blazor. The file URL looks like this:

blazor.cdn.telerik.com/blazor/<COMPONENT-VERSION>/telerik-blazor.min.js

Telerik UI for Blazor CDN URL for JavaScript

<script src="https://blazor.cdn.telerik.com/blazor/7.0.0/telerik-blazor.min.js"></script>

When using the telerik-blazor.js file from CDN and with a defer attribute, start the client-side Blazor framework manually.

Pros and Cons of Using CDN

The benefits of using a CDN in Blazor apps are:

• Possible performance gains in the application loading time. Blazor apps are single page applications and browsers rely on cache by default, so this benefit is marginal and relates only to users that open the application for the first time.
• Avoidance of browser caching issues after component version upgrades. The CSS and JS files change with every component version, and so do the CDN URLs. This URL change guarantees that browsers will reload the static assets.

The drawbacks of using a CDN are:

• Additional component version upgrade steps. You must change the version number in the URL, otherwise the application can display broken UI or throw JavaScript errors.
• A CDN is a critical external dependency for your app. Regardless of the claimed uptime, you must implement a CDN fallback for cases when the CDN is not accessible to your users due to geographical, networking or system issues.

Next Steps

• Implement CDN Fallback

See also

• Implement CDN Fallback