I’ve been into multiple UI libs and frameworks but as everything is webbish today and HTML and CSS rules and provide many things that can be hard to achieve with usual UI libs, it makes sense to use it also for UI of a classical desktop applications. That’s where Electron comes. Just take chromium, node.js and put it into Window shell and you will have very usable desktop application platform.
First, install electron globally
npm install electron-prebuilt -g or locally or just download it and put it into your PATH.
To create electron application we actually need three files.
- package.json — just app name, version and javascript which will define electron app.
{
"name" : "hello-app",
"version" : "0.1.0",
"main" : "app.js"
}- app.js — first part are required modules, second part solves closing on OSX (not necessary if you’re not planning OSX support) and third part is startup code with basic window definition and content html reference.
const electron = require(‘electron’);
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;app.on(‘window-all-closed’, function() {
if (process.platform != ‘darwin’) {
app.quit();
}
});app.on(‘ready’, function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL(‘file://’ + __dirname + ‘/index.html’);
mainWindow.on(‘closed’, function() {
mainWindow = null;
});
});
- index.html — is whatever you want to show inside your app
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8">
<title>Hello World!</title>
</head>
<body>
Hello from Electron App!
</body>
</html>Starting the app is easy like this
electron .
Live reloading with electron-connect
It’s natural to save some strength and use auto reload instead of manual reloading. There are some options howto do it. I’ll describe one way describing gulp and electron-connect.
First, install gulp if you don’t have it
npm install --global gulp-cli
# and for local gulp dep in your project
npm install --save-dev gulpNext, create gulp.js with task that provides reloading
‘use strict’;var gulp = require(‘gulp’);
var electron = require(‘electron-connect’).server.create();gulp.task(‘default’, function () {// Start browser process
electron.start();// Restart browser process
gulp.watch(‘app.js’, electron.restart);// Reload renderer process
gulp.watch([‘index.html’], electron.reload);
});
in index.html, we need to attach client script to index.html web page
<script>require(‘electron-connect’).client.create()</script>and in app.js we need to connect mainWindow to electron-connect
var client = require(‘electron-connect’).client;
client.create(mainWindow);Now start gulp task by running “gulp”;
Well, now electron app is started and app.js and index.js are watched and reloaded on change. Try it for yourself. It’s really handy while developing electron app.
