/example-electron

electron desktop application example

Primary LanguageJavaScriptMIT LicenseMIT

example-electron

electron desktop application example

Step 1

Based on electron quick start

# installing dependencies
npm init
npm i -D electron
# project structure
mkdir src
mkdir src/electron
mkdir static
# copy example files
curl https://raw.githubusercontent.com/electron/electron-quick-start/master/main.js -o src/electron/main.js
curl https://raw.githubusercontent.com/electron/electron-quick-start/master/index.html -o static/index.html

Now edit package.json:

{
  ...
  "main": "src/electron/main.js",
  "scripts": {
    "start": "electron ."
  },
  ...
}

Change src/electron/main.js so it would load the static html file:

...
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '../../static/index.html'),
    protocol: 'file:',
    slashes: true
  }))
...

Now you can start your app:

npm start

Step 2

Packaging

Fast and easy application packaging can be done with the help of electron-packager, you can check all the build options here.

npm i -D electron-packager
{
  ...
  "scripts": {
    "pack": "electron-packager . --overwrite --out dist/pack",
    "pack:all": "electron-packager . --platform=darwin,linux,win32 --arch=x64 --overwrite --out dist/pack"
  },
  ...
}

NOTES

  • mas - annotate Mac App Store
  • You'll need wine in order to build windows applications on unix systems (take a while to install). 
    brew cask install xquartz
brew install wine

Building

If you need production level application distribution electron-builder is probably the tool you need, it can handle all the distribution life cycle.

npm i -D electron-builder

The option (and there are many) are split in to two: cli and "build" field in the package.json file

{
  ...
  "scripts": {
    "build": "build",
    "build:all": "build --mac --win --linux --x64"
  },
  "build": {
    "appId": "com.electron.example-electron",
    "directories": {
      "output": "dist/build"
    }
  }
  ...
}

NOTES

  • Multi platform building can be a bit tricky, and some time even impossible.
  • There are a lot of platform specific related configuration, test every changes before distributing.
  • Auto update is baked in (need to be configure).
  • There a docker option for linux and windows.

Step 3

Lets build a menubar application, the menu runs on the main process and the UI on the render process, so we'll to do some communication between those two.

Install dependencies

menubar is a library for menubar application development.

npm i -S menubar

Add the menubar init/render files

src/electron/menubar.js

const menubar = require('menubar')
const path = require('path')
const url = require('url')

const mb = menubar({
  index: url.format({
    pathname: path.join(__dirname, '../../static/menubar.html'),
    protocol: 'file:',
    slashes: true
  })
})

mb.on('ready', function ready () {
  console.log('app is ready')
  // your app code here
})

static/menubar.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <button onclick="addCount()">Add count</button>
  </body>

  <script>
    const {ipcRenderer} = require('electron')
    function addCount () {
      ipcRenderer.send('add-count')
    }
  </script>
</html>

Add communication logic to main/render processes

src/electron/menubar.js

require('./menubar')

const {ipcMain} = require('electron')

let count = 0;

ipcMain.on('add-count', (event, arg) => {
  count++
  mainWindow.webContents.send('res-count', count)
})

ipcMain.on('req-count', (event, arg) => {
  event.sender.send('res-count', count)
})

static/index.html

...
  <script>
    const {ipcRenderer} = require('electron')
    function updateCount(event, arg) {
      document.getElementById('count').innerText = arg
    }
    ipcRenderer.on('res-count', updateCount)
    ipcRenderer.send('req-count')
  </script>
...

For slim js lecture

npm i -S bootstrap jquery slim-js
mkdir src/app
curl https://raw.githubusercontent.com/eavichay/slim-electron-boilerplate/master/src/app/app.js -o src/app/app.js
curl https://raw.githubusercontent.com/eavichay/slim-electron-boilerplate/master/static/index.html -o static/index.html