Could Blazor work on Electron to make cross-platform desktop apps?

[chris-ray]

I wonder if it would be possible to marry Blazor and Electron for an all (or nearly all) c# cross-platform desktop application development experience?

[ddizh]

offtop: Browser + Razor + Electron = guess what...

[SteveSandersonMS]

There is already a project that does this - https://github.com/ElectronNET/Electron.NET. Theoretically yes you could use Blazor to coordinate the UI, but it's not a scenario we're focusing on at the moment.

[dotChris90]

not just theoretically. I tried it. It actual works. :D and Looks extrem nice. You can do

• look at https://learn-blazor.com/getting-started/getting-blazor/ and install Visual Studio template
• make a new solution and select Blazor Project (I tried on .NET Code)
• there will be 3 Projects Client and Server + Shared (be careful)
• start Server and try it out in your browser
• now the Electron.NET Part see https://github.com/ElectronNET/Electron.NET
• add package ElectronNET.API
• follow their Github page and add .UseElectron(args) to program.cs (using Electron.API namespace)
• add Task.Run(async () => await Electron.WindowManager.CreateWindowAsync()); to Startup.cs (u have to care the namespaces for sure)
• add package package Electron.CLI
• modify the csproj file for CLI Tools
• maybe a restore and build command
• command line commands : dotnet electronize init and dotnet electronize start
• there could be Anti-Virus SW and so which is freaking out because ELECTRON.NET Create a browser view based GUI (allow)
• finish

[rocuh]

Just for anyone else curious and finding this issue - you can use the standard electron, example here:

https://github.com/roceh/electronblazortest

Even though its very early days I do find the data binding much easier to use in Blazor than XAML personally.

[bryanrcarlson]

... and now we know one reason Microsoft bought Github (the creators/maintainers of Electron)

[chris-ray]

Called it.

[danroth27]

Here's a screenshot of a recent experiment we did to do a partial port of the Azure Storage Explorer (Electron app written in JS) to Blazor + Electron.NET and then ran it on a Mac:

This was just an experiment, but the startup perf looks great the UI perf is nice and fluid.

[attilah]

dotnet new blazor-electron-vscode-like-app --name AwesomeBlazor

[miadey]

Listview, tabs, popup! Did you guys used Bootstrap to create the UI?

[chris-ray]

@danroth27 is that experiment open-source? In a repo anywhere?

[SteveSandersonMS]

@chris-ray No, it was just an internal experiment to help us understand how well it would work and what sort of architectural adjustments it would require.

[DNF-SaS]

@SteveSandersonMS Just cloned and ran the Electron-Experiment - with debugger-support! Very cool!

[k563]

Blazor + Electron would be ideal for our scenario : we build control systems for complicated science equipment (high powered lasers) interfacing with specialist cameras, actuators and so on. The control logic is in C#, and we'd really like to have an HTML based UI (currently using WinForms and WPF).

[Suchiman]

For those that didn't watch the community standup, here's steve's electron sample app https://github.com/SteveSandersonMS/BlazorElectronExperiment.Sample

[JacobMillward]

I can't seem to follow @dotChris90 's instructions with Blazor 0.4.0, which is a shame! Electron complains about being included with a netstandard2.0 project 😐

[MoneerShatat]

I tried the Sample from Steve and it works fine for me. This is great, I hope this experiment became official project. Great job thank you.

[mblataric]

This is brilliant. Please, please support this. We are trying to find appropriate technology to port our huge and complex financial app and browser just isn’t cut to it and never will be. Yes, part of app can be in browser, but main parts, massive data entry, connection to devices like scanners, barcode readers, RFID scanners ... browser will never be a platform for such scenarios. But electron plus Blazor ... getting serious goosebumps. OOB Silverlight was so close a long time ago, please don’t make this another OOB Silverlight. No Balmer to blame this time as well :-)

[Andy-London]

This is very useful in our case. We can easily convert our WPF+Winforms thick client to Blazor + Electron. Are there any plans to make it one of Blazor hosting modes?

[mihail-shishkov]

Server side Blazor is now official project and will ship in core 3.0. Given that, Electron + Server side Blazor will be the true cross platform experience. You don't even have to depend on webassembly and you can take advantage of all core 3.0 can do (full debugger support for example). Everything runs locally so no need to worry about UI responsiveness and signalr connection problems.

[alastairgould]

I've tried the experiment at https://github.com/SteveSandersonMS/BlazorElectronExperiment.Sample, allowed me to create a nice looking cross platform UI pretty quickly.

Would be nice if it was more officially supported.

[abeham]

I noticed that using Electron is much faster and much more responsive. Starting the application it loads almost instantly. In browsers this takes quite some time.

