GitLab CI/CD: Frontend Code Quality Checks

Intro

GitLab is another populate tool for developers.

I’ve already written about code quality in: Frontend Development Code Quality - What’s good enough? In this blog post I’ll be showing how to “Automate the boring stuff” and cover those checks.

TL;DR

Check out the example repo to see the GitLab CI file, and all the associated NPM scripts.

Background

To get up and running follow the Get started with GitLab CI/CD guide. 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:

image: node:14.17.6

# Cache modules in between jobs
cache:
  key: $CI_COMMIT_REF_SLUG
  paths:
    - .npm/

npm_audit:
  stage: build
  script: npm audit --audit-level=high

before_script:
  - npm ci --cache .npm --prefer-offline

test_lint:
  stage: test
  script: npm run lint

test_jest:
  stage: test
  script: npm run test-ci

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

• Azure DevOps Pipelines: Frontend Code Quality Checks
• GitHub Actions: Frontend Code Quality Checks
• 5 steps to reduce your React app CI/CD build minutes