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).

Getting Electron

Electron binaries can be installed with NPM or downloaded from the GitHub repo. To simplify things up, we'll use the later approach in this guide.

To get Electron binaries go to the releases page and download archive with the latest stable (not Beta) version. Since the number of available platforms is huge, use the following memo to get what you really need:

electron-vX.Y.Z-win32-x64.zip
Windows 7 or later, 64 bit version.
electron-vX.Y.Z-darwin-x64.zip
macOS 10.10 (Yosemite) or later, Intel Macs.
electron-vX.Y.Z-darwin-arm64.zip
macOS 11 (Big Sur) or later, Apple Silicon Macs.
electron-vX.Y.Z-linux-x64.zip
Linux, 64 bit, such as Ubuntu, Fedora, OpenSuse, or Arch.

Once downloaded, unpack Electron archive to some directory, say my_awesome_app.

Preparing your Application

Copy your entire app from the applications directory inside your Verge3D distribution to the my_awesome_app/resources directory (or electron/Electron.app/Contents/Resources on macOS) and name it as app (app means simply "app", not your application name).

Create file named main.js (example) in the app directory with the following content:

const { app, BrowserWindow } = require('electron'); function createWindow() { // create the browser window const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); // and load the main file of the app win.loadFile('my_awesome_app.html'); } app.whenReady().then(createWindow);

Change my_awesome_app.html in the loadFile() method to the name of the main HTML file of your application.

Create file named package.json (example) in the app directory with the following content:

{ "name": "my_awesome_app", "version": "0.1.0", "main": "main.js" }

Change my_awesome_app to your app's name, update version info if you need it.

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

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:

Got Questions?

Feel free to ask on the forums!