How To Build Electron App Installer For Mac

May 18, 2019  In this article, we’re going to use electron-builder to add auto-updating capabilities to a simple app, package it for Mac and Windows, and release it.

In this tutorial we'll show how to create a simple cross-platform desktop to demonstrate how .Net Core can be used in an Electron application. To accomplish that we are going to create a .Net Core console application and an Electron application and show how to combine both.

At the end of the tutorial, we'll have a distributable package of the application.

Development tools and prerequisites

This tutorial focuses on creating a simple cross-platform desktop to demonstrate how .Net Core can be used in an Electron application and therefore requires basic understanding of the following technologies:

Electron

Electron is a popular tool for building desktop apps for different platforms (OSX, Windows, Linux) with web technologies (HTML, CSS, JS). We'll use NPM to download Electron.

AngularJS

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology. We'll use NPM to download AngularJS.

.Net Core

.NET Core is the new big thing in the .NET universe that allows to build cross-platform apps on Windows, Mac and Linux. To start developing using .Net Core we need first to install .NET Core SDK.

Windows

Download and install the latest .NET Core SDK for Windows

MacOS

In order to use .NET Core on MacOS, we first need to install the latest version of OpenSSL. The easiest way to get this is from http://brew.sh/

After installing brew, do the following:

Then download and install the latest .NET Core SDK for MacOS

Getting Started

Let’s kick start our application by creating the folder structure. The folder structure for the project should look like the following

The source code is split in two folders, api and app. Let’s begin by creating the api - .Net Core console application.

api - .Net Core console application

To create a console application we going to use the following dotnet command.

This command creates two files, program.cs and api.csproj.

This is a simple hello world console application. Let's run it executing commands below.

Our console application has just compiled and launched, displaying 'Hello World!'.Up until now, everything we’ve done has resulted in a minimal .Net Core console application.

Now we going to turn it into a web api in three steps:

First, adding required packages to the api.csproj file

These packages need to be restored

Second, replacing program.cs content with code bellow

And last step, let's add a ContactsController.cs file inside a folder called Controllers and add file content below.

We have just transformed a simple console application into a self-hosted web api. Let's run it and see the result.

We can see that the command has created a service and it's running on localhost port 5000.The service can be tested by opening the url http://localhost:5000/api/contacts on a browser where a json result is displayed.

Build an executable

.Net Core provides a feature called Self-contained application that allows to deploy applications by just copy files to the target host, without need to install any .Net runtime. Furthermore, we can deploy it on any platform (Windows, Linux, OSX).All we need to do is to specify which runtimes we are supporting by adding the following line to the api.csproj file inside the tag. For example we will be deploying for Windows 10 and MacOs.

The next step, we run the restore command followed by the publish command.

After running this commands an executable application can be found inside the api/bin/dist/{os} folder and by executing it we should see a console window displaying information about the service running on localhost port 5000. To test it we browse http://localhost:5000/api/contacts and should display contacts in json format.

The first part of this tutorial is completed. While leaving the console window open we'll now create the Electron application.

app - electron + angularJs

First, let's move to the src/app path, where we need to create a package.json file that will reference Electron and AngularJS dependencies.

and install these references

Next, we create a file main.js that's going to be our entry point for our application Sandisk sddr-88 driver for mac.

Next step is to create an index.html file to display contact details

Finally, create an app.js file where we will initialize AngularJS, have a controller responsible for data binding and a service to fetch data from http://localhost:5000/api/contacts

We got everything to run our Electron application using following command

An Electron window shows displaying contacts details returned from http://localhost:5000/api/contacts

Combining the .Net Core console application and the Electron application.

So far we have two separated applications running the .Net Core console application and electron application.Now, as a crucial step for this tutorial, we going to combine them into a single application. To accomplish this we going to tell Electron to start the console application on the background by adding the following code to the end of main.js file.

and by replacing line 40 on main.js

with

Now, make sure the console windows and the Electron window are closed before run the following command.

Finally, we see an Electron window with the contact list fetched.

Distribution

As part of this tutorial we going to show how to distribute our application. First, we need to download the electron-builder library. electron-builder is a complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out of the box.

Let's download electron-builder.

Next, we specify the build configuration in the package.json as follows:

Using extraResources we specify extra files to be included in the package, in this case, we want to include the Self-contained application published before to api/bin/dist/ folder.

All done! Generated packages are available in /dist folder.

Conclusion

In this tutorial, we have been able to build a cross-platform desktop application using Electron and .Net Core. The full implementation can be found on Github including distributable packages for Windows and MacOs.

Up next

As a part 2 of this tutorial we going to add the ability of managing the contacts by storing them in a SqLite database using Entity Framework Core.

Thoughts? Improvements? Problems? Feel free to drop a comment.