diff --git a/getting-started/vs-code-integration/images/vs-code-new-project-wizard.png b/getting-started/vs-code-integration/images/vs-code-new-project-wizard.png index f9c39b042c..64ec5b200f 100644 Binary files a/getting-started/vs-code-integration/images/vs-code-new-project-wizard.png and b/getting-started/vs-code-integration/images/vs-code-new-project-wizard.png differ diff --git a/getting-started/vs-code-integration/new-project-wizard.md b/getting-started/vs-code-integration/new-project-wizard.md index dda1b2fa1a..333fc19b6a 100644 --- a/getting-started/vs-code-integration/new-project-wizard.md +++ b/getting-started/vs-code-integration/new-project-wizard.md @@ -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: @@ -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 @@ -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! -