Switch to Electron Builder for auto-updates and proper installers

[joshwcomeau]

Right now, Guppy has no auto-update mechanism. This means that when we release a new version, the people using Guppy have to come back to this repo to download and install it! This is lame.

Auto-update appears to come built-into electron-builder. It also comes with other benefits, like building a .dmg for installation.

Unless anyone has any better ideas, I think we should switch to electron-builder.

[j-f1]

If you want a fancy landing page that will autodetect the user’s OS and serve the right installer, ZEIT’s hazel could be useful, although it doesn’t handle building the app.

[AWolf81]

I've tried to add electron-builder but it's not working yet. It looks like the build folder is not packaged into the executable.

Here is my config in package.json:

{
...,
"scripts": {
    ...,
    "pack": "npm run build && build --dir",
    "dist": "npm run build && build"
},
"build": {
    "appId": "guppy",
    "mac": {
        "category": "your.app.category.type"
    },
    "directories": {
        "output": "release-builds"
    },
    "publish": ["github"]
 }
}

Script started with yarn dist.
The created app installs but after start it doesn't show an error message. Just a blank electron screen.

I've also tried to add files key to build config but that wasn't working. Failed during bundling.

I have to check how the bundling can be customized at an electron-boilerplate. E.g. at this electron quick start repo.

[joshwcomeau]

If you want a fancy landing page that will autodetect the user’s OS and serve the right installer, ZEIT’s hazel could be useful, although it doesn’t handle building the app.

Neat! I'm not super concerned for that, although it's good to know about.

---

Thanks for taking a stab at it, @AWolf81! Is your work pushed to a branch on your fork? If so, I'll try and find the time to clone it and see if I can make sense of it.

[ganderzz]

Got it running on Windows 10, and creating an .exe using these settings (including src, public, and dist is required to run). Will mess around with the config some more, but feel free to take this as a base!

[AWolf81]

@joshwcomeau no problem, I haven't pushed it to my branch yet.

Thanks @ganderzz, I'll try your config later today. So I probably just missed to add more files to the config.
Do you know why the src folder is needed in the electron builder config? I thought that the build folder is enough as I think it contains all scripts.

[ganderzz]

@AWolf81 Didn't dive too much into it, but I'm guessing it's due to "main": "src/main.js" in package.json. Might just have to change that to point to the compiled js in build. 🤔

[AWolf81]

@ganderzz It's still not working for me. 😢 The app is created/bundled but after starting the app it's not finding cross-spwan see screenshot below. DevServer is starting with-out that message - so it's correctly installed.

I'm not sure what's missing in my config (see here).

I've also tried to create a second package.json in the build folder so I could set a different main script. But that wasn't working.

I need to check the following:

• Why is the Node module missing? Maybe node_modules folder needs to be added like in the react-electron-boilerplate
• Change bundling with-out source folder as it looks like it is not using the build files.
• Create a minimal electron app with webpack & react & electron-builder to learn more about the build config.

[ganderzz]

@AWolf81 Weird, haven't ran into that issue. The only difference I can see between our configs is ./build/ -> "./build/**/*". I've tried the config on my fork on both Windows 10 and Mac, and both seem to be creating a working executable.

[joshwcomeau]

Thanks for digging into this, @AWolf81 and @ganderzz! This is one of the top-priority tickets, since we really need to figure out a story for auto-updates.

Happy to help debug if either of you want me to try running your forks locally!

[joshwcomeau]

Hey @ganderzz,

Now that Windows support is complete and merged, I believe this is the new highest-priority ticket. Having auto-update is super important, so that users don't have to re-download the entire app just because an update is available.

@AWolf81 is on vacation for the next 2 weeks, and I'd love to get this done before then.

Is this something you're interested in continuing work on? No worries if not, I'll start a new PR based on the work you've already done :) just wanted to check!

Thanks.

[j-f1]

users don't have to re-download the entire app just because an update is available.

Unfortunately, that’s exactly how most Electron auto-updaters work.

[ganderzz]

@joshwcomeau Feel free to take over! Got stuck during trying to notify the app when a new version was released, and ran out of time. I've pushed up everything I have to my branch (HERE).

[joshwcomeau]

Ok! Thanks @ganderzz.

users don't have to re-download the entire app just because an update is available.

Unfortunately, that’s exactly how most Electron auto-updaters work.

Ah :/ well, I kinda mis-spoke; I think the real friction is needing to go to github, find the release, and download it... even if it has to re-download the entire 150mb+ package every update, at least it's low-friction for the user.

[Jtfinlay]

So, I think I have things most of the way there. Branch here: https://github.com/Jtfinlay/guppy/tree/buildermin

I have electron-builder pulling from /build. I hit some snags because the electron starter (main.js) has shared dependencies with the main app from references to kill-process-id.service and electron-store.service.

I decided to make an 'electron' entry for webpack. It will pull whatever dependencies are needed and keep the electron starter and actual app as separate files, but we can share code between them without duplicating in the source. I then fixed some other problems this caused, and this seems to be working.

The problem I haven't solved is that node's spawn isn't working when referencing a file within a .asar. So when we try to execute any yarn command from within the app we hit a failure. I'm working on this... the path it finds is correct, but I'm wondering whether I need to unpack some dependencies? There seems to be many cases of this problem online, so will continue digging.

I will test on my fiancee's mac tomorrow to see whether it is working cross-platform. Interesting issue :)

[superhawk610]

I'd imagine you'll have to do some unpacking first, since files in an .asar container can't be accessed natively.

[joshwcomeau]

Hi @Jtfinlay!

Awesome timing, I was about to start looking at this myself this morning. I'm not in a rush, though, so I'll leave it to you :) sounds like you're making tremendous progress.

I'm totally unfamiliar with asar, but it sounds like you're on the right track. Feel free to open a "WIP" commit, I'd be happy to test it on my mac as well.

[Jtfinlay]

Thanks! I'll have a PR out soon for help testing. I've verified on the mac and the behavior is the same so far. More eyes will be appreciated.

I have changes almost done to unpack yarn and fix the path to point to the unpacked version, and it works. The electron-builder docs say that these packages should work out of the box, so I'll get a small repro and issue on them later. Just finishing some clean up and PR will be ready.

I'm not including any changes for setting up auto-update. From what I see, it should just be configuration changes once this migration is done.

[joshwcomeau]

Thanks! I'll have a PR out soon for help testing. I've verified on the mac and the behavior is the same so far. More eyes will be appreciated.

Woohoo! Can't wait :D

I have changes almost done to unpack yarn and fix the path to point to the unpacked version, and it works. The electron-builder docs say that these packages should work out of the box, so I'll get a small repro and issue on them later. Just finishing some clean up and PR will be ready.

Not sure I understand; do you mean so that NPM scripts can be run using Yarn (AKA the stuff discussed in #44)? Or is this a part of just getting electron-builder to work?

I'm not including any changes for setting up auto-update. From what I see, it should just be configuration changes once this migration is done.

Yep, that's exactly what I expected :) switching packagers is plenty for 1 PR, anyone can pick up the configuration once that PR is landed.

[Jtfinlay]

Not sure I understand; do you mean so that NPM scripts can be run using Yarn (AKA the stuff discussed in #44)? Or is this a part of just getting electron-builder to work?

This is regarding when we invoke different tasks from within guppy on a project. To do this, yarn is included in node_modules. The reference to its path was failing, as depicted in the screenshot I first posted.

[AWolf81]

We can close this as Electron-builder is merged to master.