Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron
Tags: blazor, webdev, csharp, dotnet
Published: 2021-05-06 13:05:58

---
title: Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron
published: true
date: 2021-05-06 10:00:40 UTC
tags: blazor, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/exploring-syncfusion-blazor-components-on-cross-platform-desktop-apps-using-electron.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Exploring-Syncfusion-Blazor-Components-on-Cross-Platform-Desktop-App-using-672x372.png
---
Syncfusion’s native [Blazor UI components](https://www.syncfusion.com/blazor-components "Link to Syncfusion 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/ "Link to Electron JS") 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 "Link to download .NET Core 3.1 SDK") or [.NET 5.0 SDK](https://dotnet.microsoft.com/download/dotnet/5.0 "Link to download .NET 5.0 SDK")
- [Node.js](https://nodejs.org/en/ "Link to download Node JS")

## **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**.

```cmd
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 "Link to download Syncfusion Blazor NuGet packages") package.

For this blog, we are going to use the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/ "Link to download Syncfusion Blazor Grid NuGet package") NuGet package.

```cmd
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.

```csharp
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 <head> tag. Refer to the following code example.

```html
@page "/"
……
……
<!DOCTYPE html>
    <html lang="en">
        <head>
            ……
            ……
            <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
        </head>
        ……
        ……
    </html>

```

**Step 5:** Finally, add the Syncfusion Blazor DataGrid component in the **~/Pages/Index.razor** page. Refer to the following code example.

```html
@page "/"
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true">
    <GridPageSettings PageSize="5"></GridPageSettings>
        <GridColumns>
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        </GridColumns>
</SfGrid>

@code{
public List<Order> 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/ "Link to download ElectronNET.API NuGet package") NuGet package in the application. [Electron.NET](https://github.com/ElectronNET/Electron.NET "Link to Electron.NET project") is a wrapper for the Electron application with embedded .NET API.

```cmd
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.

```cmd
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.

```cmd
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.

```cmd
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.

```csharp
using ElectronNET.API;

public class Program
{
    .....
    .....

    public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
    .ConfigureWebHostDefaults(webBuilder =>
    {
        webBuilder.UseElectron(args);
        webBuilder.UseStartup<Startup>();
    });
}

```

**Step 6:** Then, add this code in the **~/Startup.cs** file to open the Electron window.

```csharp
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.

```cmd
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)<figcaption>Syncfusion Blazor DataGrid in Desktop Electron Shell</figcaption>

**Step 8:** Finally, run these command lines to do production builds based on platform.

```cmd
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 "Link to Blazor Electron App project").

## **Conclusion**

Thanks for reading! In this blog post, we have seen the steps to integrate Syncfusion [Blazor components](https://www.syncfusion.com/blazor-components "Link to Syncfusion 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 "Link to download Syncfusion components") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to download Syncfusion 30 days free trial") to check out our available features. Also, try our samples from this [GitHub](https://github.com/syncfusion "Link to check-out Syncfusion project examples") location.

You can contact us through our [support forum](https://www.syncfusion.com/forums "Link to Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to Syncfusion support system"), or [feedback portal](https://www.syncfusion.com/feedback/flutter "Link to Syncfusion feedback portal"). We are always happy to assist you!

## **Related blogs**

- [What’s New in 2021 Volume 1: Blazor](https://dev.to/sureshmohan/what-s-new-in-2021-volume-1-blazor-1g2l-temp-slug-5215957 "Link to the article What’s New in 2021 Volume 1: Blazor")
- [3 Different Hosting Models in Blazor](https://dev.to/syncfusion/3-different-hosting-models-in-blazor-5ckn "Link to the article 3 Different Hosting Models in Blazor")
- [Easy Steps to Create a Blazor Server App with Authentication](https://dev.to/syncfusion/easy-steps-to-create-a-blazor-server-app-with-authentication-18j7 "Link to the article Easy Steps to Create a Blazor Server App with Authentication")
- [Exploring Blazor Hybrid App using Mobile Blazor Bindings](https://dev.to/syncfusion/exploring-blazor-hybrid-app-using-mobile-blazor-bindings-1o49 "Link to the article Exploring Blazor Hybrid App using Mobile Blazor Bindings")