Complete and comprehensive, teach you to build Electron applications on Github Action multi-platform

As we all know, Electron is an open source cross-platform framework, which integrates the Node.js environment and the browser environment, allowing developers to use Web technology to draw the client's UI, while having good I/O capabilities.

Our team's product Eoapi uses Eletron as the base of the product. When it is released, it needs to be packaged and built for both Windows and Mac platforms, and Mac is divided into two processor architectures, x86 and arm.

Therefore, we initially need to prepare three computers for building applications for three platforms.

In addition to the environmental inconvenience, packaging locally will also cause some local problems, such as network problems caused by the great Great Wall.

Therefore, we hope to build in an automated way. Since our project source code is on Github, we will naturally choose Github Action to do this work.

Configuration file address: https://github.com/eolinker/eoapi/blob/main/.github/workflows/release.yml
It can be opened and eaten with this article~

First we need to create a .github folder in the root directory of the project, which has a workflows folder, which contains a release.yml file, the file name can be Define freely.

The syntax used in release.yml is yml , which can be understood as another style of JSON , at least in terms of expressiveness, the two are similar . If you need to know more about it, you can go to the workflow syntax of GitHub Actions GitHub Docs

 name: Release
 
 on:
   push:
     tags: 
       - 'v*.*.*'

What we define is to trigger this automated workflow by git tag . If necessary, it can also be defined to trigger according to an event submitted by a branch.

The next step is to define the specific workflow. The following is a slightly simplified Windows environment construction, which roughly defines the definition of the basic environment, such as Windows system + Node.js 16:

 ......
 jobs:
   release:
     name: build and release Electron app
     runs-on: ${{ matrix.os }}
 
     strategy:
       fail-fast: false
       matrix:
         os: [windows-latest]
 
     steps:
       - name: Check out git repository
         uses: actions/checkout@v3.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v3.0.0
         with: node-version: '16'
 
       - name: Release for Windows
         if: matrix.os == 'windows-latest'
         run: yarn release
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

The context involved can refer to the official documentation: Context - GitHub Docs .

We need to define a Electron-builder.json and place it in the root directory, and configure the basic information of the package here. Since this has little to do with Github Action , it will not be described in detail here. In short, this Electron A necessary file for construction, this file may depend on other files, and you need to configure it according to the project situation. For example ***.mac.plist this kind of file is only used for MacOS package configuration file.

Windows is relatively simple . Basically, you only need to define the system and Node.js version. If you have no problem building on your own Windows computer, then the probability of encountering problems on Github Action is not high.

We tried to build Windows applications on Github Action, and it was successful after one or two attempts, but it was difficult to build on the MacOS platform.

If you want the released MacOS application to not pop up a distrust warning when the user installs it, and to be able to update automatically, it must be signed.

You need to download the corresponding certificate from the Apple developer account. When building locally, Electron will automatically find the appropriate certificate in the local keychain. So what about in a cloud environment like Github Action ?

Simply put, it is divided into the following two steps:

1. You need to use command line tools or other tools to convert the certificate to base64 and store it in Github secrets.
2. When building in the cloud, the base64 string is extracted from Github secrets, decoded and written to the runtime environment variable.

The whole mechanism is like this, the statement to convert the key at runtime is as follows:

 run: |
      CERTIFICATE_PATH=$RUNNER_TEMP/build_certificate.p12
      echo -n "$BUILD_CERTIFICATE_BASE64" | base64 --decode --output $CERTIFICATE_PATH

Our application has two certificates and one key, so it is cumbersome to write, but the key point has been mentioned above, which is to convert the file to base64 and store it in Github secrets , and then take it out when it is used.

For specific examples, see: Install Apple Certificates on macOS Runners for Xcode Development - GitHub Docs , the instructions are not particularly exhaustive, but basically everything is covered.

The main difficulty lies in the fact that it needs to temporarily convert and generate multiple files at runtime, which involves many environment variables , which is a little laborious. In fact, the logic is not complicated.

If you encounter problems during the build process, you can check the input log online to troubleshoot:

When building locally, Electron will automatically be packaged according to the architecture of the current system. For example, I can use my MacBook M1 to build an application of the arm architecture without any extra configuration.

But in Github Action, since the MacOS running containers provided by Github are all x86, it is necessary to explicitly declare the application to build arm . We specify this through the build command:

 Electron-builder -m=dmg --arm64 -p onTagOrDraft

That is to say, in the MacOS environment of Github Action, we need to run two different build commands to get the installation packages of the two platforms and generate a Draft Release.

The effect after publishing is as follows:

The whole process is generally like this. For specific application scenarios, you can refer to the construction configuration of our current open source project Eoapi .

I am very grateful to Github Action for providing such a running environment for free.

Eoapi is an open source API tool similar to Postman, which is lighter and extensible.
Project address: https://github.com/eolinker/eoapi
Documentation address: https://docs.eoapi.io/?utm_source=SF0803
Official website address: https://www.eoapi.io/

If you have any questions or suggestions about Eoapi , you can go to Github or come here to find me, raise an Issue, and I will reply in time when I see it.