I have experimented with long running, computationally heavy methods started with Task.Run at a button click. I am using classic .NET events to report updates. The event handlers then call StateHasChanged to update the UI. In Client-side blazor this was simply ignored and the UI was updated only after the long running method finished (I assume because client-side Blazor is single-threaded). In server-side Blazor I injected a service and polled every second to display a status update. In the BlazorElectronExperiment.Sample above the client-side blazor code was doing all UI updates properly and also pretty fast.

[wakuflair]

I think this is the Winform/WPF killer, MS won't like it:)

[abeham]

Dead tech doesn't need to be killed. Rather it's artificially kept alive, because of a lack of alternatives. Even this is not production-ready yet and who knows when it will be. The desktop has not gone away and I doubt it will, rather it has diversified and successful apps need to go x-plat. MS seems to be highly interested to bind developers to their stacks, though they still lack an idea on how to turn that into money. I will not be surprised if eventually we have to pay for this. MS earns nothing from an x-plat app running on Linux. And Azure can hardly provide some value for desktop apps. I think that's the dilemma, not that they don't like it. Eventually, we'll see this with a GPL license sticker and have a commercial licensing option. :-)

[mblataric]

I would not mind paying for it a single bit. It is the cleanest financial model - there is a product you like, product which enables you to make money, you pay for it, you get the product, end of story. Infinitely better than various ad-based models where I am turned into a product to get "free stuff". No thanks.

[rubenwe]

I would also be super interested in the blazor+electron combination for creating cross platform tools. The software projects of the company I work for are quite desktop focused (WinForms/WPF). Looking at our customer base and feedback I'm sure that an increasing amount would love to see cross platform support.

Most devs in my team know their way around C#.NET - so the switch to blazor running in electron would be a good upgrade path.

[abeham]

Speaking of which @rubenwe , I had trouble getting the Electron example to work with components (incl. Layout and Navigation) in a shared dll. It worked fine in client-side blazor and server-side blazor. Did you have any success?

[kripergvg]

Am I only one who thinks that everything goes wrong? Why can't we just have html+css render in .NET and some .NET API for manipulating with DOM? Why we need so many other things (V8, JavaScript, WASM, etc)?

[DNF-SaS]

@kripergvg You can modify DOM only by using JS atm.

[xclud]

Is there any ETA on getting C# directly work with DOM rather than interop by JS?

[ransagy]

Not anytime soon i imagine - that would need WebAssembly as a standard to have direct access to all browser APIs/DOM, this updated spec implemented and shipped in the browsers, Mono to implement whatever's needed to support it and then Blazor can take advantage of that.

No idea if that's even on the cards in WASM's future right now.

[grofit]

Have just had a stab at it with latest .net core etc and some stumbling blocks I found incase anyone else is trying to get this working:

• Had to make Blazor app with ASP .NET Core Hosting (there are now 4 options I think)
• Had to manually change the APP project to be a coreapp2.1 and output as a console application to get Electron.API to include
• Had to manually add <TargetLatestRuntimePatch>true</TargetLatestRuntimePatch> for running the app project

  <PropertyGroup>
      <TargetFramework>netcoreapp2.1</TargetFramework>
      <LangVersion>7.3</LangVersion>
      <!-- The linker is not beneficial for server-side execution. Re-enable this if you switch to WebAssembly execution. -->
      <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
      <TargetLatestRuntimePatch>true</TargetLatestRuntimePatch>
  </PropertyGroup>

[MoneerShatat]

for all who interested in running blazor on electron, there is an interesting framework called bionic. see the documentation. here

[199621616]

大量的WinForm、WPF应用无法直接转型为互联网现代应用。难道不能考虑走这个路径：Asp.NetCore WebApi + Blazor + WinForm（WPF）？像mblataric所说的，“海量数据输入，与扫描仪，条形码阅读器，RFID扫描仪等设备的连接......浏览器永远不会成为这种情况的平台。",而WebApi + Blazor + WinForm(WPF)则很容易做到这一点。让WinForm(WPF)直接托管Blazor!实现真正的C#全栈开发。

[Arshia001]

Am I actually the only one here who thinks this is the most roundabout way of doing cross platform UI in C#?

[ransagy]

It's all about standards. HTML/CSS is the UI standard for most platforms. Electron enables it in others.

[Arshia001]

It's not the standard for any platform (except maybe chrome OS?). It's just that it was there, and people seemed to think it was a good idea to use it to make apps. But this is just too much for me. C# on WASM on electron on chromium on native UI? And that's not mentioning it'll run on mono (as opposed to console/server apps which run on dot net core). Can't we just have C# on native UI?

[chris-ray]

@Arshia001 It's not about layers-on-layers (or standards, in my opinion), it's about having a single UI that is reusable with very little effort between web and desktop. If a little bit of tweaking opens up an entire target that is used by all those people then profit! By the way the electron target does not use mono, it runs dot net core in my understanding.

[ransagy]

@Arshia001 It's the de facto standard for the web for quite a few years now, and the web standard has become the de facto way of doing UI in a lot of popular platforms. I say this as a prominently XAML enthusiast developer.

