Building Cross-Platform Desktop Apps With Electron.NET

In this post, we will see how we can create Desktop Apps using Electron.

What is Electron?

Electron is a framework that supports the development of Desktop applications using web technology. Using Electron .NET wrapper we can create a Desktop app for Windows, macOS, LINUX operating systems.
Visual Studio Code and GitHub Desktop and many more desktop applications built using Electron.
Prerequisite Software
  • Node JS
  • .NET Core 3.1 or above
  • Install the Electron command-line tool using the following command

    dotnet tool install ElectronNET.CLI -g

Create an ASP.NET Core web application

We are using Visual Studio 2019 to create a web application. Open up Visual Studio and create ASP.NET Web app
Building Cross-Platform Desktop Apps With Electron.NET
Building Cross-Platform Desktop Apps With Electron.NET
Building Cross-Platform Desktop Apps With Electron.NET
Now let's add Electron package references to the project.
Install-Package ElectronNET.API -Version 9.31.2
Next open Program.cs file and add namespaces for a new package.
using ElectronNET.API;
Go to CreateHostBuilder method and add following two lines before the UseStartup 
  1. webBuilder.UseElectron(args);//This line is required  
  2. webBuilder.UseEnvironment("Development");  
Open Startup.cs file and add following namespaces,
  1. using ElectronNET.API;     
  2. using ElectronNET.API.Entities;     
  3. using System.Runtime.InteropServices;     
Go to Configure Method and add following line of code at the end of method
  1. if (HybridSupport.IsElectronActive)  
  2.    { CreateWindow();  
  3. }  
Now add the following method in Startup class to create main Electron window. 
  1. private async void CreateWindow() {  
  2.     CreateMenu();  
  3.     var window = await Electron.WindowManager.CreateWindowAsync();  
  4.     window.OnClosed += () => {  
  5.         Electron.App.Quit();  
  6.     };  
  7. }   
Run the Application
If you have installed the Electron CLI then open the command-line tool and go to the File path where your .csproj file exist in file explorer and put the following command,
electronize init
electronize start /watch
electronize init is one time command when you run the application for the first time.
electonize start /watch This command is to run the application and also get refreshed automatically if any changes doing in code. It will launch the window application.
Building Cross-Platform Desktop Apps With Electron.NET
Click here to read the complete article.

Similar Articles