Azure DevOps Pipelines: Frontend Code Quality Checks

TL;DR

Check out the example repo to see the Azure Pipeline file, and all the associated NPM scripts.

Azure Dev-What?

Let’s get this out of the way. Yes, It’s been said before:

“But, Azure DevOps isn’t as good as JIRA…” by Every Product Owner, Project Manager & Developer ever.

…and I agree. I do love JIRA, I’ve spent as much time as the PMs learning JQL and squeezing every bit of automation and reporting out of the Atlassian suite to please EVERYONE.

That said, I really like the integration between the Azure DevOps tooling and Azure Public Cloud. You can go from business requirements > Dev > QA > Release in lightening speed; with full traceability.

Sure, you can take the effort to stitch together all of your favourite PM and Dev service together, and manage all of the licenses & access controls separately. But, why would you? Product development is difficult enough. Also, if you’ve already got 1 foot in 0365 you might as well shake off the vendor lock in fears and jump in with both feet.

Automate the boring stuff

I’ve already written about code quality in: Frontend Development Code Quality - What’s good enough? In this blog post I’ll cover automating those checks.

Follow the Create your first pipeline article. If you’ve used other CI/CD tools, and defined your build pipelines using YAML, there’s nothing scary here.

The example repo contains the following code quality checks (as mentioned in this blog post):

1. ESLint: For linting
2. Jest: For unit testing
3. NPM Audit: To check for vulnerabilities within the packages

Essentially, all the GitHub Action workflow file does is execute the NPM scripts. Here’s what the whole file looks like:

name: hello-example-$(BuildID)

trigger:
  branches:
    include:
      - main
      - feature/*
      - bugfix/*
      - hotfix/*

pool:
  vmImage: "ubuntu-18.04"

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: "14.x"
    displayName: "Install Node.js"

  - script: |
      npm audit --audit-level=high      
    displayName: "NPM: Audit dependencies (high)"
    
  - script: |
      npm ci      
    displayName: "NPM: install deps"

  - script: |
      npm run lint      
    displayName: "Tests: Lint"

  - script: |
      npm run test-ci      
    displayName: "Tests: Jest"

  - script: |
      npm run build      
    displayName: "Prod build"

  - task: PublishTestResults@1
    condition: succeededOrFailed()
    inputs:
      testRunner: JUnit
      testResultsFiles: '**/junit.xml'

  - task: PublishCodeCoverageResults@1
    condition: succeededOrFailed()
    inputs:
      codeCoverageTool: "Cobertura"
      summaryFileLocation: "**/coverage/cobertura-coverage.xml"

Another great feature of Azure DevOps Pipelines is: you can view your unit test reports:

…and your unit test coverage report too:

Check out these posts if you’re interested in automating these checks with CI/CD:

• GitHub Actions: Frontend Code Quality Checks
• GitLab CI/CD: Frontend Code Quality Checks