WIP Attempt to Migrate to Electron Forge + GitHub Actions for CI/CD

[seanoliver]

trafficstars

This commit attempts to migrate our deployment process from a manual one to an automated CI/CD process using Electron Forge (https://www.electronforge.io/) to manage signing, notarizing, and building the app. Doing this will provide these benefits:

• Easier support for Auto Updates (https://www.electronforge.io/advanced/auto-update)
• Automating the code signing (https://www.electronforge.io/guides/code-signing)
• Sign and build on every push to main via Github Actions (https://github.com/jsoma/action-electron-forge)

Here's the primary steps I took thus far (though I branched off in a few different directions for various explorations I can walk through if interested):

1. Cloned the Webpack + Typescript sample app (https://www.electronforge.io/templates/typescript-+-webpack-template) to see the files needed to build a project with Forge.
2. Compared the configuration in our app with the sample app and migrated over the key details. The big things I did here are:
   1. Created forge.config.js which contains the configuration for forge. Right now, all of the stuff related to signing and notarizing is commented out, as are some of the icon image paths (was mainly trying to get the thing to build first).
      1. Also note that this file currently only covers the various platform makers and github publication. It references our existing webpack configuration files, but it doesn't implement any of the webpack configuration within Forge — this is possible, but problematic because TypeScript.
      2. I have a separate fork locally that I can share which has all of the webpack configuration directly embedded in the forge config if you're interested in checking that out.
   2. Updated location of main in package.json to point to our webpack configuration at webpack.config.main.prod.ts and removed the manual build configurations. Note the original package.json file is preserved in package-old.json for easier comparison.
3. Added .github/workflows/config.yml which installs build dependencies and manages the signing and notarizing as part of CI/CD. There are some keys needed here as well.
4. Added add-osx-cert.sh , a shell script that sets up a temporary keychain on a macOS machine, imports a certificate into it, and configures it for code signing as part of CI/CD. The github action mentioned above calls this.
5. Temporarily commented out the environment check script because for some reason it wasn't properly distinguishing between production and development. I traced the issue to the call in webpack.config.renderer.prod.ts (line 19) and the decision to run the prod vs. dev webpack configuration which is made on lines 18 and 123 in forge.config.ts.

We're 90% of the way there, but I keep coming back to the issue that it doesn't like that we're using ESM syntax for imports and exports in main.ts even though we can use it just fine in all of our other files. This seems like an easy thing to fix, but each strategy I try creates a new problem with import / export compatibility because we're ultimately using a mix of ESM and require syntax in certain files.

Happy to go deep on any of this as I'd love to see this thing make it across the finish line! Unfortunately I think I've taken it about as far as I can without further help!

[swyxio]

. This seems like an easy thing to fix, but each strategy I try creates a new problem with import / export compatibility because we're ultimately using a mix of ESM and require syntax in certain files.

this is the entire bull case for bun