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.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 58 additions & 19 deletions Extension/Blazor-Extension/Visual-Studio/template-studio.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ documentation: ug

Syncfusion provides the Blazor Template Studio, which allows you to create a Syncfusion Blazor application with Syncfusion components. The Syncfusion Blazor app is created with the required component Syncfusion NuGet references, namespaces, styles, and component render code. The Template Studio provides an easy-to-use project wizard that walks you through the process of creating an application with Syncfusion components.

The steps below will assist you to create your **Syncfusion Blazor Application** through **Visual Studio 2019**:
The steps below will assist you to create your **Syncfusion Blazor Application** through **Visual Studio 2022**:

> **Note:** The Syncfusion Blazor Extensions for Visual Studio 2019 are available on Essential Studio release "20.3.0.56" and below.

> Before use the Syncfusion Blazor Project Template, check whether the Syncfusion Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, please install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/visual-studio-extensions/download-and-installation/) help topic.

Expand All @@ -35,25 +37,48 @@ The steps below will assist you to create your **Syncfusion Blazor Application**

![CreateNewWizard](images/CreateNewWizard.png)

4. The Template Studio wizard for configuring the Syncfusion Blazor app will be launched. Choose the Syncfusion Blazor application type.

![ProjectWizard](images/TemplateStudio.png)

> .NET 6.0 is available from v19.4.0.38 and support from Visual Studio 2022.
4. The Syncfusion Blazor Template Studio wizard will be launched to configure the Syncfusion Blazor app.

> .NET 7.0 is available from v20.4.0.38 and support from Visual Studio 2022.

> .NET 8.0 is available from v23.2.4 and support from Visual Studio 2022.
> **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk).

**Project type section**

Choose one of the Syncfusion Blazor application types:
* Syncfusion Blazor Server App
* Syncfusion Blazor WebAssembly App

In the Syncfusion Blazor WebAssembly App application type, we can choose **ASP.NET Core hosted**, **Progressive Web Application**, or both.

![ProjectTypeWizard](images/ProjectTypeWizard.png)
Choose one of the Syncfusion Blazor application types based on the version of the .NET SDK you are using.

| .NET SDK version | Supported Syncfusion Blazor Application Type |
| ------------- | ------------- |
| [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor Web App |
| [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0), [.NET 7.0](https://dotnet.microsoft.com/en-us/download/dotnet/7.0), [.NET 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) | Syncfusion Blazor WebAssembly App |
| [.NET 7.0](https://dotnet.microsoft.com/en-us/download/dotnet/7.0), [.NET 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) | Syncfusion Blazor Server App |

In the **Syncfusion Blazor Web App** application type, you can configure the following options:

<table>
<tbody>
<tr>
<td>
<a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes" rel="nofollow">Interactivity type</a>
</td>
<td>
Server, WebAssembly, Auto (Server and WebAssembly)
</td>
</tr>
<tr>
<td>
<a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows" rel="nofollow">Interactivity location</a>
</td>
<td>
Global, Per page/component
</td>
</tr>
</tbody>
</table>

![WebAppTemplate](images/WebAppTemplate.png)

In the **Syncfusion Blazor WebAssembly App** application type, you can choose ASP.NET Core hosted, Progressive Web Application, or both.

![WASMTemplate](images/WASMTemplate.png)

> **Note:** The Progressive Web Application will be enabled if .NET 6.0 version or higher is installed.

Expand All @@ -73,16 +98,30 @@ The steps below will assist you to create your **Syncfusion Blazor Application**

6. Click either **Next** or the **Features** tab, and you will see the features listed for the selected controls. You can choose the required features.

7. Click either **Next** or the **Configuration** tab, and the Configuration section will be loaded. You can choose the required (.NET 6.0, .NET 7.0, and .NET 8.0), themes, https configuration, authentication type (None, Individual Accounts, Microsoft Identity Platform, and Windows), and Blazor Web Assembly application types (ASP.NET Core hosted and Progressive Web Application).
7. Click **Next** or the **Configuration** tab to load the Configuration section. You can choose the required (.NET 8.0, .NET 7.0, and .NET 6.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types.

> **Note:** ASP.NET Core hosted and Progressive Web Application options are only visible for the Blazor Web Assembly App application type.
Depending on your Syncfusion Blazor Application Type, refer to the table below for supported authentication types.

![Choose required Project Configuration](images/Configuration.png)
| Syncfusion Blazor Application Type | Supported Authentication Types |
| ------------- | ------------- |
| Syncfusion Blazor Web App | None and Individual Accounts |
| Syncfusion Blazor WebAssembly App | None, Individual Accounts and Microsoft Identity Platform |
| Syncfusion Blazor Server App | None, Individual Accounts, Microsoft Identity Platform, and Windows |

If you choose the **Blazor Web App** application type, you can customize the Interactivity type and Interactivity location options.

![WebAppConfiguration](images/WebAppConfig.png)

If you choose the **Blazor Web Assembly App** application type, you can customize the ASP.NET Core hosted and Progressive Web Application options.

![WASMConfiguration](images/WASMConfig.png)

**Project details section**

You can change the configuration details below in the Project Details section to change the application type, remove control(s) from the selected controls, or change the configurations.

![ProjectDetails](images/ProjectDetails.png)

8. Click **Create** button. The Syncfusion Blazor application has been created. The created Syncfusion Blazor app has the Syncfusion NuGet packages, styles, and the render code for the Syncfusion component.

![Readme](images/readme.png)
Expand Down