Building Cross-Platform Desktop Apps with Electron.NET

noiembrie 15, 2020

This article provides a walk-through for developing and deploying an application with Electron.NET.

Create an ASP. NET Core Web Application

For this exercise, I'm using Visual Studio Code. First, open a terminal window and run the following commands to create a new project called ElectronMvcDemo.

mkdir ElectronMvcDemo

cd ElectronMvcDemo

dotnet new webapp

code .

When prompted by Visual Studio Code, say Yes to load the required assets for the project. Press F5 to build and run the application, opening a browser on the default ASP. NET Core welcome page, hosted on localhost:5001. Close the page, return to VS Code and stop debugging.

Electronize It!

Now let's turn our boilerplate ASP. NET Core project into an Electron application. First, open the file ElectronMvcDemo.csproj and insert a package reference for the Electron.NET:

</ItemGroup>

Save the file( dotnet restore ).

Next, edit Program.cs and insert a using statement for the newly added package:

using ElectronNET.API;

Locate the static method CreateHostBuilder and insert the following two lines before the call to UseStartup:

webBuilder.UseElectron(args);

webBuilder.UseEnvironment("Development");

The first line is necessary. The second is convenient during development, as it allows detailed error messages to be displayed.

Edit Startup.cs and insert the following using statements:

using ElectronNET.API;

using ElectronNET.API.Entities;

using System.Runtime.InteropServices;

Locate the Configure method and add the following lines to the end of its body:

if (HybridSupport.IsElectronActive)

{

CreateWindow();

}

Finally, add the following method to the Startup class to create the main Electron window:

private async void CreateWindow()

{

var window = await Electron.WindowManager.CreateWindowAsync();

window.OnClosed += () => {

Electron.App.Quit();

};

}

Install the Command Line Tool

In VS Code, create a new terminal window and type:

dotnet tool install ElectronNET.CLI -g

This one-time step will install a .NET Core global tool that implements a command named electronize. To see a list of tools/commands installed on your system, type the following:

dotnet tool list -g

Run the Electronized Application

After installing the command-line tool, type these lines in the VS Code terminal window:

electronize init

electronize start

The first line is a one-time step that creates a manifest file named electron.manifest.json and adds it to your project. The second line is used to launch the Electron application (don't use F5, as this will only open the ASP. NET Core application in the browser). Note that the content now appears in an application window, not a browser.

www.blogger.my.blog()