Whether or not it was or is a good idea - It's still what it is.

[grofit]

If we take away performance as a discussion point and look at the actual UI creation and interaction tech, web is miles ahead of anything else. It can do simple forms, complex 3d rendering and anything in between, almost every company employs someone who knows web tech (Css/Html/Js) and its super easy for people to learn compared to things like Winforms, Xaml, QT, Xamarin etc and the tooling is pretty simple (a text document saved as html at minimum) (lets not get into the debate about webpack and modules etc, which are awful).

So what does any other UI framework do better than the web stuff? none really do anything better, there is some semi niche stuff in XAML to do with Grid stuff but the web has adopted that recently anyway, so thats a moot point, as flexbox pretty much ticks off dockable areas.

So given web technologies are:

• Easy to pick up
• Well supported with large communities
• Huge eco system for mockups, prototypes and generators
• LOADS of drop in style frameworks for consistent uis
• Lots of devs already know this
• Works on all platforms where a web browser runs

The positives are pretty good, I can make one UI and have it just work on many platforms without worrying about the native ui frameworks, paradigms etc. It is a HUGE dev effort trying to maintain one app on multiple platforms each having their own UI frameworks and languages etc.

The only down side that everyone complains about with Electron (and its ilk) are "its slow" and it is, but for most people thats not a problem as its "fast enough", look at VSCode, Discord, GitKraken and other apps which are all run via Electron.

So you are able to design a consistent UI experience, with a single code base of well known technologies (regardless of if you like JS or not, its well known and supported, I dislike it but use typescript), and its cheaper to hire for and maintain, trying to get devs for specific UI frameworks its time consuming and costly, like trying to get a WPF dev will cost you a lot more than a web dev and unless your application is performance critical you would probably get a better looking app from the web dev than the wpf dev (making this MASSIVE assumption because you can just use bootstrap or other pre made style frameworks, so even devs who are awful at design can make nice looking things without much effort).

So if we remove the performance concern (and its not really THAT much of a concern if the app is written well) there seems to be little other downsides to using web tech via electron electron vs any other native UI framework.

[Arshia001]

Is CSS really super easy to learn compared to other UI styling options? Because I can always get what I want in native Android, native iOS, WinForms, WPF and Xamarin forms (maybe some other frameworks I can't remember now too) with minimal effort but I still can't get a div to stick to the bottom of the page nicely without a google search. Then there's all the tech you don't get with electron (try ARKit). And then there's performance, which does matter in some situations.

All in all, I don't think web is the best possible option, it's just the only option as of this time and date. As long as it works for the app you're making, great! But it'll inevitably stop working in some situations, and that's a wall you have to plan on hitting some day.

@chris-ray are you sure about electron targeting dot net core? As far as I can reason, Blazor runs on mono, which in turn runs on WASM. Unless someone went out of their way to create a second dot net core based implementation of blazor (unlikely, given the title of this exact issue) it'll still run on mono.

[chris-ray]

@Arshia001 Even though I'm OP on this issue, I haven't actually gotten around to playing with it, but I'm pretty sure blazor on electron runs on dotnetcore, not mono. @danroth27 can confirm.

[Arshia001]

Bet you 50 SO reputation it runs on mono.

[richbryant]

I'll take that bet. It runs on Core.

[ransagy]

The demo Steve did runs on Core in a separate process inside electron. Dan/steve can confirm.

[richbryant]

Yep. Cough up.

https://github.com/SteveSandersonMS/BlazorElectronExperiment.Sample?WT.mc_id=-blog-scottha

[Arshia001]

Well I wasn't talking about the demo, I was talking about the general case, including bionic. If it is indeed possible to run the dot net part on core, I'm crazy interested as well 😁 and my bet was with @chris-ray, so I'll willingly pay him.

[Arshia001]

So, I'm just exploring that demo and the supporting BlazorElectron package right now. Am I right in thinking it's using core to run electron in the first place? I thought electron came with prebuilt binaries... Can someone please explain how all of this works?

[chris-ray]

@arshia001 keep it, we're all learning here :)

[aammfe]

I admit html and css way is most optimal to create UI but issue is, we are forgetting Electron has node server running underneath.

combination of Electron and .net core is really like layer after layer.

Really admit and want to use html css as UI layer but it would be great if we skip node layer which is killing me.

there is a project https://github.com/mattkol/Chromely which skips node and use Chormium bindings and directly use .net core directly.

I think its better way instend of directly using Electron.

[Arshia001]

@aammfe Yes, that's what I said. But, come to think of it, it doesn't have to run on "client-side" blazor. It can run on "server-side" blazor (remember, the "server" is also right there inside the application), which means it will be running on the local dotnet core runtime. The only thing I don't understand is how one can host an electron UI inside a dotnet app (it has a standalone executable as far as I know), but that's a different thing entirely. Just found Electron.NET. So it's completely feasible.