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

Read more

Accept


Mobile Tech Tracker
≡ sections
Home

Tech Advice

Tech Thoughts

Apps

Tech News

About

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. If you want to support us, please consider visiting the pages of our advertisers.


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})
  win.loadFile('index.html')
},
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#):

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

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

WebHost.CreateDefaultBuilder(args)
  .UseElectron(args)
  .UseStartup();

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 Microsoft stack technologies, both back-end and front-end, and Java for Android. Fiodar has an Honours degree in Environmental Biology and a Masters degree in Environmental Informatics.



More from Tech Advice


Building .NET Core sound application - part 3

Building .NET Core sound application - part 3


Building .NET Core sound application - part 2

Building .NET Core sound application - part 2


Building .NET Core audio application - part 1

Building .NET Core audio application - part 1


How to play sound on .NET Core

How to play sound on .NET Core


How to protect your website from spammers

How to protect your website from spammers


Proven way to make programming fun

Proven way to make programming fun


Why you should care about functional programming

Why you should care about functional programming


What the heck is WebAssembly

What the heck is WebAssembly


Desktop apps are not dead. Here is why

Desktop apps are not dead. Here is why


Popular misconceptions about Node.js

Popular misconceptions about Node.js


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 info@mobiletechtracker.co.uk.