--- title: "Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron" published_at: "2021-05-06T10:00:40+00:00" modified_at: "2025-04-22T09:27:27+00:00" url: "https://www.syncfusion.com/blogs/post/exploring-syncfusion-blazor-components-on-cross-platform-desktop-apps-using-electron" excerpt: "Syncfusion’s native Blazor UI components library can be used with all features supported by the Blazor framework. In this blog post, we are going to explore Syncfusion Blazor components on a cross-platform desktop app using the Electron framework. Electron supports..." taxonomy_category: - "Blazor" taxonomy_post_tag: - "Blazor" - "Desktop Application" - "Electron" - "productivity" - "Web Development" --- # Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron [Ajith R](https://www.syncfusion.com/blogs/author/ajith-r) ![Exploring Syncfusion Blazor Components on Cross-Platform Desktop App using](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Exploring-Syncfusion-Blazor-Components-on-Cross-Platform-Desktop-App-using.png) Syncfusion’s native [Blazor UI components](https://www.syncfusion.com/blazor-components) library can be used with all features supported by the Blazor framework. In this blog post, we are going to explore Syncfusion Blazor components on a cross-platform desktop app using the [Electron](https://www.electronjs.org/) framework. Electron supports building cross-platform desktop applications with web technologies. It utilizes Node.js and the Chromium rendering engine to run a web application on a desktop shell. ## **Prerequisites** - [.NET Core SDK 3.1](https://dotnet.microsoft.com/download/dotnet-core/3.1) or [.NET 5.0 SDK](https://dotnet.microsoft.com/download/dotnet/5.0) - [Node.js](https://nodejs.org/en/) ## **Create a Blazor server-side application using dotnet-cli** Follow these steps to create a Blazor server-side app using dotnet-cli: **Step 1:** First, open the command prompt in any folder. Then, run the following command line to create a new Blazor server-side application without HTTPS support. I am naming the application **BlazorElectronApp**. ``` dotnet new blazorserver --no-https -o BlazorElectronApp ``` **Step 2:** Navigate to the application folder (BlazorElectronApp) and install the required [Syncfusion Blazor NuGet](https://blazor.syncfusion.com/documentation/nuget-packages/#available-nuget-packages) package. For this blog, we are going to use the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) NuGet package. ``` cd BlazorElectronApp dotnet add package Syncfusion.Blazor.Grid ``` **Step3:** Then, open the **~/Startup.cs** file from the application and add the Syncfusion Blazor Service in the ** ConfigureServices** method, like in the following code example. ``` using Syncfusion.Blazor; public class Startup { …… …… public void ConfigureServices(IServiceCollection services) { …… …… services.AddSyncfusionBlazor(); } } ``` **Step 4:** Now, open the **~/Pages/_Host.cshtml** file and add the Syncfusion theme reference in the tag. Refer to the following code example. ``` @page "/" …… …… …… …… …… …… ``` **Step 5:** Finally, add the Syncfusion Blazor DataGrid component in the **~/Pages/Index.razor** page. Refer to the following code example. ``` @page "/" @using Syncfusion.Blazor.Grids @code{ public List Orders { get; set; } protected override void OnInitialized() { Orders = Enumerable.Range(1, 25).Select(x => new Order() { OrderID = 1000 + x, CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], Freight = 2.1 * x, OrderDate = DateTime.Now.AddDays(-x), }).ToList(); } public class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } public DateTime? OrderDate { get; set; } public double? Freight { get; set; } } } ``` Now, the created Blazor server-side application with the Syncfusion DataGrid component is ready to launch without the Electron setup. ## **Configure the Electron setup in application** Please follow these steps to configure the Electron setup into the Blazor server-side application: **Step 1:** First, install the [ElectronNET.API](https://www.nuget.org/packages/ElectronNET.API/) NuGet package in the application. [Electron.NET](https://github.com/ElectronNET/Electron.NET) is a wrapper for the Electron application with embedded .NET API. ``` dotnet add package ElectronNET.API ``` **Step 2:** Next, create a local .NET tool manifest file by running the following command line. This will create a manifest file in the **~/.config/dotnet-tools.json** location. ``` dotnet new tool-manifest ``` ![dotnet new tool manifest](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/dotnet-new-tool-manifest.png) **Step 3:** Then, install the electronize tool locally in the project by running the following command line. ``` dotnet tool install ElectronNET.CLI ``` **![dotnet tool install ElectronNET](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/dotnet-tool-install-ElectronNET.png)Step 4:** Run the following command to configure the Electron.NET manifest and update the application launch profiles. ``` dotnet electronize init ``` **![dotnet electronize init](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/dotnet-electronize-init.png)Step 5:** Now, integrate the Electron.NET in the **~/Program.cs** file. Refer to the following code example. ``` using ElectronNET.API; public class Program { ..... ..... public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseElectron(args); webBuilder.UseStartup(); }); } ``` **Step 6:** Then, add this code in the **~/Startup.cs** file to open the Electron window. ``` using ElectronNET.API; public class Startup { …… …… public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { …… …… // Open the Electron-Window Task.Run(async () => await Electron.WindowManager.CreateWindowAsync()); } } ``` **Step 7:** Now, run the application using the following command line. ``` dotnet electronize start ``` **Note:** The electronize start will take some time for its initial launch. But it will be fast in subsequent launches. Then, our Blazor server-side application will open in the cross-platform desktop Electron shell with the DataGrid component. ![Syncfusion Blazor DataGrid in Desktop Electron Shell](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Syncfusion-Blazor-DataGrid-in-Desktop-Electron-Shell.png) Syncfusion Blazor DataGrid in Desktop Electron Shell **Step 8:** Finally, run these command lines to do production builds based on platform. ``` dotnet electronize build /target win dotnet electronize build /target osx dotnet electronize build /target linux ``` ## **GitHub reference** For more information, refer to the complete working example, [Exploring Syncfusion Blazor components on a cross-platform desktop app using Electron](https://github.com/syncfusionexamples/blazor-electron-app) . ## **Conclusion** Thanks for reading! In this blog post, we have seen the steps to integrate Syncfusion [Blazor components](https://www.syncfusion.com/blazor-components) in a cross-platform desktop app using the Electron framework. Try out the steps given in this blog post and leave your feedback in the comments section. The Syncfusion Blazor suite offers over 65 high-performance, lightweight, and responsive UI components for the web, including file-format libraries, in a single package. Use them to build stunning web applications! For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. Also, try our samples from this [GitHub](https://github.com/syncfusion) location. You can contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/flutter) . We are always happy to assist you! ## **Related blogs** - [What’s New in 2021 Volume 1: Blazor](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-1-blazor.aspx) - [3 Different Hosting Models in Blazor](https://www.syncfusion.com/blogs/post/3-blazor-hosting-models.aspx) - [Easy Steps to Create a Blazor Server App with Authentication](https://www.syncfusion.com/blogs/post/easy-steps-create-a-blazor-server-app-with-authentication.aspx) - [Exploring Blazor Hybrid App using Mobile Blazor Bindings](https://www.syncfusion.com/blogs/post/blazor-hybrid-apps-using-mobile-blazor-bindings.aspx)