Make a HTML5/Electron-based Kiosk Snap

Key Value
Summary Build and deploy an Electron-based kiosk application as a snap.
Categories iot
Difficulty 3
Author Alan Griffiths alan.griffiths@canonical.com

Superseded

This article has been superseded…

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

A) The tutorial assumes you have a snap of your Electron
B) it links to a tutorial which uses electron-builder to create a snap.

Fine so far, because electron-builder in B builds a snap file which is requested in A. But later it explains how to convert the electron snap into a kiosk snap by changing the yaml configuration file. This is not possible, however. Because you used electron-builder, you don’t have such a yaml file. You only get a snap-file.

As a complete beginner to snaps I’m really confused. I searched and searched for this yaml file but couldn’t find it. Now I guess the tutorial aims to build an electron-snap via yaml file completely on your own instead of electron-builder. Therefore I suggest to remove the link to electron-builder at all.

A recent change to the Snapcraft build process broke this tutorial and I believe it now needs an extra npm install in the override-build section.

I also agree it’s quite confusing that the tutorial assumes you already have a working snap. The tutorial depends on reading several other tutorials to make sense of it and it would be great if it could be more self-contained.

I still haven’t been able to figure out whether it’s possible to create a single snap which works on both Ubuntu Classic and Ubuntu Core using this process.

2 Likes

Out of curiosity, what is the rationale for the separate electron-hello-world-kiosk and daemon apps with the same command in the second snapcraft.yaml? Is there a reason to not just make the electron-hello-world-kiosk a daemon?

Note that you need to add libpulse0 to stage-packages in order for audio playback to work. Should that be added to the tutorial?

1 Like

Instead of using nodejs plugin, I would suggest ‘nil’. Then add the npm build-snap:

parts:
  electron-helloworld:
    plugin: nil
    source: https://github.com/electron/electron-quick-start.git
    <snip>
    build-snaps:
    - node/14/stable

you may want to set the version of electron-packager to electron-packager@14.2.1 as newer versions need a newer version of npm or node than is in the nodejs plugin

In order to make it work I had to make some changes to the snapcraft.yaml as follows:

  1. Had to set the node-js to 10.x.x since it was installing a different version and causing build issues (electron-helloworld).
  2. Added --unsafe-perm=true to npm install to avoid permission denied issue (electron-helloworld).
  3. Removed nodejs and npm from build-packages, it is actually a redundancy cause we are already using the nodejs plugin and default nodejs installed on core18 is version 8 which does not work for the example (electron-helloworld).
  4. Added /root/parts/electron-helloworld/npm/bin to the PATH using build-environment, it is probably not the right way of setting the path (/root/parts/…) but it made process find the node and npm installed when we defined the nodejs plugin (electron-helloworld).
  5. Also added libdrm2, libgbm1 and libwayland-server0 to the electron-helloworld part in the stage-packages, it was missing
  6. Also added libgtk2.0-0 to the desktop-gtk3 part in the stage-packages, it was missing

snapcraft.yaml files Diff below:

23a24
>     nodejs-version: "10.23.0"
34c35
<         npm install electron electron-packager &&
---
>         npm install electron electron-packager --unsafe-perm=true &&
43a45,47
>     - libdrm2
>     - libgbm1
>     - libwayland-server0
46,47c50,51
<     - nodejs
<     - npm
---
> #    - nodejs
> #    - npm
48a53,54
>     build-environment:
>     - PATH: /root/parts/electron-helloworld/npm/bin:$PATH
58a65
> 
76a84
>       - libgtk2.0-0
1 Like

Hai, i am still stuck at this step.
Using electron-builder i currently have a working snap file and from there every other step mentioned on the doc does not understand to me.
any help is really appreciated
Thank you.

just to add to the confusion (sorry, i have not updated the tutorials yet, it is on my TODO though):

note that i dont think you can use electron-builder to get a daemon snap working easily …

It would be great if someone could push the changes to the tutorial, if only to freeze the version of electron-packager as currently this tutorial doesn’t work at all.

I spend a good 6 hours trying to debug until I found this page! I managed to get a newer version of node installed following some other tutorials but it was still using the original.

The “moved here” link is broken, is it this link?

Thanks @carkod. Fixed