Electron What Is It Good For

Prerequisites

Node.js is installed

Initialize the Project

Create a folder for your project.
Run npm init -y
- The -y inits the package.json file with defaults rather than the wizard.
Create a src folder and a main.js inside of it.
Edit package.json
- Change the main property to be src/main.js
- Add start to the scripts property with a value of electron .
Install the electron-prebuilt package to our dev dependencies by running npm install electron --save-dev
Create a folder src and a main.js file in it.

Add the following code to main.js

const electron = require('electron');
const app = electron.app;

app.on('ready', _ => {
    console.log('I\'m ready for anything!');
});

Now make sure it works by running npm start.
Verify that the app starts and prints I'm ready for anything!

Add Window

Open src\main.js and edit it as follows:

const electron = require('electron');
const { app, BrowserWindow } = electron;

let mainWindow = null;

app.on('ready', _ => {
    // Initialize our main browser window.
    mainWindow = new BrowserWindow({});

    // Load your root html file into the browser window.
    mainWindow.loadURL(`file://${__dirname}/wiigf.html`);

    // Cleanup after mainWindow is closed.
    mainWindow.on('closed', _ => {
        mainWindow = null;
    });
});

Create src\wiigf.html and add the desired html.
Create src\wiigf.css and add the desired styles.

Add Tray

Add Menu and Tray to the list of constants from electron.
Add path dependency using require const path = require('path');
Place a .png to be used as the icon in the tray in your src folder.
Instantiate with const tray = new Tray(path.join('src', '<yourIconName>.png'));
Use Menu.buildFromTemplate to build menu options.
Add menu to the tray using tray.setContextMenu(contextMenu);
Add tool tip to tray tray.setTooltip('<something whitty>');

Building the menu into a function could look something like this.

function buildTray()
{
    const tray = new Tray(path.join('src', 'SingleCupLogo.png'));
    const contextMenu = Menu.buildFromTemplate([
        {
            label: 'Thing 1',
            click: _ => {
                console.log('Clicked Thing 1');
            }
        },
        {
            label: 'Thing 2',
            click: _ => {
                console.log('Clicked Thing 2');
            }
        }
    ])
    tray.setContextMenu(contextMenu);
    tray.setToolTip('Electron WIIGF');
}

Gobal Shorcuts

Sometimes it would be nice to have some global shortcuts to access your program even when your application is not in the foreground.

Add globalShortcut to the list of constants from electron.

Write a little function to call with out shortcut as follows:

function getFocus() {
    console.log('Doing Show Main Window');
    mainWindow.show();
}

Register the shortcut as follows: I built a function to handle this with the signature function registerShortcuts(globalShortcut). Then I called it from inside the app.on('ready' handler.
```
globalShortcut.unregisterAll();
globalShortcut.register('CmdOrCtrl+Alt+C', _ => {
    getFocus();
});
```

Make sure to follow best practices and cleanup when the application quits.

app.on('will-quit', _ => {
    globalShortcut.unregisterAll();
});

Things To Know

Great way to convert images into icons. https://iconverticons.com/online/

CarBar / ElectronWIIGF