Creating Desktop Applications with Electron

Electron is a tool which converts web applications to cross-platform desktop applications. Electron can create apps for Windows, macOS (both Intel and Apple Silicon architectures supported), and Linux. The tool is completely free, easy-to-use and allows for advanced customizations with JavaScript (if you need it).

Creating Application

Electron can be installed via NPM or downloaded from the internet. To simplify things up, we integrated an Electron app builder right in the App Manager.

By using it you can download Electron binaries for the selected target platform and then build a ready-to-use application right from your Verge3D app.

Since the number of available platforms is huge, use the following memo to get what you really need:

None
Do not install any binaries. Use the NPM utility and the instructions below to continue building your app.
Windows (64-bit)
Windows 7 or later, 64 bit.
macOS (64-bit)
macOS 10.10 (Yosemite) or later, Intel Macs.
macOS App Store (64-bit)
Reduced version for Mac App Store. Runs on macOS 10.10 (Yosemite) or later, Intel Macs.
Linux (64-bit)
Linux, 64 bit, such as Ubuntu, Fedora, OpenSuse, or Arch.
Windows (ARM)
Windows 10 running on devices with 64-bit ARM processors.
macOS (ARM)
macOS 11 (Big Sur) or later, Apple Silicon (aka M1) Macs.
macOS App Store (ARM)
Reduced version for Mac App Store. Runs on macOS 11 (Big Sur) or later, Apple Silicon (aka M1) Macs.
Linux (ARM)
Linux on 64-bit ARM devices.
Windows (32-bit)
Windows 7 or later, 32 bit.
Linux (32-bit)
Linux, 32 bit version.

Due to architecture limitations of the Windows OS, it's not possible to build macOS apps on that system. Please use macOS or Linux instead.

Once your app is ready, download it and then unpack the zip archive to some directory.

Running your Application

Exec your application by running electron.exe (or Electron.app on macOS, or electron on Linux) located in the app directory.

Keep in mind, that since your application is unsigned, both Windows and macOS (but not Linux) prevent it from running. For example, on Windows, you'll see the following Windows protected your PC dialog:

Click on the More info link, then Run anyway to run the application. In order to fix this issue, expecially when you distribute your work to the end users, your app must be signed. See more in the code signing section of the Electron documentation.

Beautifying Things

Modifying Application Name and Icon

See the official Electron guide on how to rename your application binary and assign custom icon.

Customizing Menu

To disable application menu altogether, insert the following line in the main.js right after loadFile() method:

win.removeMenu();

To create your own menu, first connect Menu module to your application:

const { Menu } = require('electron');

We're going to use shell module to open external website upon menu click. So, add shell module here as well:

const { shell } = require('electron');

Then add the following code to the main.js right after loadFile() method:

var menu = Menu.buildFromTemplate([{ label: 'Menu', submenu: [ { label: 'Soft8Soft Website', click() { shell.openExternal('https://www.soft8soft.com'); } }, { label: 'Exit', click() { app.quit() } } ] }]); Menu.setApplicationMenu(menu);

See the example of the modified main.js file here.

Run your application, you should get the following:

Advanced Electron Development with NPM

To work with Electron, you'll need the npm utility which is part of the Node.js runtime. You can install it by following these instructions.

See more info on how to use NPM in the Electron docs.

Got Questions?

Feel free to ask on the forums!