electron desktop application example
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.htmlNow 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 startFast 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"
},
...
}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
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-builderThe 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"
}
}
...
}- 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.
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.
menubar is a library for menubar application development.
npm i -S menubarsrc/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>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>
...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