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?

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

[aammfe]

@Arshia001 Electron.net is layer on layer which is painfull.

[Arshia001]

It's layer alongside layer afaik.

[199621616]

最好不加这个Electron，直接在.Net Core上托管Blazor或RazorComponents，在本机由Asp.Net Core替代Nodes.js,由WPF替代Electron的本机UI部分，然后调用云端WebApi，实现真正的C#全栈开发。如果能跨平台最好，即便不能跨平台，仅在Windows上实现，也足以解决我们目前面临的传统WinFrom或WPF应用现代化、互联网化的问题。

[aammfe]

@199621616
its been done by https://github.com/mattkol/Chromely

[Daddoon]

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.

Hello @danroth27 , is your Azure Storage Explorer source code available somewhere ?

I'm actually re-working my Blazor.Xamarin plugin in order to make it works with Blazor 0.8.0, on UWP, iOS 12 and Android 4.4 and more .

There is work to do on the Android side, as Android WebView renderer is old , and even some recent Chrome for Android version does not support WebAssembly by default. I managed to create Xamarin Bindings for GeckoView usage on Xamarin as a WebView replacement, and Blazor works like a charm even on an old Android 4.4.

When all thoses works will be done, it would be nice, as a proof of concept, to see if i can embed and load Azure Storage Explorer on theses platform. Looking them from a tablet on iOS or Android as a standalone app would be nice !

[danroth27]

Hi @Daddoon,

The code for the Azure Storage Explorer is not public. Maybe you could try the pizza store app from the Blazor workshop instead? https://aka.ms/blazorworkshop.

Also, please note that we're aren't monitoring this issue tracker closely anymore. If you have Blazor questions or issues please open them on the https://github.com/aspnet/aspnetcore repo.

[xclud]

Any chance to get the source code of @SteveSandersonMS demo at NDC-London?

[danroth27]

@xclud Which one are you looking for? One of these?:

• https://github.com/SteveSandersonMS/RazorComponentsSentimentAnalysis
• https://github.com/danroth27/RazorComponentDemos
• https://github.com/danroth27/BlazorExcelSpreadsheet

[xclud]

@danroth27 Thank you. I was looking for RazorComponentDemos but the two also are great to have.

[default-writer]

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)?

Actually, by adding .NET Core hosting capabilities to Electron, we instantly get all benefits of Blazor Server Side Rendering