Electron is a cross-platform (Windows, Linux, and Mac) library for building desktop applications using JavaScript, HTML, and CSS. Even if you have never head of Electron I’m sure you have used some of the desktop applications it has been used to build such as Visual Studio Code, Atom, Slack.
Electron.NET provides a wrapper around Electron with an ASP.NET Core MVC application in the mix. Here is the reason why this was done from the creates of the project.
Well… there are lots of different approaches how to get a X-plat desktop app running. We thought it would be nice for .NET devs to use the ASP.NET Core environment and just embed it inside a pretty robust X-plat enviroment called Electron. Porting Electron to .NET is not a goal of this project, at least we don’t have any clue how to do it. We just combine ASP.NET Core & Electron.
Project Creation
Seems only fitting to use VS Code for this post since it is built using the same base library. From the command line create a new ASP.NET Core MVC application using the following command.
dotnet new mvc
Make note that it is important at this time that you use the MVC template when attempting this and not a Razor Page application. This is more of a warning if you are using Visual Studio to do your project creation and not the CLI command above.
Next, we need to reference the ElectronNET.API NuGet package which can be added using the following command.
dotnet add package ElectronNet.API
Then, open the csproj and add a reference for the Electron.NET CLI tool which should match the following.
<ItemGroup>
<DotNetCliToolReference Include="ElectronNET.CLI" Version="0.0.9" />
</ItemGroup>
After that make sure and restore packages using the following command.
dotnet restore
Wire-up Election.NET
Open Program.cs and add UseElectron(args) to the WebHost builder chain.
WebHost.CreateDefaultBuilder(args)
.UseElectron(args)
.UseStartup<Startup>()
.Build();
Net, open Startup.cs and add the following line to the bottom of the Configure function. This is what will open the Electron window on startup.
Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
Finally, run the following from the command prompt to get the project ready to run under Electron. This should only need to be done once.
dotnet electronize init
Run the application
At this point, the application is ready to go. The neat part is you can just hit F5 and it will run like any normal ASP.NET Core application (this would change when you get into Electron specific calls I’m sure) or if you run the following command it will run inside of the Electron shell.
dotnet electronize start
Wrapping up
It was surprisingly simple to get a new application up and running, of course so far the app isn’t anything other than a web site hosted in Electron. My plan is to take this base application and create my normal basic contacts application, which will be the next post. From there I may look into layering in some Electron features.
The completed code can be found here.
Also published on Medium.
Thought it was an April Fools joke at first. Interesting idea. ? As long as the performance is good, I can see this being useful for those who want to get into the cross platform desktop app world without having to learn modern JavaScript.
That is funny. I should have thought about it being April Fools. Haven’t tested performance but feels close to the same speed as a normal ASP.NET Core site.
please give me some ideas how i create exe and other executable file for other platfrom
Sorry, I don’t have any tips on that. I only have a Windows PC so I have had a chance to play with this on Linux or Mac.
This really doesn’t fly. Why would I want to install Electron which is 122 MB and 1,349 files!
JavaScript apps commonly deliver 10,000+ files and this is absolutely awful to copy around and manage.
It is a perfectly good solution for a lot of cases. Plus you can package it up for distribution like is done for other electron applications such as Slack and Visual Studio Code.
Hello, I tried this out using Visual Studio 2019 Community Version. The project creates the electron shell and displays the start page, however, I am receiving JQuery errors – util.js:55 Uncaught TypeError: Cannot read property ‘fn’ of undefined. Any suggestions on how to resolve these? If I use plain java script I do not receive any errors, however, in order to use bootstrap and other javascript libraries, I will need to use Jquery. Any help would be appreciated
Sorry, Aurn, I don’t know what the issue is. My guess is you have some files that aren’t getting to the right directory where the application can access them, but that is just a guess.
@Arun I have the same issue as you. Same file, same error: Query errors – util.js:55 Uncaught TypeError: Cannot read property ‘fn’ of undefined.
Were you able to solve this problem?