preface

Front End time has released a slide-validation package called React-Slider-Vertify, which uses Github Action as an automated package distribution tool. With a simple configuration, it is easy to automatically package projects and publish them to NPM when git push is executed.

Next I will take you through the Github Action, and teach you how to use Github Action to efficiently manage and publish your own open source projects.

Making the Action profile

Github Action is a continuous integration tool launched by Github. After submitting code to Github repository, Github automatically creates a virtual machine (such as Mac/Windows/Linux) to execute one or more commands, such as:

npm install
npm run build
Copy the code

The way we integrate Github actions is to create a.github folder in the root of our repository and put a *. Yaml file in it. The yaml file is the one we used to configure Github actions.

More knowledge about yaml can refer to: www.codeproject.com/Articles/12…

Restrictions on Github Actions

  • A job in each Workflow can be executed for a maximum of six hours
  • Each Workflow can run for a maximum of 72 hours
  • Each Workflow job can be queued for a maximum of 24 hours
  • Up to 1000 API requests can be executed in an hour across all actions in a repository
  • Number of concurrent jobs: Linux: 20, Mac: 5

Workflow is a configurable, automated process composed of one or more jobs. We create the Workflow configuration by creating a YAML file.

Build github Continuous Integration Project from scratch (NPM package Continuous Integration)

After understanding the basic knowledge, I will take you through a practical project to quickly start Github Action. Final goal: When we push the code to Github, we automatically package the project through Github Action and publish it to NPM with one click.

Access to NPM token

In order for Github actions to have the right to publish the specified NPM package, you need to obtain an NPM pass. This pass is the NPM token, so we need to log in to the NPM official website and generate a token:

Set up making secret

After getting the NPM token, we opened the Github repository of the corresponding project, switched to the Settings panel, found the Secrets submenu, created a new secret, and copied the NPM token into the content area. And name it (this name is used in the YAML file).

Create a dead simple Action

We switched to the Actions panel and saw a number of Workflows templates. We selected the following template:

If the property is configured with YAML, you can also create a workflow for others to use.

After we click the Install button, it will jump to the edit interface. We can directly click the Submit button on the upper right:

At this point, you create a Workflow.

Configuration workflows

Here’s my workflow for react-Slider-Vertify.

name: Node.js Package

on:
 pull_request:
   branches:
     - main
 push:
   branches:
     - main

jobs:
 build:
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
         node-version: 14
     - run: yarn
     - run: yarn build

 publish-npm:
   needs: build
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
         node-version: 14
         registry-url: https://registry.npmjs.com/
     - run: npm publish --access public
       env:
         NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
Copy the code

Here are a few terms to introduce to you:

  • Name The name of the Workflow. Github displays the Workflow name on the Action page of the repository
  • On Is 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. It is a continuous integrated Workflow that can complete multiple tasks
  • Steps Each job consists of multiple steps, which are executed from top to bottom
  • The env environment variable, secrets.npm_token, is the secret we defined earlier

Submit the test

Let’s modify the project code and execute:

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

After successful submission we open the Github Action panel of the project:

Does the flow and state of the code line build look similar to the automated process we use to develop enterprise projects?

The last

If you are interested in visual scaffolding or low code/zero code, please refer to my previous articles or share your thoughts in the comments section, and explore the real technology of the front end.

Github: React-Slider-Vertify column: LowCode Visual Public account: Interesting front end

More recommended

  • Develop a lightweight sliding verification code plug-in from scratch
  • How to design a visual platform component store?
  • Build engine from zero design visualization large screen
  • Build desktop visual editor Dooring from zero using Electron
  • (low code) Visual construction platform data source design analysis
  • Build a PC page editor pc-dooring from scratch
  • How to build building blocks to quickly develop H5 pages?