- Electron Builder Mac
- Electron App Store
- Electron Build Mac
- Run Electron App On Macbook
- Building Electron App
- Run Electron App On Mac Shortcut
This article provides a walkthrough for developing and deploying an application with Electron.NET.
Metaphorically, Flotato uses the Mac’s native WebKit engine, so, in theory, it should be much less onerous on your processor and RAM than Electron apps or, in some cases, Chrome tabs. I'm having some trouble getting my Electron app to start on system startup, does anyone know how this could be done? Ideally, I could provide users with an ability to toggle this functionality in the Electron main window menu. In this blog, I am going to run you through how I setup a production ready work flow for creating a desktop app with React in Electron and SQLite3 as a database packaged with the application. In my most recent pers o nal project, I built a Daily Build Updater for the 3D application Blender. Now when you run the application on a Mac, the menu bar will have three submenus named Electron, File, and View. Electron.NET also supports native system file dialogs. Let's modify the File menu definition to add a Save As command that prompts the user for a filename and outputs the current process list to that file in comma-delimited format. Clients get better coverage to their applications since electron applications are cross platform (Windows, Mac and Linux). Electron applications run the same regardless of the operating system. So, client doesn't need to do custom coding in order to deploy the application on different platforms.
Topics covered include:
- Modifying the default ASP. NET Core application to use Electron.NET
- Using Visual Studio Code to debug ASP. NET Razor pages
- Implementing native UI elements such as message boxes, system file dialogs, and custom application menus
- Adding third-party MVC controls
- Building deployment media for other platforms
Recently, I had the honor of presenting this topic at the NDC Oslo online event. Here is my presentation in blog form, with a source code link at the end of the article.
What is Electron?
Electron is a framework that supports the development of desktop applications using web technologies such as the Chromium rendering engine and the Node.js runtime. Supported operating systems include Windows, macOS, and Linux. Chances are you have used at least one of these applications, which were all developed using Electron:
- Visual Studio Code
- Slack
- Discord
- Skype
- GitHub Desktop
- Twitch
Electron leverages familiar standards such as HTML, CSS, and JavaScript. Mail app freezes mac. But what if you are a .NET developer accustomed to working in C#? That's where Electron.NET comes in.
What is Electron.NET?
Electron.NET is a wrapper around a 'normal' Electron application with an embedded ASP. NET Core application. It is an open-source project that allows .NET developers to invoke native Electron APIs using C#. Electron.NET consists of two components:
- A NuGet package that adds Electron APIs to an ASP. NET Core project
- A .NET Core command-line extension that builds and launches applications for Windows, macOS, and Linux platforms.
Electron.NET requires prior installation of the following software: Pdf unlocker app mac.
I relied on Electron.NET to develop the C1DataEngine Workbench, a cross-platform tool that supports the creation and visualization of data analysis workspaces managed by the ComponentOne DataEngine library for .NET Standard. I initially planned to make this a standard Electron application that communicated with the library via shell commands that called out to a .NET Core global tool. But once I discovered Electron.NET, I was able to eliminate the shell commands and call the library directly.
Create an ASP. NET Core Web Application
For this exercise, I'm using Visual Studio Code running on a Mac. First, open a terminal window and run the following commands to create a new project called Processes.
When prompted by Visual Studio Code, say Yes to load the required assets for the project. Press F5 to build and run the application, opening a browser on the default ASP. NET Core welcome page, hosted on localhost:5001. Close the page, return to VS Code and stop debugging.
Electronize It!
Now let's turn our boilerplate ASP. NET Core project into an Electron application. This step involves adding a NuGet package to the project file, inserting some initialization code, and installing a command-line tool to perform builds. First, open the file Processes.csproj and insert a package reference for the Electron.NET API hosted on nuget.org:
Save the file, then restore packages when prompted to do so by VS Code. This action gives you immediate access to Intellisense for subsequent modifications to the code.
Next, edit Program.cs and insert a using statement for the newly added package:
Locate the static method CreateHostBuilder and insert the following two lines before the call to UseStartup:
The first line is necessary. The second is convenient during development, as it allows detailed error messages to be displayed.
Edit Startup.cs and insert the following using statements:
Locate the Configure method and add the following lines to the end of its body:
Finally, add the following method to the Startup class to create the main Electron window:
Since our application consists of a single window, we handle the OnClosed event to terminate the application if the user closes the window (instead of choosing Quit or Exit from the main menu).
Install the Command Line Tool
In addition to the runtime package that you previously referenced in the project file, Electron.NET provides a command-line tool to perform build and deployment tasks. In VS Code, create a new terminal window and type:
This one-time step will install a .NET Core global tool that implements a command named electronize. To see a list of tools/commands installed on your system, type the following:
Run the Electronized Application
After installing the command-line tool, type these lines in the VS Code terminal window:
The first line is a one-time step that creates a manifest file named electron.manifest.json and adds it to your project. The second line is used to launch the Electron application (don't use F5, as this will only open the ASP. NET Core application in the browser). Note that the content now appears in an application window, not a browser.
Also, note the default Electron application menu. On Macs, this menu is not part of the window itself but anchored to the top of the screen.
At the time of this writing, there is a script error in the Bootstrap module installed when you created the project.
To see it, open the View menu and click Toggle Developer Tools.
Fortunately, there is an easy fix. First, open the Electron menu and click Quit Electron to close Developer Tools and the application window. In VS Code, open Pages/Shared/_Layout.cshtml and insert the following line before the Bootstrap script tag:
Save this change, then type electronize start in the terminal window to rerun the application. Open Developer Tools and note that the error message is gone. Keep the application window open for the next step.
Debug ASP. NET Code
Since we launched our application with an external command instead of F5, we need to attach a debugger to the running ASP. NET process. With the application window open, go to VS Code, open Pages/Index.cshtml.cs, and set a breakpoint on the OnGet handler. Click Run on the activity bar, select .NET Core Attach from the dropdown control, then click the adjacent icon to reveal a list of processes. Type the name of the application (Processes) into the list and select the one remaining item. (If by some chance there are multiple processes still displayed, pick the one with the largest value of electronWebPort.)
In the application window, click Reload on the View menu, and the breakpoint will be hit. Continue execution, close the application window, and note that the debugger is automatically disconnected.
Customize the Home Page
To illustrate the cross-platform capabilities of Electron.NET, let's replace the default home page content with a list of active system processes. Later on, we'll build a Linux version and observe the differences on that platform.
First, open Pages/Index.cshtml.cs and add the following using statement for process APIs:
Next, add the following property declaration to the IndexModel class:
Now add the following lines to the (initially empty) body of the OnGet handler:
Now let's modify the corresponding Razor page markup to display the list of processes.
Open Pages/Index.cshtml and replace the entire original
<div>
tag with the following lines: This modification will display a table of named processes with columns for the id number, process name, and the amount of physical memory allocated for the process. Note the use of the inline try/catch block. On some platforms, the process name may be truncated, so the module name is favored, with the process name serving as a fallback value.
Electron.NET supports a watch mode where it will monitor your changes and automatically rebuild and relaunch your application. To invoke the watch mode, run the following command:
Now save all of your changes to the project. After the application restarts, the modified home page should look something like this:
Add the Detail View
In a typical ASP. NET Core application, items in a list contain a link to a detail page where users can view the item in greater detail or modify it. Let's create a simple view for an individual process. First, add a new file to the Pages folder named View.cshtml and insert the following markup:
Next, add a corresponding code-behind file named View.cshtml.cs and insert the following code:
The string array PropertyList defines a list of Process object properties to be displayed in the detail view. Rather than hard coding these strings in the page markup, we use reflection to derive property names and values at run time.
To link the detail view to individual items on the home page, edit Pages/Index.cshtml and replace the expression:
with this anchor tag:
Run the application as before and note that the Id column contains hyperlinks that navigate to a page similar to this one:
You may have noticed that the markup contains a submit button for an HTTP POST request. Let's finish the implementation of the detail page by adding the following method to the ViewModel class:
While this will undoubtedly do the job, it would be better to give the user a chance to think it over and cancel the operation. Let's replace the last two lines with the following code, which uses the ShowMessageBoxAsync API of Electron.NET to display a platform-specific confirmation dialog box to the user:
This way, if the user cancels, the detail page remains current. Otherwise, the application redirects to the home page after killing the process.
Customize the Application Menu
Electron.NET provides a default application menu, as illustrated previously. This menu is the same default menu provided by the Electron framework itself. Unfortunately, there is no way to tweak the default menu (a limitation of Electron). If you want to add a new command or remove a submenu that you don't need, you have no choice but to specify the entire menu structure from scratch. This task is further complicated by the differences between macOS and other platforms. On macOS, applications have their own menu to the left of the standard File/Edit/View menus.
Note the use of predefined menu roles to specify the appropriate actions and shortcut keys for the target platform. Also, because of the way Electron.NET serializes the argument passed to SetApplicationMenu, you need to build the entire menu structure using an array initializer. You can't append MenuItem instances to an empty array and then pass that to the menu API.
Now when you run the application on a Mac, the menu bar will have three submenus named Electron, File, and View.
Electron.NET also supports native system file dialogs. Let's modify the File menu definition to add a Save As command that prompts the user for a filename and outputs the current process list to that file in comma-delimited format.
Electron Builder Mac
Instead of specifying one of the predefined menu roles, we set the menu type to normal and provide an asynchronous Click handler. The ShowSaveDialogAsync API opens a native file dialog using the specified options, in this case, a filter for files with the .csv extension. If the user does not cancel the dialog, the API returns the full path to the selected file. This path is used as an argument to the SaveAs Razor page, which contains an OnGetAsync handler that outputs comma-delimited text:
Add Third-Party Controls
As with any regular ASP. NET Core web site, you can add third-party controls to an Electron.NET application. Let's replace the default privacy page with a ComponentOne FlexChart control that plots the top ten processes in descending order of physical memory used.
First, add the following package reference to the .csproj file:
Edit Pages/_ViewImports.cshtml and append the corresponding tag helper:
Edit Pages/Shared/_Layout.cshtml and insert the following lines before the closing
</head>
tag: Then, in the same file, replace the first two occurrences of Privacy with Chart.
Edit Startup.cs and replace the UseEndpoints call with the following:
The call to MapControllerRoute is needed for the MVC controls to load their resources properly.
Lastly, create a file named Chart.cshtml in the Pages folder and add the following markup:
Then add the corresponding code-behind file, Chart.cshtml.cs:
Save all of your changes. Note that the build process will create a 30-day trial license for ComponentOne Studio Enterprise. Click the Chart link in the menu bar, and you should see a bar chart similar to the following:
Build for Other Platforms
To build installation media for other platforms, run the following command in a terminal window:
Where xxx is one of win, linux, osx. Output goes to the bin/Desktop folder, for example:
- Processes Setup 1.0.0.exe (Windows)
- Processes-1.0.0.AppImage (Linux)
- Processes-1.0.0.dmg (OSX)
Note that the Windows executable is a setup program, not the application itself. Also, OSX targets can only be built on a Mac, but Windows/Linux targets can be built on any platform. To change the version number, copyright notice, and other attributes, edit electron.manifest.json before creating the installation media.
Here's what the application looks like running on Linux:
Conclusion and Sample Code
Electron.NET is an open-source tool that adds value to ASP. NET Core by providing C# developers with a vehicle for delivering cross-platform desktop applications for Windows, Linux, and macOS. It is also compatible with third-party components such as the MVC controls in ComponentOne Studio Enterprise.
The source code for the completed project described in this article is available on GitHub.
Try ComponentOne Controls Free for 30 Days
Download the latest version of ComponentOne Studio Enterprise
Download Now!Package your Electron app into OS-specific bundles (
.app
, .exe
, etc.) via JavaScript or the command line.Electron App Store
Supported Platforms | Installation | Usage | API | Contributing | Support | Related Apps/Libraries | FAQ | Release Notes
About
Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution.
For creating distributables like installers and Linux packages, consider using either Electron Forge (which uses Electron Packager internally), or one of the related Electron tools, which utilizes Electron Packager-created folders as a basis.
Note that packaged Electron applications can be relatively large. A zipped, minimal Electron application is approximately the same size as the zipped prebuilt binary for a given target platform, target arch, and Electron version(files named
electron-v${version}-${platform}-${arch}.zip
).Supported Platforms
Electron Packager is known to run on the following host platforms:
Recovery Vault is an advanced extra layer to the Trash Bin that keeps a reference to deleted data. https://jxmndid.weebly.com/mac-app-boot-drive.html.
- Windows (32/64 bit)
- macOS (formerly known as OS X)
- Linux (x86/x86_64)
It generates executables/bundles for the following target platforms:
- Windows (also known as
win32
, for x86, x86_64, and arm64 architectures) - macOS (also known as
darwin
) / Mac App Store (also known asmas
)* (for x86_64 and arm64 architectures) - Linux (for x86, x86_64, armv7l, arm64, and mips64el architectures)
*Note for macOS / Mac App Store target bundles: the
.app
bundle can only be signed when building on a host macOS platform.Installation
This module requires Node.js 10.0 or higher to run.
Electron Build Mac
Building Windows apps from non-Windows platforms
Building an Electron app for the Windows target platform requires editing the
Electron.exe
file. Currently, Electron Packager uses node-rcedit to accomplish this. A Windows executable is bundled in that Node package and needs to be run in order for this functionality to work, so on non-Windows host platforms, Wine 1.6 or later needs to be installed. On macOS, it is installable via Homebrew.Usage
JavaScript API usage can be found in the API documentation.
From the Command Line
Running electron-packager from the command line has this basic form:
This will:
- Find or download the correct release of Electron
- Use that version of Electron to create a app in
<out>/<appname>-<platform>-<arch>
(this can be customized via an optional flag)
--platform
and --arch
can be omitted, in two cases:- If you specify
--all
instead, bundles for all valid combinations of target platforms/architectures will be created. - Otherwise, a single bundle for the host platform/architecture will be created.
For an overview of the other optional flags, run
electron-packager --help
or see usage.txt. For detailed descriptions, see the API documentation.If
appname
is omitted, this will use the name specified by 'productName' or 'name' in the nearest package.json.Characters in the Electron app name which are not allowed in all target platforms' filenames (e.g.,
/
), will be replaced by hyphens (-
).You should be able to launch the app on the platform you built for. If not, check your settings and try again.
Run Electron App On Macbook
Be careful not to include
node_modules
you don't want into your final app. If you put them in the devDependencies
section of package.json
, by default none of the modules related to those dependencies will be copied in the app bundles. (This behavior can be turned off with the prune: false
API option or --no-prune
CLI flag.) In addition, folders like .git
and node_modules/.bin
will be ignored by default. You can use --ignore
to ignore files and folders via a regular expression (not a glob pattern). Examples include --ignore=.gitignore
or --ignore='.git(ignore|modules)'
.Example
Let's assume that you have made an app based on the electron-quick-start repository on a macOS host platform with the following file structure:
…and that the following is true:
electron-packager
is installed globallyproductName
inpackage.json
has been set toFoo Bar
- The
electron
module is in thedevDependencies
section ofpackage.json
, and set to the exact version of1.4.15
. npm install
for theFoo Bar
app has been run at least once
When one runs the following command for the first time in the
foobar
directory:Building Electron App
electron-packager
will do the following:- Use the current directory for the
sourcedir
- Infer the
appname
from theproductName
inpackage.json
- Infer the
appVersion
from theversion
inpackage.json
- Infer the
platform
andarch
from the host, in this example,darwin
platform andx64
arch. - Download the darwin x64 build of Electron 1.4.15 (and cache the downloads in
~/.electron
) - Build the macOS
Foo Bar.app
- Place
Foo Bar.app
infoobar/Foo Bar-darwin-x64/
(since anout
directory was not specified, it used the current working directory)
The file structure now looks like:
The
Foo Bar.app
folder generated can be executed by a system running macOS, which will start the packaged Electron app. This is also true of the Windows x64 build on a system running a new enough version of Windows for a 64-bit system (via Foo Bar-win32-x64/Foo Bar.exe
), and so on.Related
- Electron Forge - creates, builds, and distributes modern Electron applications
- electron-packager-interactive - an interactive CLI for electron-packager
- grunt-electron - grunt plugin for electron-packager
Distributable Creators
- electron-installer-zip - creates symlink-compatible ZIP files
Windows:
- electron-winstaller - Squirrel.Windows-based installer from the Electron maintainers group
- electron-windows-store - creates an AppX package for the Windows Store
- electron-wix-msi - creates traditional MSI installers
- electron-installer-windows - alternative Squirrel.Windows-based installer
macOS:
- electron-installer-dmg - creates a DMG
Linux: Mac music streaming apps.
- electron-installer-debian - creates a DEB file
- electron-installer-redhat - creates an RPM
- electron-installer-flatpak - creates a Flatpak file
- electron-installer-snap - creates a Snap file
Plugins
These Node modules utilize Electron Packager API hooks:
Run Electron App On Mac Shortcut
- electron-packager-languages - set the locales available to Electron when packaged, which is used by the Mac App Store, among other places
- electron-packager-plugin-non-proprietary-codecs-ffmpeg - replaces the normal version of FFmpeg in Electron with a version without proprietary codecs
- electron-rebuild - rebuild native Node.js modules against the packaged Electron version