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!