Trying Electron for packaging web apps

I know that Electron is quite famous to package web applications into native binaries, but I hadn't decided when to use it. So after reading that version 20 had just been released, I checked the tutorial and it looked insanely easy and quick to get a simple page transformed, so I decided to give it a go.

The tutorial guides you quite well and step by step, both in building a hello world web inside Electron, and then adding Electron Forge to build the binaries. I picked up my pomodoro web app and excepting a single issue regarding the favicon, it gave me no errors. Even the notifications worked out of the box!

But being a bit stubborn myself, I wanted to generate both Linux and Windows from the same Linux host, and despite what the Electron Forge Makers doc said, I wasn't able to compile Windows binaries. Having installed the pre-requisites both mono and wine (and available from my $PATH), it didn't worked with Squirrel nor with WiX. It would only compile the Linux deb installer.

This is my makers config (almost the same as the tutorial's):

"makers": [
  {
    "name": "@electron-forge/maker-squirrel",
    "config": {
      "name": "pomodoro"
    }
  },
  {
    "name": "@electron-forge/maker-deb",
    "config": {}
  },
  {
    "name": "@electron-forge/maker-wix",
    "config": {
      "language": 1033,
      "manufacturer": "Kartones"
    }
  }
]

My saviour was electron-builder. Just npm-installing it and adding a new script like the following:

"scripts": {
    ...
    "make-windows": "electron-builder --ia32 --x64 -w"
  }

Made it work at the first attempt.

I knew that Electron apps tend to weight a lot, as after all they contain a NodeJS and a Chromium browser. What I didn't expected was that the Windows installer of a < 0.5MB webpage would weight 266MB! And even less that the Linux deb installer would be a whooping 600MB!!! I'm sure there are some tweaks and options to shrink this, but the default is... a bit insane... I also want to test generating the Linux binaries using electron-builder, as maybe works better than electron forge (one binary weights less than half than the other).

So, overall, it is true that Electron is very very easy to get running and do a simple packaging, and you can even do multi-arch and cross-platform compilations from a single host (which sounds as crazy as great!), but the default options seem to make it just work for building a kind of "alpha" binary, in need of extra love.

Tags: Development

Trying Electron for packaging web apps article, written by Kartones. Published @