Hackernoon logoBuilding An Electron App with .Net, JS, HTML and CSS by@holubiev

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

Building an Electron App with.Net, JS, HTML and CSS in a.NET desktop application? We host.NET inside Electron.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. You have to get "electronnet.manifest.json" file in an ASP.NET folder. It's your electron-builder configuration file. Get all settings here https://www.electron.net.build/
image
Oleksii Holubiev Hacker Noon profile picture

@holubievOleksii Holubiev

Lead Software Engineer. Cyber Security Expert.

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

image

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.