Building An Electron App with .Net, JS, HTML and CSS

.NET has two big desktop technologies. They are WinForms and WPF. But we live in a WEB world and we have many tools to create great UI using CSS and JavaScript. So how can we use HTML, CSS, and JavaScript in a .NET desktop application?

Please welcome, Electron.NET.

We host .NET inside Electron. Electron starts .NET and our View in Renderer Process. Then It looks like a regular .NET app. You can send requests to a .NET host and get responses.

Usage

Install Nugget Package

PM> Install-Package ElectronNET.API

.NET process is self-hosted and managed by Kestrel web server. You need add at Program.cs

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

And starting VIEW

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    // Open the Electron-Window here
    Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
}

How to start

Install Electron.NET CLI

dotnet tool install ElectronNET.CLI -g

Goto ASP.NET folder and run for the first run.

electronize init

You have to get "electronnet.manifest.json" file in an ASP.NET folder. It's your electron-builder configuration file. You can find all settings here https://www.electron.build/

Start app

electronize start

Or you can watch for file changing with

electronize start /watch

How to build an installer?

electronize build /target win
electronize build /target osx
electronize build /target linux

You can specify your .NET build

electronize.exe build /target custom win-x86;win /dotnet-configuration Debug /electron-arch ia32

How to call Electron API?

You can find API usages in special demo package https://github.com/ElectronNET/electron.net-api-demos