Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 17 additions & 22 deletions getting-started/vs-code-integration/new-project-wizard.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ position: 2

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
## Getting the Extension

To use the **Telerik UI for Blazor Template Wizard**, install the Telerik UI for Blazor Visual Studio Code Extension. @[template](/_contentTemplates/common/general-info.md#vs-code-x-download)

## Start the Wizard
## Starting the Wizard

To create a Telerik-enabled Blazor project:

Expand All @@ -25,22 +25,28 @@ To create a Telerik-enabled Blazor project:

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

## Configure the Project
## Creating 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 Blank App** - 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.
* **Start from Template** - the wizard provides a set of predefined project templates:
* **CRUD, Form, Chart**—A small app that showcases the Telerik UI Data Grid, Chart, and Form validation. The Data Grid also uses a basic CRUD service (a common pattern for data updates in production-ready applications).
* **Dashboard**—A basic dashboard that showcases the Telerik UI TileLayout component and how individual blocks (tiles) can fetch data.
* **Admin**—A small app that showcases a dashboard for administrators. The app uses some of the main Telerik UI components like the [Data Grid]({%slug grid-overview%}), [Chart]({%slug components/chart/overview%}), [TileLayout]({%slug tilelayout-overview%}), [Form]({%slug form-overview%}), and more.

>caption The wizard allows you to configure the following options:
## Configuring the Project

* 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 wizard allows you to configure the following options:

* Name and output path for your app.
* Hosting model type—[**WebApp**]({%slug getting-started/web-app%}), [**Client** (also: WebAssembly)]({%slug getting-started/client-side%}), [**Server**]({%slug getting-started/server-side%}), or [**Hybrid** (a hybrid Blazor MAUI)]({%slug getting-started/hybrid-blazor%}) app.
* Your Telerik license (trial or commercial, depending on what you have).
* Whether to use localization in the project or not.
* Whether to use font icons in the project or not.
* 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).
* Sample pages that you can add to get started (available when `Start from Blank App` is selected).
* The theme you want to apply - the main window provides a list of the [built-in (base) themes]({%slug general-information/themes%}) (Default, Bootstrap and Material). The `See All Swatches` button opens a separate menu with a list of [color swatches]({%slug themes-swatches%}) under the corresponding base theme.

>caption Create New Project wizard
Expand All @@ -52,14 +58,3 @@ The **Create New Project** wizard provides two options to start you project:
![VS code wizard overview](images/vs-code-swatches-menu.png)

@[template](/_contentTemplates/common/general-info.md#vs-code-nuget-note)

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

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

You now have a Blazor SPA app running!