5 minutes to teach you to quickly master GitHub Actions to automatically publish Npm packages and websites

GitHub Actions has grown in popularity since GitHub announced that GitHub Actions are available on the platform to all developers and repositories. Many third-party platforms have speed and other limitations in the ecosystem, which will further push developers to automate the migration of their software to GitHub Actions.

In this article, I want to show you how I use GitHub Actions to publish npm packages that I maintain in an open source project. If you follow the GitHub process, which consists of a GitHub pull request workflow, then this will further unify the workflow and enhance the experience for the team and community contributors.

GitHub Actions

GitHub Actions is a technology developed by GitHub to give developers a way to automate their workflows around continuous integration -- helping them build, deploy, schedule repetitive tasks, and more. GitHub Actions are natively available and integrated into GitHub repositories, with many reusable workflows from community contributors, such as publishing npm packages, publishing docker images, running security tests, and more.

The essence of Github Action is the continuous integration tool launched by Github. After each code is submitted to the Github repository, Github will automatically create a virtual machine (such as Mac / Windows / Linux) to execute one or more instructions, such as:

 npm install
npm run build

The way we integrate Github Action is to create a .github folder in the root directory of our repository, and put a *.yaml file in it. This Yaml file is the file we use to configure Github Action.

Github Action usage restrictions

• Jobs in each Workflow can be executed for up to 6 hours
• Each Workflow can execute up to 72 hours
• Jobs in each Workflow can be queued for up to 24 hours
• Among all actions in a repository, a maximum of 1000 API requests can be executed in an hour
• Number of concurrent jobs: Linux: 20, Mac: 5

What is GitHub Workflow?

A GitHub workflow is a set of jobs that run on a trigger-based or cron-based schedule. A job consists of one or more steps that make up an automated workflow. We create the Workflow configuration by creating a YAML file.

Build Npm packages from scratch for continuous integration

After understanding the basic knowledge, I will take everyone to quickly get started with Github Action through an actual project, and the ultimate goal: when we push the code to github, the project will be automatically packaged through Github Action and published to the npm and publish a Github Page site.

Get Npm Access Token

In order for Github Action to have the right to publish the specified npm package, it needs to obtain the npm pass. This pass is the npm token, so we need to log in to the npm official website and generate a token.

Get Personal Access Token

Click Generate new token to generate a new token and copy it. It should be noted that this Personal Access Token, like the Npm Access Token above, will only be displayed when the generation is successful. Once you exit, you cannot view it, so remember to save it.

Set up Github Secret

After we get the npm token, open the Github repository of the corresponding project, switch to the settings panel, find the secrets submenu, create a new secret, copy the npm token to the content area and name it

Fill in the Name and Value fields, Name is ACCESS_TOKEN and NODE_AUTH_TOKEN, and Value is the Personal Access Token and Npm Access Token that were just saved.

Token Name	Key	Vale
Personal Access Token	ACCESS_TOKEN	${{ secrets.ACCESS_TOKEN }}
Npm Access Token	NODE_AUTH_TOKEN	${{secrets.NPM_TOKEN}}

Using the Workflows template

We switch to the actions panel to see a lot of workflows templates, we choose the following templates:

Of course, if the attribute yaml is configured, you can also create a workflow for others to use.

After we click the install button, we will jump to the editing interface. We can directly click the submit button on the upper right:

At this point a workflow is created.

Configure workflows

Here I list the workflow of github-actions-tutorial:

 name: Node.js Package

# 触发工作流程的事件
on:
  push:
    branches:
      - main
      - "releases/**"
      - dev

# 按顺序运行作业
jobs:
  publish-gpr:
    # 指定的运行器环境
    runs-on: ubuntu-latest
    # 设置 node 版本
    strategy:
      matrix:
        node-version: [16]
    steps:
      # 拉取 github 仓库代码
      - uses: actions/checkout@v3
      # 设定 node 环境
      - uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          # 设置发包 npm 地址仓库
          registry-url: https://registry.npmjs.org
      # 安装依赖，相当于 npm ci
      - name: Install dependencies 📦️
        run: npm install
      # 执行构建步骤
      - name: 构建
        run: |
          npm run build
      # 执行部署
      - name: 部署
        # 这个 action 会根据配置自动推送代码到指定分支
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          # 指定密钥，即在第一步中设置的
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 指定推送到的远程分支
          BRANCH: pages
          # 指定构建之后的产物要推送哪个目录的代码
          FOLDER: build
      - run: npm publish
        env:
          # 刚刚设置的 NPM_TOKEN
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

Here are a few terms to introduce to you:

• name The name of the Workflow, Github displays the name of the Workflow on the Action page of the repository
• on The name of the event that triggers Workflow execution, such as on: push (single event), on: push, workflow_dispatch (multiple events)
• jobs A Workflow consists of one or more jobs, meaning a continuous integration run that can complete multiple tasks
• steps Each job consists of multiple steps, which will be executed sequentially from top to bottom
• env environment variable, secrets.NPM_TOKEN is the secret we defined earlier

Submit a test

Let's modify the code of the project and execute:

 git add .
git commit -m ':new: your first commit'
git push

After the submission is successful, we open the github action panel of the project:

Click on the Actions tab of the corresponding Github repository to see the build process for each step. You can see that the push event we defined in *.yml is triggered, all steps in jobs are executed, packaged, and the packaged content in the build folder is pushed to the pages branch of the github repository.

When the job option is completed, go to the Settings => Pages menu of the warehouse, set the Source Branch field to pages, and select the root root directory for the folder:

Click the Save button and wait for a while until a notification appears above that the build has been successful. Click the link to enter and you can see the automatically built application. From now on, you only need to push to the branch specified in the yml file to automatically trigger the build and update your website automatically.

View published NPM packages and website

• View workflow files and published sites
• View published Npm packages

Reference documentation

• GitHub Actions/Workflow syntax
• Use Github Actions to automate front-end application deployment and npm package release
• 5 minutes to teach you to quickly master Github Action continuous integration

If the articles and notes can give you a little help or inspiration, please don't be stingy with your likes and collections, yours must be the biggest motivation for me to move forward 😁

Attach a link to the note, read more high-quality articles in the past, you can move to view, if you like it, you can give me a thumbs up and encouragement:
https://github.com/Wscats/github-actions-tutorial