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
30 changes: 15 additions & 15 deletions blazor/getting-started/blazor-electron-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,54 +9,54 @@ documentation: ug

# Creating Desktop Application using Blazor and Electron

This section explains how to create and run desktop applications using Blazor and Electron Framework with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
This section explains how to create and run a desktop application by using Blazor and the Electron.NET framework with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.

## What is Electron?

[Electron](https://www.electronjs.org/) framework for 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.
[Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applications with web technologies. It utilizes `Node.js` and the `Chromium` rendering engine to run a web application in a desktop shell.

## Create a Blazor server-side application

You can create Blazor Server application using either CLI or Visual Studio referring the below links
Create a Blazor Server application by using either the CLI or Visual Studio:

* [Create Blazor server application using CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
* [Create a Blazor Server application by using the CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)

* [Create Blazor Server application using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
* [Create a Blazor Server application by using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)

N> This setup does not work with Target Frameworks greater than .NET 6. For more details and troubleshooting, refer to this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060).
N> This setup does not work with target frameworks greater than .NET 6. For details and troubleshooting, see this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060).

## Configure Electron in Blazor App

You can run the below commands either in **Visual Studio Developer Command Prompt** or **CLI** based on the tool you are using for development.
Run the following commands in either the **Visual Studio Developer Command Prompt** or a **command-line interface (CLI)** based on the development environment.

1.Install [ElectronNET.API](https://www.nuget.org/packages/ElectronNET.API/) NuGet package in the application.

```
dotnet add package ElectronNET.API
```

2.Create a local .NET tool manifest file by running the following command. This will create a manifest file in the **~/.config/dotnet-tools.json** location.
2.Create a local .NET tool manifest file by running the following command. This creates a manifest file at **~/.config/dotnet-tools.json** in the current project.

```
dotnet new tool-manifest
```

![.NET tool manifest file](images\electron\net-tool-manifest.png)
![.NET tool manifest file](images/electron/net-tool-manifest.png)

3.Install the tool locally in the project by running the below command.

```
dotnet tool install ElectronNET.CLI
```

![Electron NET CLI](images\electron\net-cli.png)
![Electron.NET CLI installation](images/electron/net-cli.png)

4.Run the below command to configure Electron.NET manifest tool and update the launch profile of the application.

```
dotnet electronize init
```
![Update launch profile](images\electron\update-launch-profile.png)
![Update launch profile for Electron.NET](images/electron/update-launch-profile.png)

5.To integrate `Electron.NET` in the application add the below code in **~/Program.cs** file of the application.

Expand Down Expand Up @@ -113,9 +113,9 @@ var app = builder.Build();
dotnet electronize start
```

![Electron app output](images\electron\electron-grid-output.png)
![Electron app output](images/electron/electron-grid-output.png)

N> To close the electron app when closed the electron window add the below code in **//Open the Electron-Window** in step 6 in the **~/Program.cs** file of .NET 6 application.
N> To close the Electron app when the Electron window is closed, add the following code under **// Open the Electron-Window** in step 6 in the **~/Program.cs** file of a .NET 6 application.

{% tabs %}
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="14 15 16" %}
Expand Down Expand Up @@ -145,12 +145,12 @@ var app = builder.Build();
{% endhighlight %}
{% endtabs %}

8.Run the below command lines to do production builds based on platform
8.Run the following commands to create production builds for each platform.

```
dotnet electronize build /target win
dotnet electronize build /target osx
dotnet electronize build /target linux
```

N> [View the complete Blazor Server electron application with Syncfusion<sup style="font-size:70%">&reg;</sup> controls on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app)
N> [View the complete Blazor Server Electron application with Syncfusion<sup style="font-size:70%">&reg;</sup> components on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app)
Loading