From b891ffb218f4d78b40631927a2a43c412edb126f Mon Sep 17 00:00:00 2001 From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com> Date: Fri, 27 Mar 2026 19:35:31 +0530 Subject: [PATCH 1/3] 1011182: Updated the Blazor Electron UG Documentation --- blazor/getting-started/blazor-electron-app.md | 48 ++++++++++--------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/blazor/getting-started/blazor-electron-app.md b/blazor/getting-started/blazor-electron-app.md index d20f128e5b..c02a6369f6 100644 --- a/blazor/getting-started/blazor-electron-app.md +++ b/blazor/getting-started/blazor-electron-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Creating a Blazor Server Electron App | Syncfusion -description: Learn to build a cross‑platform desktop app using a Blazor Server App with ElectronNET.Core and Syncfusion Blazor DataGrid components. +title: Creating a Blazor Desktop App with Electron | Syncfusion +description: Learn to build a cross-platform desktop app using a Blazor Server App with Electron and Syncfusion Blazor DataGrid components. platform: Blazor component: Common documentation: ug @@ -9,22 +9,28 @@ documentation: ug # Creating a Blazor Desktop App with Electron -This guide explains how to create a cross‑platform desktop application by combining a **Blazor Server App** with the **ElectronNET.Core** framework and integrating Syncfusion® Blazor components such as the DataGrid within an Electron‑powered desktop environment. +This guide explains how to create a cross-platform desktop application by combining a **Blazor Server App** with the **[ElectronNET.Core](https://www.nuget.org/packages/ElectronNET.Core)** framework and integrating Syncfusion® Blazor components such as the **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** within an Electron‑powered desktop environment. -N> ElectronNET.Core is the modern fork of the Electron.NET approach that supports recent .NET versions. +N> ElectronNET.Core is a community-maintained fork of Electron.NET that supports .NET 6 and later versions (including .NET 8, 9, and 10). It is not an official Microsoft package. ## What is Electron? -[Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applications using web technologies. It uses `Node.js` and the `Chromium` rendering engine to run a web application inside a desktop environment. +[Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applications using web technologies. It uses [Node.js](https://nodejs.org/en/download/) and the [Chromium](https://www.chromium.org/) rendering engine to run a web application inside a desktop environment. + +ElectronNET.Core connects a Blazor Server app with the Electron shell by hosting an internal [ASP.NET Core Kestrel server](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/servers/kestrel) and loading it in a Chromium window. The Electron main process communicates with the Blazor backend through this local server, enabling desktop‑native features without requiring changes to the application’s architecture. -ElectronNET.Core connects a Blazor Server app with the Electron shell by hosting an internal Kestrel server and loading it in a Chromium window. The Electron main process communicates with the Blazor backend through this local server, enabling desktop‑native features without requiring changes to the application’s architecture. ## Prerequisites -- .NET 8 or later (LTS) -- Node.js 22.x or later -- Supported OS (for .NET 8 or later): Windows 10 or later, macOS 12 or later, Ubuntu 20.04 or later -- Editor/IDE: Visual Studio 2022 or later, or VS Code +- [.NET 8 (LTS) or later](https://dotnet.microsoft.com/en-us/download/dotnet) +- [Node.js 22.x (LTS) or later](https://nodejs.org/en/download/) +- .NET CLI or [Visual Studio Code](https://code.visualstudio.com/) +- **Supported Operating Systems:** + - **Windows:** Windows 10 or later (x64) + - **macOS:** macOS 12 (Monterey) or later (x64, ARM64) + - **Linux:** Ubuntu 20.04 or later (or equivalent distributions) + +N> Electron and .NET both must support your target OS. See [.NET supported OS versions](https://github.com/dotnet/core/blob/main/release-notes/8.0/supported-os.md) and [Electron platform support](https://www.electronjs.org/docs/latest/development/build-instructions-gn#platform-prerequisites). ## Create a Blazor Server App @@ -33,8 +39,8 @@ Run the following commands in the **command-line interface (CLI)**. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +dotnet new blazor -o BlazorElectronApp -int Server +cd BlazorElectronApp {% endhighlight %} {% endtabs %} @@ -78,9 +84,7 @@ Add the required Syncfusion® Blazor namespa Add the required Syncfusion® Blazor service and configure ElectronNET.Core in your **~/Program.cs** file. -Before using the code snippet, update the namespace by replacing `BlazorElectronApp` with the namespace used in your application. You can find the correct namespace in `App.razor` or `_Imports.razor`. - -For example, if your application is named `MyApp`, use `MyApp.Components.App`. +N> Before using the code snippet, update the namespace `BlazorElectronApp` to match your project's root namespace. You can find this in `App.razor` or `_Imports.razor`. For example, if your project is named `MyApp`, use `MyApp.Components.App`. {% tabs %} {% highlight c# tabtitle=".NET 8/.NET 9/.NET 10 (~/Program.cs)" hl_lines="2 3 4 7 9 11 12 13 14 15 16 17 18 19 20 22 24 25 26 28 34" %} @@ -151,7 +155,7 @@ Add the following stylesheet and script references in `~/App.razor`. {% endtabs %} -## Add Runtime Identifiers to Support Cross‑Platform Builds +## Add Runtime Identifiers to Support cross-platform Builds The `RuntimeIdentifiers` property specifies the target platforms for the application and enables .NET to restore the necessary platform‑specific assets. This configuration allows the application to be built and packaged for Windows, Linux, and macOS from a single project. @@ -163,7 +167,7 @@ To enable this, add the following property to your project’s `.csproj` file. ... - win-x64;linux-x64;osx-x64;osx-arm64 + win-x64;win-arm64;linux-x64;osx-x64;osx-arm64 {% endhighlight %} @@ -176,7 +180,7 @@ ElectronNET.Core uses the electron-builder.json file to configure packaging sett {% tabs %} -{% highlight c# tabtitle="~/electron-builder.json" %} +{% highlight json tabtitle="~/electron-builder.json" %} { "appId": "com.companyname.blazorelectronapp", @@ -202,9 +206,9 @@ ElectronNET.Core uses the electron-builder.json file to configure packaging sett {% endtabs %} -## Add Syncfusion® Blazor DataGrid component +## Add Syncfusion® Blazor DataGrid Component -Add the Syncfusion® DataGrid components to a `.razor` file within your app. +Add the Syncfusion® Blazor DataGrid component to a `.razor` file within your app. {% tabs %} {% highlight razor %} @@ -239,14 +243,14 @@ Add the Syncfusion® DataGrid components to {% endhighlight %} {% endtabs %} -### Run the Application +## Run the Application ``` dotnet run ``` ![Blazor Electron App](images/blazor-server-electron.webp) -### Publish and Build Desktop Packages +## Publish and Build Desktop Packages The following commands publish the application for the x64 architecture. Update the runtime identifier as needed (for example, osx-arm64 or linux-arm64) to target other platforms. From d93a1d0a2f6e278130e66c37aee8d6f0afde3175 Mon Sep 17 00:00:00 2001 From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com> Date: Mon, 30 Mar 2026 13:46:50 +0530 Subject: [PATCH 2/3] 1011182: Updated the review changes --- blazor/getting-started/blazor-electron-app.md | 67 ++++++++++--------- 1 file changed, 37 insertions(+), 30 deletions(-) diff --git a/blazor/getting-started/blazor-electron-app.md b/blazor/getting-started/blazor-electron-app.md index c02a6369f6..2d29d6fd6e 100644 --- a/blazor/getting-started/blazor-electron-app.md +++ b/blazor/getting-started/blazor-electron-app.md @@ -1,7 +1,7 @@ --- layout: post title: Creating a Blazor Desktop App with Electron | Syncfusion -description: Learn to build a cross-platform desktop app using a Blazor Server App with Electron and Syncfusion Blazor DataGrid components. +description: Learn to build a cross-platform desktop app using a Blazor Web App (Server) with Electron and Syncfusion Blazor DataGrid components. platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Creating a Blazor Desktop App with Electron -This guide explains how to create a cross-platform desktop application by combining a **Blazor Server App** with the **[ElectronNET.Core](https://www.nuget.org/packages/ElectronNET.Core)** framework and integrating Syncfusion® Blazor components such as the **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** within an Electron‑powered desktop environment. +This guide explains how to create a cross-platform desktop application by combining a **Blazor Web App (Server)** with the **[ElectronNET.Core](https://www.nuget.org/packages/ElectronNET.Core)** framework and integrating Syncfusion® Blazor components such as the **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** within an Electron‑powered desktop environment. N> ElectronNET.Core is a community-maintained fork of Electron.NET that supports .NET 6 and later versions (including .NET 8, 9, and 10). It is not an official Microsoft package. @@ -17,8 +17,7 @@ N> ElectronNET.Core is a community-maintained fork of Electron.NET that supports [Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applications using web technologies. It uses [Node.js](https://nodejs.org/en/download/) and the [Chromium](https://www.chromium.org/) rendering engine to run a web application inside a desktop environment. -ElectronNET.Core connects a Blazor Server app with the Electron shell by hosting an internal [ASP.NET Core Kestrel server](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/servers/kestrel) and loading it in a Chromium window. The Electron main process communicates with the Blazor backend through this local server, enabling desktop‑native features without requiring changes to the application’s architecture. - +ElectronNET.Core connects a Blazor Web App (Server) with the Electron shell by hosting an internal [ASP.NET Core Kestrel server](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/servers/kestrel) and loading it in a Chromium window. The Electron main process communicates with the Blazor backend through this local server, enabling desktop‑native features without requiring changes to the application’s architecture. ## Prerequisites @@ -26,13 +25,11 @@ ElectronNET.Core connects a Blazor Server app with the Electron shell by hosting - [Node.js 22.x (LTS) or later](https://nodejs.org/en/download/) - .NET CLI or [Visual Studio Code](https://code.visualstudio.com/) - **Supported Operating Systems:** - - **Windows:** Windows 10 or later (x64) + - **Windows:** Windows 10 or later (x64, ARM64) - **macOS:** macOS 12 (Monterey) or later (x64, ARM64) - **Linux:** Ubuntu 20.04 or later (or equivalent distributions) -N> Electron and .NET both must support your target OS. See [.NET supported OS versions](https://github.com/dotnet/core/blob/main/release-notes/8.0/supported-os.md) and [Electron platform support](https://www.electronjs.org/docs/latest/development/build-instructions-gn#platform-prerequisites). - -## Create a Blazor Server App +## Create a Blazor web app (Server render mode) Run the following commands in the **command-line interface (CLI)**. @@ -45,7 +42,7 @@ cd BlazorElectronApp {% endhighlight %} {% endtabs %} -## Install Required Packages +## Install required packages From the project folder (where the `.csproj` is located), install the Syncfusion® **Grid**, **Themes**, and the **ElectronNET.Core** packages. * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) @@ -59,15 +56,17 @@ From the project folder (where the `.csproj` is located), install the Syncfusion dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet add package ElectronNET.Core -dotnet add package ElectronNET.Core.AspNet +dotnet add package ElectronNET.Core --version 0.4.1 +dotnet add package ElectronNET.Core.AspNet --version 0.4.1 dotnet restore {% endhighlight %} {% endtabs %} -## Add Required Namespaces +N> Replace `0.4.1` with the latest stable version. Check [NuGet](https://www.nuget.org/packages/ElectronNET.Core) for the current release. + +## Add required namespaces Add the required Syncfusion® Blazor namespaces in **~/_Imports.razor**. @@ -80,14 +79,14 @@ Add the required Syncfusion® Blazor namespa {% endhighlight %} {% endtabs %} -## Register Syncfusion® and Electron Services +## Register Syncfusion® and Electron services Add the required Syncfusion® Blazor service and configure ElectronNET.Core in your **~/Program.cs** file. N> Before using the code snippet, update the namespace `BlazorElectronApp` to match your project's root namespace. You can find this in `App.razor` or `_Imports.razor`. For example, if your project is named `MyApp`, use `MyApp.Components.App`. {% tabs %} -{% highlight c# tabtitle=".NET 8/.NET 9/.NET 10 (~/Program.cs)" hl_lines="2 3 4 7 9 11 12 13 14 15 16 17 18 19 20 22 24 25 26 28 34" %} +{% highlight c# tabtitle=".NET 8/.NET 9/.NET 10 (~/Program.cs)" hl_lines="2 3 4 7 9 11 12 13 14 15 16 17 18 19 20 22 24 25 26 28 35" %} ... using Syncfusion.Blazor; @@ -118,7 +117,8 @@ builder.UseElectron(args, async () => ... app.UseStaticFiles(); // Required for serving assets like _content/ (Syncfusion). -// Disable for Electron: it runs on http://localhost, and HTTPS redirection can cause redirect/certificate issues. +// Disable HTTPS redirection for Electron apps. +// Electron runs on http://localhost, and HTTPS redirection will cause certificate errors. // app.UseHttpsRedirection(); ... // Map the root Razor Components app @@ -130,7 +130,7 @@ app.Run(); {% endhighlight %} {% endtabs %} -## Add Stylesheet and Script Resources +## Add stylesheet and script resources Before adding the stylesheet, ensure that no other Syncfusion® theme CSS (e.g., bootstrap5.css, material.css) is already referenced to avoid conflicts. @@ -142,20 +142,20 @@ Add the following stylesheet and script references in `~/App.razor`. ... - + ... - + {% endhighlight %} {% endtabs %} -## Add Runtime Identifiers to Support cross-platform Builds +## Add RuntimeIdentifiers to support cross-platform builds The `RuntimeIdentifiers` property specifies the target platforms for the application and enables .NET to restore the necessary platform‑specific assets. This configuration allows the application to be built and packaged for Windows, Linux, and macOS from a single project. @@ -174,9 +174,11 @@ To enable this, add the following property to your project’s `.csproj` file. {% endtabs %} -## Add electron-builder.json (Required for ElectronNET.Core) +N> The example includes x64 and ARM64 architectures for Windows, macOS, and Linux. Adjust runtime identifiers based on your target platforms. See [.NET RID Catalog](https://learn.microsoft.com/en-us/dotnet/core/rid-catalog) for a full list. -ElectronNET.Core uses the electron-builder.json file to configure packaging settings for desktop builds. Create a file named `electron-builder.json` in your project’s `Properties` folder and add the following content. +## Add Packaging Configuration for ElectronNET.Core + +ElectronNET.Core uses the electron-builder.json file to configure packaging settings for desktop builds. Create a file named **electron-builder.json** in your project's **root folder** (next to the `.csproj` file) and add the following content. {% tabs %} @@ -206,9 +208,9 @@ ElectronNET.Core uses the electron-builder.json file to configure packaging sett {% endtabs %} -## Add Syncfusion® Blazor DataGrid Component +## Add Syncfusion® Blazor DataGrid component -Add the Syncfusion® Blazor DataGrid component to a `.razor` file within your app. +Add the Syncfusion® Blazor DataGrid component to a `.razor` file within your app. For example, update **~/Components/Pages/Home.razor**. {% tabs %} {% highlight razor %} @@ -243,19 +245,24 @@ Add the Syncfusion® Blazor DataGrid compone {% endhighlight %} {% endtabs %} -## Run the Application +## Run the application ``` dotnet run ``` ![Blazor Electron App](images/blazor-server-electron.webp) -## Publish and Build Desktop Packages +## Publish and build desktop packages + +The following commands publish the application for the x64 architecture. Update the runtime identifier as needed (for example, `osx-arm64` or `linux-arm64`) to target other platforms. + +```bash +# Windows +dotnet publish -r win-x64 -c Release -The following commands publish the application for the x64 architecture. Update the runtime identifier as needed (for example, osx-arm64 or linux-arm64) to target other platforms. +# macOS +dotnet publish -r osx-x64 -c Release +# Linux +dotnet publish -r linux-x64 -c Release ``` -Windows: dotnet publish -r win-x64 -c Release -macOS: dotnet publish -r osx-x64 -c Release -Linux: dotnet publish -r linux-x64 -c Release -``` \ No newline at end of file From 15dfc5882a55bb5b9b4d81fbca08a84627c8c17f Mon Sep 17 00:00:00 2001 From: VaseegaranSF4468 <162665726+VaseegaranSF4468@users.noreply.github.com> Date: Mon, 30 Mar 2026 13:47:41 +0530 Subject: [PATCH 3/3] 1011182: Added space --- blazor/getting-started/blazor-electron-app.md | 1 + 1 file changed, 1 insertion(+) diff --git a/blazor/getting-started/blazor-electron-app.md b/blazor/getting-started/blazor-electron-app.md index 2d29d6fd6e..7a08ff6287 100644 --- a/blazor/getting-started/blazor-electron-app.md +++ b/blazor/getting-started/blazor-electron-app.md @@ -266,3 +266,4 @@ dotnet publish -r osx-x64 -c Release # Linux dotnet publish -r linux-x64 -c Release ``` + \ No newline at end of file