This website uses cookies on its adverts and sponsored links. By clicking the "Accept" button you are consenting to their use.

Read more


Mobile Tech Tracker
≡ sections
Coding Courses

Tech Advice

Career Advice




Welcome to Mobile Tech Tracker. Our mission is to help technically-minded people to become better versions of themselves and to help ordinary people to use modern smart technologies to their own advantage.

We can provide consulting or programming training services, including authoring of courses and books. For enquiries, please contact

Building .NET Core desktop application

.NET Core is great for cross-platform app development. Unfortunately, the compatibility with multiple platforms was achieved primarily by excluding any components that are specific to Windows OS that it's predecessor, .NET Framework was built for. This is why, out of the box, .NET Core can only be used to build command line applications with no GUI and, with addition of ASP.NET packages, web application with nothing more than a standard functionality.

So, how can one build a .NET Core desktop application with GUI? Fortunately, the framework is extendable and the extendability goes above and beyond simply relying on NuGet packages.

Any common software functionality that isn't yet available in .NET Core is available via a more mature cross-platform software-building technology: Node.js. And the good news is that two frameworks can inter-operate easily.

In my previous article, I talked about how to play audio in .NET Core by using one of its standard libraries, NodeServices. In this article, I will talk about utilising Node.js from within a .NET Core app to build a desktop application with GUI. However, this time, the methodology is somewhat different.

You can build a GUI app in Node.js

Node.js is often referred to as server-side JavaScript. Although this statement is true, it only partially describes what Node.js does. More accurate description of the technology would be "JavaScript everywhere".

Indeed, Node.js can be used to build client-side apps. And, with aid of various frameworks, such as ==Electron==, it can be used to build a native GUI app on any operating system.

And desktop GUI apps based on Node.js and Electron are widespread. If you are familiar with Slack, an instant messaging platform, it's desktop client is an Electron app.

Slack Client

Here is how you can build a simple, but nonetheless useful, desktop app by using Electron. So, to avoid doing yet another "Hello World!" app, let's build a calculator.

It goes without saying that you need to install Node.js and get NPM enabled during the installation process. Once this step is done, you will need to create a directory for your project by running the following command inside the directory:

npm init

You can use default values for your project when prompted to modify them. This will create the basic structure for a fresh Node application with all the necessary files.

Next, you will need to install Electron as a development dependency by running the command below within the root folder of your project. If you want to know what the difference between dependencies and devDependencies is within your Node application, Dylan Avery explains it well in his blog post.

npm install --save-dev electron

Electron is not merely a library within Node. It is a framework of its own with separate runtime and processes. Therefore, it would not be easy just to launch Electron app from .NET Core code by using NodeServices mentioned previously. This is also why your package.json file needs to be modified as follows:

"scripts": {
  "start": "electron ."

If "start" element doesn't exist, one needs to be created. A standard Node application doesn't strictly require it.

Next, we will create a JavaScript file that will be used to open the GUI window. We will give the file the same name as specified under "main" attribute of package.json file. For the purpose of this example, let's assume that it's called index.js.

const {app, BrowserWindow}= require('electron')

function createWindow() {

  win = new BrowserWindow({width: 300, height: 300})
app.on('ready', createWindow)

Next, we will create the HTML markup for calculator GUI. In order to do this, we will create index.html file, into which you can copy any markup of HTML-based calculator application. I used the one from Emmanuel Ndubuisi's article. The markup is right at the bottom of the article. It is a great example of a calculator GUI.

The rest of the steps are exactly the same as they are with any standard Node.js app. You wold run "npm install" to download all the packages outlined in package.json file and "npm start" to start the actual application.

The full sample code is available in this GitHub repository, which you are free to use as you please.

Introducing Electron.NET

Node.js and Electron are more than adequate on their own for building native GUI apps. And there are plenty of free training resources available to get you started.

However, if you are primarily a .NET developer, especially someone who has previously specialised in desktop applications on .NET Framework, you may want to avoid learning yet another technology, unless you absolutely have to.

The good news is that there is a way of using Electron in your .NET Core application without having to know JavaScript. You can still write your desktop app by almost exclusively relying on compiled .NET languages that you are accustomed to. There is a NuGet package for that. It's called Electron.NET.

In order to build an electron app on .NET Core, you will first need to create a basic ASP.NET Core MVC app by either using standard Visual Studio wizard, or "dotnet new mvc" command. C# language examples will be used below. If you prefer to use any other .NET languages, you will need to adjust the instruction accordingly.

Next, you will need to add NuGet reference to the latest version of ElectronNET.API package. You can do so either by running the following command, or simply modifying your project file.

Install-Package ElectronNET.API

The NuGet package depends on dotnet client tool extension called ElectronNET.CLI. The extension will be needed later to build and run the app. Therefore, the following block needs to be added to the project file (.csproj if you are using C#):

  <DotNetCliToolReference Include="ElectronNET.CLI" Version="*" />

You will then need to modify Program.cs file. The code used to create WebHost builder should look like the following:


Finally, the following method needs to be added to the Startup class:

public async void Bootstrap()
  var options = new BrowserWindowOptions
    WebPreferences = new WebPreferences
      WebSecurity = false

  await Electron.WindowManager.CreateWindowAsync(options);

The call to Bootstrap() method needs to be placed right at the end of Configure() method of the Startup class

We are now ready to build and run the app. Before we do so, we need to run the following command to ensure that the custom dotnet command extension is available:

dotnet restore

After this, you will need to run the following command to build the application:

dotnet electronize init

Finally, the following command will launch the application:

dotnet electronize start

You can get the full sample of the code from this GitHub repository. Also, if you want to build something more exciting than just a bog-standard MVC app that launches itself in a window rather than in a browser, this article by Gregor Biswanger will show you how to build a music player.

Happy hacking!

Written by

Posted on 12 Aug 2018

Fiodar Sazanavets is a full stack software developer with several years of experience working in various industries. In his professional career, he has mainly worked with a number of different technologies from Microsoft stack, both back-end and front-end, and Java for Android. The main Fiodar's speciality is .NET. As well as being an experienced programmer, Fiodar has an Honours degree in Environmental Biology and a Masters degree in Environmental Informatics.

Tech Advice Articles

C# basics in practice - manipulating text files

C# basics in practice - manipulating text files

Differences between mono and .NET Core

Differences between mono and .NET Core

Applying clustering on OpenLayers map

Applying clustering on OpenLayers map

Why you absolutely need SignalR for ASP.NET development

Why you absolutely need SignalR for ASP.NET development

Pros and cons of Blazor for web development

Pros and cons of Blazor for web development

Web GIS: Making modal pop-up on an OpenLayers map

Web GIS: Making modal pop-up on an OpenLayers map

Using .NET Core SDK projects in .NET Framework

Using .NET Core SDK projects in .NET Framework

Learning .NET Core from scratch

Learning .NET Core from scratch

Playing audio on .NET Core with NetCoreAudio

Playing audio on .NET Core with NetCoreAudio

Building .NET Core sound application - part 3

Building .NET Core sound application - part 3

Share this:

Facebook Google LinkedIn Twitter Become a Patron!

More from Tech Advice

Privacy Policy

© Mobile Tech Tracker. All rights reserved. Unauthorised copying of any of this website's content is prohibited under international law.

For any queries, comments or suggestions, please write to