Creating a better kiosk with Electron


#1

I’ve noticed several questions on the repository about blocking keybindings and displays to use electron effectively as a kiosk.

For those using a linux machine, the simplest way to set up a kiosk is to run an x session with only your electron app. A bare bones command to create such a setup (assuming the basic set of x packages are installed) would be startx /PATH/TO/ELECTRON/APP

When creating a browser window, you’ll have to define the position, width and height yourself, see this skeleton:

var app = require('app');

var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function() {
    app.quit();
});

app.on('ready', function() {
  var screen = require('screen');
  var size = screen.getPrimaryDisplay().workAreaSize;
  
  mainWindow = new BrowserWindow({
    show: false,
    resizable: false,
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
  });

  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

The only remaining keybindings you will likely have to deal with would be the CTRL+ALT+FX commands to switch to text terminals.

I hope this is helpful to those who are intending to create kiosk apps with electron!


#2

When I try to do this, StartX quits with an error message saying “No such file or directory”. Any thoughts?


#3

I just figured out what it was. I did not have libgconf-2-4 pacakge installed in my system. After installing it Electron launches without any problem. Very cool!