This is the 14th day of my participation in Gwen Challenge

Half a month’s effort, finally to release a version of the time, based on the functional logic, although the need to constantly improve, but according to the MVP minimum quantitative development logic, to himself set a version every two weeks.

So today’s goal is to learn how to package the Mac version.

Before we learn how to automate the packaging of Mac versions on Github Actions, we need to learn about Github Actions.

Github Actiion

In the first few days of using the framework template, I kept noticing that whenever I submitted code to Gtihub, I would see a red (❎️) prompt (now mostly ✅️) :

Click on the prompt to jump to the “Actions” interface, as shown in the screenshot below:

Github used the.github directory to write workflows for all Actions.

Here’s a quick introduction to lint.yml.

lint.yml

As the name suggests, this is mainly used in conjunction with code formatting checks, and actually does yarn Lint when the code is committed to the cache.

// package.json
"simple-git-hooks": {
  "pre-commit": "npx lint-staged",
  "pre-push": "npm run typecheck"
},
"lint-staged": {
  "*.{js,ts,vue}": "eslint --cache --fix"
},
Copy the code

That is, this is equivalent to:

// package.json
"scripts": {
  ...
  
  "lint": "eslint . --ext js,ts,vue",
  
  ...
}
Copy the code

So BEFORE committing the code, I always execute YARN Lint myself to make the code error free.

Back up, let’s look at the Workflow code:

name: Linters on: push: branches: - main paths: - '**.js' - '**.ts' - '**.vue' - 'yarn.lock' - '.github/workflows/lint.yml' pull_request: paths: - '**.js' - '**.ts' - '**.vue' - 'yarn.lock' - '.github/workflows/lint.yml' defaults: run: shell: 'bash' jobs: eslint: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: 15 # Need for NPM >= 7.7-uses: actions/cache@v2 with: path: ~/.npm key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }} restore-keys: | ${{ runner.os }}-node- # TODO: Install not all dependencies, but only those required for this workflow - name: Install dependencies run: npm install -g yarn && yarn install --immutable - run: yarn lintCopy the code

Use yarn.lock to quickly install all dependencies, then install yarn globally, and then execute yarn Lint to get the same effect.

packaging

Lint. yml is packaged with release. Yml.

Look directly at the code:

# Compile app and upload artifacts - name: Compile & release Electron app uses: samuelmeuli/action-electron-builder@v1 with: build_script_name: build args: --config electron-builder.config.js # GitHub token, automatically provided to the action # (No need to define this secret in the repo settings) github_token: ${{ secrets.github_token }} mac_certs: ${{ secrets.mac_certs }} mac_certs_password: ${{secret. mac_certs_password}} # If the commit is tagged with a version (e.g. "v1.0.0"), # release the app after building release: true # Sometimes the build may fail due to a connection problem with Apple, GitHub, etc. servers. # This option will restart the build as many attempts as possible max_attempts: 3Copy the code

One of the things that needs to be explained here is how to get Mac Code Signing.

Code Signing

If you are building for macOS, you’ll want your code to be signed. GitHub Actions therefore needs access to your code signing certificates:

Open the Keychain Access app or the Apple Developer Portal. Export all certificates related to your app into a single file (e.g. certs.p12) and set a strong password Base64-encode your certificates using the following command: base64 -i certs.p12 -o encoded.txt

In your project’s GitHub repository, go to Settings → Secrets and add the following

two variables: mac_certs: Your encoded certificates, i.e. the content of the encoded.txt file you created before mac_certs_password: The password you set when exporting the certificates

- name: Build/release Electron app
  uses: samuelmeuli/action-electron-builder@v1
  with:
    # ...
    mac_certs: ${{ secrets.mac_certs }}
    mac_certs_password: ${{ secrets.mac_certs_password }}
Copy the code

Specific in Mac Developer center how to create a developer certificate here will not say, after our Mac local machine mentor certificate P12 format file, and then encrypted output as a string:

Finally, fill in Settings/Secrets for release Action:

Ok, let’s submit the code and see workflow in action:

So far, you can see the packaged execution package in the Draft:

Download it and follow it to see if it works.

summary

Today we’ll take a quick look at how to execute Github Actions, write Workflows and Mac certificate generation and finally package them in DMG format for download and installation.

Here I’m going to change the default package of the framework I introduced to Windows EXE to Mac DMG; NPM was used before, change to YARN; I have deleted the test part at present, and the automatic test part will be added in the next use.

In addition, after the package is executed, we found that the network request and cache error:

This is waiting for me to continue to optimize, to be continued!

The Electron+Vue3 Calendar for MAC version development records recently a partner asked the code link: the code has been synchronized to github: github.com/fanly/fanly…

Finally, the beginning and end of each article is not added to make up the numbers, I do not write hydrology and water ~