Generally, an Electron app is structured like this:
app/
├── package.json
├── main.js
└── index.html
The format of package.json is exactly the same as that of Node's modules, and
the script specified by the main field is the startup script of your app,
which will run the main process. An example of your package.json might look
like this:
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}The main.js should create windows and handle system events, a typical
example being:
var app = require('app'); // Module to control application life.
var BrowserWindow = require('browser-window'); // Module to create native browser window.
// Report crashes to our server.
require('crash-reporter').start();
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform != 'darwin') {
app.quit();
}
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});Finally the index.html is the web page you want to show:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>Run
$ electron .
In addition to Electron's minimal app, we used two very useful npm packages :
- Electron packager : this package parses your app folder and creates the files needed to launch the app on any platform that you specify
- Electron builder : this package starts with the files generated by
electron-packagerand creates a single installer for OSX or Windows computers to help you easily distribute your app.
If you're on OS X/Linux and want to build for Windows, you need Wine installed. Wine is required in order to set the correct icon for the exe.
You will also need the nullsoft scriptable install system for all platforms.
On OS X, via Homebrew
$ brew install wine makensis
On Ubuntu(-based) Linux distributions, via apt:
# add-apt-repository ppa:ubuntu-wine/ppa -y
# apt-get update
# apt-get install wine nsis -y
$ electron-packager ./app $npm_package_name --out=dist/osx --platform=darwin --arch=x64 --version=0.34.1 --icon=assets/osx/my-awesome-app.icns",
$ electron-packager ./app $npm_package_name --out=dist/win --platform=win32 --arch=ia32 --version=0.34.1 --icon=assets/win/icon.ico
$ electron-builder dist/osx/someFancy.app --platform=osx --out=/some/path/ --config=config.json
$ electron-builder dist/win/someFancy-win32 --platform=win --out=/some/path/ --config=config.json
package.json
{
"name": "my-awesome-app",
"version": "0.1.0",
"scripts": {
"start": "electron ./app",
"clean": "rm -rf ./dist",
"clean:osx": "rm -rf ./dist/osx",
"clean:win": "rm -rf ./dist/win",
"pack": "npm run pack:osx && npm run pack:win",
"pack:win": "npm run clean:win && electron-packager ./app $npm_package_name --out=dist/win --platform=win32 --arch=ia32 --version=0.34.1 --icon=assets/win/icon.ico",
"pack:osx": "npm run clean:osx && electron-packager ./app $npm_package_name --out=dist/osx --platform=darwin --arch=x64 --version=0.34.1 --icon=assets/osx/my-awesome-app.icns",
"build": "npm run build:osx && npm run build:win",
"build:win": "npm run pack:win && electron-builder dist/win/$npm_package_name-win32-ia32 --platform=win --out=dist/win --config=build-config.json",
"build:osx": "npm run pack:osx && electron-builder dist/osx/$npm_package_name-darwin-x64 --platform=osx --out=dist/osx --config=build-config.json"
},
"author": "Theodo (http://www.theodo.fr)",
"license": "MIT",
"dependencies": {
"electron-builder": "^2.0.2",
"electron-packager": "^5.1.0",
"electron-prebuilt": "^0.34.1"
}
}build-config.json:
{
"osx" : {
"title": "my-awesome-app",
"background": "assets/osx/my-awesome-app.png",
"icon": "assets/osx/my-awesome-app.icns",
"icon-size": 80,
"contents": [
{ "x": 438, "y": 344, "type": "link", "path": "/Applications" },
{ "x": 192, "y": 344, "type": "file" }
]
},
"win" : {
"title" : "my-awesome-app",
"icon" : "assets/win/icon.ico"
}
}Pre-build
$ npm start
To build for win and osx:
$ npm run build
dist
├── osx
│ └── my-awesome-app.dmg
└── win
└── my-awesome-app Setup.exe
- Tristan Pouliquen (Développeur - tristanp@theodo.fr)
- Vincent Quagliaro (Développeur - vincentq@theodo.fr)