Due to the myriad of Electron app packaging systems, this tutorial will assume you already have a snap of your Electron app for Ubuntu Classic. Details on achieving this are available here:
https://docs.snapcraft.io/build-snaps/electron
This guide will start with a working hello-world snap for Electron, that functions solely on Ubuntu Classic. Take this YAML as a starting point:
name: electron-hello-world-kiosk
version: '0.1'
summary: Hello World Electron app
description: |
Simple Hello World Electron app as an example
base: core18
confinement: strict
grade: devel
apps:
electron-hello-world-kiosk:
command: desktop-launch "$SNAP/electron-helloworld/electron-quick-start" "--no-sandbox"
plugs:
- browser-support
- network
- network-bind
- opengl
- pulseaudio
- x11
parts:
electron-helloworld:
plugin: nodejs
source: https://github.com/electron/electron-quick-start.git
after: [desktop-gtk3]
override-build: |
case $SNAPCRAFT_ARCH_TRIPLET in
"i386-linux-gnu") ARCH="ia32";;
"x86_64-linux-gnu") ARCH="x64";;
"arm-linux-gnueabihf") ARCH="armv7l";;
"aarch64-linux-gnu") ARCH="arm64";;
*) echo "ERROR: electron does not support the '$SNAPCRAFT_ARCH_TRIPLET' architecture" && exit 1;;
esac
npm install electron electron-packager &&
./node_modules/.bin/electron-packager . --overwrite --platform=linux --arch=$ARCH --output=release-build --prune=true
cp -v -R ./electron-quick-start-linux-$ARCH $SNAPCRAFT_PART_INSTALL/electron-helloworld
stage-packages:
- libasound2
- libgconf-2-4
- libnss3
- libx11-xcb1
- libxss1
- libxtst6
build-packages:
- nodejs
- npm
- unzip
# Adapted from snapcraft-desktop-helpers https://github.com/ubuntu/snapcraft-desktop-helpers/blob/master/snapcraft.yaml#L183
desktop-gtk3:
source: https://github.com/ubuntu/snapcraft-desktop-helpers.git
source-subdir: gtk
plugin: make
make-parameters: ["FLAVOR=gtk3"]
build-packages:
- build-essential
- libgtk-3-dev
stage-packages:
- libxkbcommon0 # XKB_CONFIG_ROOT
- ttf-ubuntu-font-family
- dmz-cursor-theme
- light-themes
- adwaita-icon-theme
- gnome-themes-standard
- shared-mime-info
- libgtk-3-0
- libgdk-pixbuf2.0-0
- libglib2.0-bin
- libgtk-3-bin
- unity-gtk3-module
- libappindicator3-1
- locales-all
- xdg-user-dirs
- ibus-gtk3
- libibus-1.0-5
Some points about this YAML
-
snapcraft-desktop-helpers is used to ease environment setup for electron. We need to copy/paste the relevant YAML right now.
- npm is the packaging tool being used
- It uses “electron-packager” to build the electron app.
- the"override-build" scriptlet is used to run commands to install electron-packager, build the package and install the final binary into a suitable location in the snap.
- the stage-packages are those we find necessary for the final binary to function. You may need to add more depending on the complexity of your application.
- it supports i386, amd64, armhf and arm64.
Build and test
Build the snap with:
snapcraft
and on your desktop, install and run:
sudo snap install --dangerous ./electron-hello-world-kiosk_0.1_amd64.snap
snap run electron-hello-world-kiosk
This should pop up a window with “Hello World” printed.