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 (npm package): Build an npm package instead of the ready-to-use executable. The option is for advanced users who are familiar with the NPM utility. Follow the instructions below to continue building your app.
Windows (64-bit): Windows 7 or later, 64 bit.
Windows (ARM): Windows 10+ running on devices with 64-bit ARM processors.
Windows (32-bit): Windows 7 or later, 32 bit.
macOS (64-bit): macOS 10.13 (High Sierra) or later, Intel Macs.
macOS (Apple Silicon): macOS 11 (Big Sur) or later, Apple Silicon (aka M1-M4) Macs.
Linux (64-bit): Linux, 64 bit, such as Ubuntu, Fedora, OpenSuse, or Arch.
Linux (ARM): Linux on 64-bit ARM devices.

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 app_name.exe (or AppName.app on macOS, or app_name on Linux) located in the unpacked app folder.

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.

On macOS (Apple Silicon version) you might even get the error saying that your app is damaged (which is not case):

In that case you need to clear the quarantine attribute for the ZIP archive (with Terminal app):


      xattr -r -d com.apple.quarantine my_awesome_app.zip

and then unpack/launch your app again.

Beautifying Things

Modifying Application Name and Icon

See the official Electron guide on how to rename your application build and assign a 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.

Place the modified main.js in your application folder, then run the app builder again. You should get the following:

Advanced Electron Development with NPM

By using the npm utility you can improve the efficiency of your Electron-based development pipeline. You can install it by following these instructions.

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

Overriding Template Files

The template files for Electron-based builds are located inside the manager/templates/Electron directory inside the Verge3D installation folder. Editing these files are not recommended, but you can easily override any of these by putting the file with the same name in your application folder. For example, to provide your own implementation of the main.js script which is responsible for the app initialization, simply copy it from the template folder (or create a new one from scratch) and place it in the app folder:

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!