How I Set Up a GitHub Workflow to Automatically Lint and Test My Vue Project on Push

I've been learning Vue.js in my spare time. I've been using this weather forecast app that I created as a sandbox for learning Vue. As you can see in the repo, I documented some goals that I have for this project. One of those goals is to write unit tests using Jest. Today I created a simple GitHub Workflow that will automatically run my unit tests as well as lint anytime I push to my repo. Today I'll share this workflow with you.

The Workflow

Below is the GitHub Workflow that I created that lints and tests my Vue.js CLI project on push:

name: Run Unit Tests and Lint Files
"on": push
jobs:
  unit_test-lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: |
              npm ci
              npm run build
              npm run test:unit
              npm run lint

These twelve lines of YAML serve as a gatekeeper of sorts. Of course I can build, run my unit tests, and lint locally before I push, but what if I forget. What if I have a contributor that forgets?

There is nothing inherently 'Vue.js' about this workflow. You could plug it in to other JavaScript projects. You would just need to make sure the scripts that you run are defined in your projects package.json file.

Let's break down the commands used in the run key.

First of all, I'm using a pipe (|) operator to specify multiple commands.

• The first command, npm ci, per the docs, "is similar to npm install, except it's meant to be used in automated environments such as test platforms, continuous integration, and deployment -- or any situation where you want to make sure you're doing a clean install of your dependencies."

• npm run build is a script that's defined in my project's package.json that runs vue-cli-service build. I run this command before I test and lint...just to make sure it will build.

• npm run test:unit runs vue-cli-service test:unit. This is the command that runs my unit tests. If any of the unit tests fail, the workflow will fail, and that PR definitely ain't getting merged.

• npm run lint runs vue-cli-service lint. Similar to the build and unit tests commands, if linting fails, the workflow will fail.

To implement a Workflow in your GitHub project, you need to first click on the Actions tab. Once in the Actions tab, click the New Workflow button. From there, click the set up a workflow yourself link. You'll see an editor with some YAML inside of it. Once you get your workflow created, just click the Start Commit button. You'll be given the option to commit to your main/master branch, or create a new branch. You can pick whichever works for you, I personally choose to create a new branch.

Conclusion

I've used GitHub Actions/Workflows here and there, but am still pretty much a noob. I found the GitHub Actions Cheat Sheet and the Intro to GitHub Actions to be very helpful in gaining a better understanding of GitHub Actions/Workflows.

I'm still a bit confused on when to call it an Action vs a Workflow. If you can ELI5 in the discussion below, that would be helpful.