Skip to content

Commit

Permalink
docs(vs-code):update wizard docs (#2198)
Browse files Browse the repository at this point in the history
* docs(vs-code):update wizard docs

* chore(vs-code): updates

* Update getting-started/vs-code-integration/new-project-wizard.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update getting-started/vs-code-integration/new-project-wizard.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update getting-started/vs-code-integration/new-project-wizard.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update getting-started/vs-code-integration/new-project-wizard.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update getting-started/vs-code-integration/new-project-wizard.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update getting-started/vs-code-integration/new-project-wizard.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update getting-started/vs-code-integration/new-project-wizard.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update getting-started/vs-code-integration/new-project-wizard.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* chore(common): update structure

---------

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>
  • Loading branch information
ntacheva and ikoevska authored Jul 11, 2024
1 parent 467633e commit a7b2575
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 21 deletions.
4 changes: 0 additions & 4 deletions _contentTemplates/common/general-info.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,6 @@ 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**.
#end

#vs-code-nuget-note
>note 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](../../installation/nuget).
#end


#valuebind-vs-databind-link
For details on Value Binding and Data Binding, and the differences between them, see the [Value Binding vs Data Binding]({%slug get-started-value-vs-data-binding%}) article.
Expand Down
Binary file not shown.
Binary file not shown.
69 changes: 52 additions & 17 deletions getting-started/vs-code-integration/new-project-wizard.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,36 +25,71 @@ To create a Telerik-enabled Blazor project:

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

## Creating the Project
## Using the Wizard

The **Create New Project** wizard provides two options to start you project:
#### Section 1: Choose How to Start the Project

* **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).
The **Telerik UI for Blazor Template Wizard** provides two options to start you project:

* **Start from Blank App**&mdash;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 Template** - the wizard provides a set of predefined project templates:
* **CRUD, Form, Chart**&mdash;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**&mdash;A basic dashboard that showcases the Telerik UI TileLayout component and how individual blocks (tiles) can fetch data.
* **Admin**&mdash;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.

## Configuring the Project
The available templates vary depending on the target framework and hosting model. All of the above templates are available for the Client and Server projects for .NET 6 and .NET 7. The Hybrid projects and the .NET 8 WebApp support only the **Start from Blank App** option.

#### Section 2: Select Project Name and Path

Type your project name and select the output folder for it.

#### Section 3: Select UI for Blazor Version

Select the preferred UI for Blazor version. Make sure that your system has access to the specified version of the UI components. You can achieve this with the [Telerik NuGet feed]({%slug installation/nuget%}).

#### Section 4: Select Hosting Model

Here you can select the desired hosting model&mdash;[**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%}).

The available target framework options are updated upon selecting the hosting model.

#### Section 5: Select Your License Type

Select your license type - **Commercial** (**Paid**) or **Trial**.

The wizard allows you to configure the following options:
#### Section 6: Choose How to Distribute the Client Assets

* Name and output path for your app.
* Hosting model type&mdash;[**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.
* 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.
Choose whether to import the required Telerik UI stylesheet and JS Interop file by using the [static assets]({%slug getting-started/what-you-need%}#css-theme-and-javascript-files) or the [CDN method]({%slug common-features-cdn%}).

>caption Create New Project wizard
#### Section 7: Enable or Disable Localization

![VS code wizard overview](images/vs-code-new-project-wizard.png)
Choose whether to use [localization]({%slug globalization-localization%}) in the project or not.

>caption See All Swatches menu
#### Section 8: Select the Preferred Icon Type

![VS code wizard overview](images/vs-code-swatches-menu.png)
Decide if you want to switch to using [Font Icons]({%slug common-features-icons%}) instead of the default SVG icons.

#### Section 9: Select Target Framework

The available .NET framework versions vary depending on the selected hosting model.

#### Section 10: Select Theme

Select your desired [theme]({%slug general-information/themes%}) for your project. Click **See All Swatches** to explore the available [theme variations]({%slug themes-swatches%}).

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

#### Confirm Project Creation

After configuring the preferred settings, click the **Create Project** button. The **Telerik UI for Blazor Template Wizard** closes and the project creation begins. When completed, the terminal shows a confirmation message. You can then navigate to the previously specified output folder to open your project.


## See Also

* [Telerik UI for Blazor Visual Studio Code Extensions Overview]({%slug getting-started-vs-code-integration-overview%})
* [Downloading the Latest Telerik UI for Blazor Versions]({% slug getting-started-vs-integration-latest-version%})
* [Getting Started with Client-Side Apps]({%slug getting-started/client-side%})
* [Getting Started with Server-Side Apps]({%slug getting-started/server-side%})
* [Getting Started with Web Apps]({%slug getting-started/web-app%})
* [Workflow for Using the UI Components for Blazor]({%slug getting-started/what-you-need%})

0 comments on commit a7b2575

Please sign in to comment.