Create New Projects

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.

Get the Extension

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 Visual Studio Marketplace.

• The Extensions tab in Visual Studio Code - search for Telerik UI for Blazor Productivity Tools, select the extension, and then click Install.

Start the Wizard

To create a Telerik-enabled Blazor project:

1. Press Ctrl+Shift+P in Windows/Linux or Cmd+Shift+P on Mac to open the VS Code extension launcher.

   

2. Type/Select Telerik UI for Blazor Template Wizard: Launch and press Enter to launch the extension.

Configure the Project

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.

The wizard allows you to configure the following options:

• 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 Project option).
• 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 Swatches button opens a separate menu with a list of color swatches under the corresponding base theme.

Create New Project wizard

See All Swatches menu

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.

Run the Project

Open the project, and then run it:

1. Open the Terminal and navigate to the Server project folder. For a Server-side project, this is the folder with the project name. For a WASM project, this is the Server folder.

2. Execute dotnet run and navigate your browser to the link you see in the console output.

You now have a Blazor SPA app running!