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/M2) Macs.
macOS App Store (ARM): Reduced version for Mac App Store. Runs on macOS 11 (Big Sur) or later, Apple Silicon (aka M1/M2) Macs.
Linux (ARM): Linux on 64-bit ARM devices.
Windows (32-bit): Windows 7 or later, 32 bit.

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.

Creating Apps with no Internet Connection

To create ready-to-use desktop apps, App Manager requires internet connection to download Electron builds from the Soft8Soft servers. If you have no or limited internet connection (e.g. behind a proxy or a firewall), you can pre-download Electron builds so that the App Manager picks them up from local files.

Use the following list to download Electron binaries. You might want to get just one or multiple depending on the target platforms.

Copy the downloaded Electron binaries to the App Manager config directory located inside your user folder. Put them as they are (do not unpack!):

Windows — AppData\Roaming\Soft8Soft\Product Name
macOS — Library/Application Support/Product Name
Linux — .config/product_name

From now on, the App Manager will be using these builds to create desktop apps instead of downloading them from the internet.

Got Questions?

Feel free to ask on the forums!