This article demonstrates how to use the Telerik Extension for Visual Studio Code to create a new project that is pre-configured for the Progress® Telerik® UI for Blazor components.
To use the Telerik UI for Blazor Template Wizard, install the Telerik UI for Blazor Visual Studio Code Extension. You can get the extension from:
The Extensions tab in Visual Studio Code - search for Telerik UI for Blazor Productivity Tools, select the extension, and then click Install.
To create a Telerik-enabled Blazor project:
Pin Windows/Linux or
Pon Mac to open the VS Code extension launcher.
Telerik UI for Blazor Template Wizard: Launchand press
Enterto launch the extension.
The Create New Project wizard provides two options to start you project:
Start from Blank Project - allows you to create a blank project that is pre-configured for the Progress® Telerik® UI for Blazor components. You can select and add sample pages to get started (a Grid with CRUD operations form a service, a Form, Charts).
Start from a Template - the wizard provides an Admin Dashboard Template - a fully functional sample app that showcases some of the most popular Telerik UI for Blazor components, such as Grid, TileLayout, Form, Charts, Gauges, etc. in a real world scenario.
- Location and name for your app.
- Your Telerik license (trial or commercial, depending on what you have).
- A WebAssembly or Server-Side Blazor app.
- The .NET version you want to use.
- The Telerik UI for Blazor version.
- Sample pages that you can add to get started (available for
Start from Blank Projectoption).
- The theme you want to apply - the main window provides a list of the built-in (base) themes (Default, Bootstrap and Material). The
See All Swatchesbutton opens a separate menu with a list of color swatches under the corresponding base theme.
For best results, the Telerik Extension for Visual Studio Code is designed to get and apply the latest version of Telerik UI for Blazor available with your license. Therefore, you must ensure that your system has access to the same version of the UI components - you can achieve this with the Telerik NuGet feed.
Open the project, and then run it:
Open the Terminal and navigate to the
Serverproject folder. For a Server-side project, this is the folder with the project name. For a WASM project, this is the
dotnet runand navigate your browser to the link you see in the console output.
You now have a Blazor SPA app running!