Introduction
GitLab is a web-based DevOps platform that enables teams to perform all the tasks in a project—from project planning and source code management to CI/CD (continuous integration and delivery/deployment) and monitoring. GitLab CI/CD streamlines our software delivery process, ensuring rigorous testing and smooth progression through different environments to reach production.
Before building and deploying the application, let's focus on code quality first. Code quality checks enable teams to maintain consistency, adhere to coding standards, and uphold best practices. Well-structured code is easier to maintain and reduces the time and effort spent on debugging and troubleshooting. Besides human code review activities, the GitLab Merge Request pipeline is an additional layer of assurance by automated jobs.
This blog will show you how to configure code quality checks for a React Nx repository.
Understanding Merge request pipeline
GitLab Merge Request Pipelines are automated workflows triggered when you create new merge requests or push new commits to a merge request’s source branch. These pipelines run a series of predefined checks on the proposed changes before they are merged into the main branch. By catching issues early in the development process, Merge Request Pipelines help prevent bugs and maintain high code quality.
Config code quality check GitLab CI/CD for React Nx repository
Prerequisite
Before you start, make sure you have:
A React Nx project in GitLab that you would like to use CI/CD for.
The Maintainer or Owner role for the project ??
Available runners to run your jobs. If you don't have one, follow this document to register.
Let's get started!
To configure code quality checks, we need 2 stages, first set up dependencies for the repository, then run commands to check format, lint, unit test, and check build.
To use GitLab CI/CD, you need a .gitlab-ci.yml file at the root of your repository. For easy maintenance, we will create 2 separate files for setup-dependencies and quality-check stages in the .gitlab folder, then include them in the root file.
Step 1. Create a .gitlab-ci.yml file
image:
name: node:16
pull_policy: if-not-present
stages:
- setup-dependencies
- quality-check
include:
- "/.gitlab/setup-dependencies.gitlab-ci.yml"
- "/.gitlab/quality-check.gitlab-ci.yml"
Step 2. Define setup-dependencies stage
cache:
- key: &global_cache_node_mods
files:
- yarn.lock
prefix: $CI_PROJECT_NAME
paths:
- node_modules/
policy: pull
setup-node-modules:
stage: setup-dependencies
cache:
- key: ${CI_JOB_NAME} # store yarn cache for all branches
paths:
- .yarn
when: on_success
policy: pull-push
- key:
files:
- yarn.lock
prefix: $CI_PROJECT_NAME
paths:
- node_modules/
policy: pull-push
script:
- yarn install --prefer-offline --frozen-lockfile --cache-folder .yarn
tags:
- docker
only:
- merge_requests
We don't need to install node modules every time, we can leverage cache data. Caching allows you to store dependencies, build artifacts, and other files that don't change frequently. By retrieving these cached items instead of downloading or rebuilding them from scratch, subsequent pipeline runs can be significantly faster and reduce overall build times. This optimization not only reduces resource consumption but also contributes to a more sustainable and cost-effective development process.
Step 3. Define quality-check stage
.quality-check:
variables:
GIT_DEPTH: 0
before_script:
- NX_HEAD=$CI_COMMIT_SHA
- NX_BASE=${CI_MERGE_REQUEST_DIFF_BASE_SHA:-$CI_COMMIT_BEFORE_SHA}
- rm -rf ./node_modules/.cache/nx
only:
- merge_requests
tags:
- docker
artifacts:
paths:
- node_modules/.cache/nx
lint:
stage: quality-check
extends:
- .quality-check
script:
- npx nx affected --base=$NX_BASE --head=$NX_HEAD -t lint --parallel=3
format:
stage: quality-check
extends:
- .quality-check
script:
- npx nx format:check --base=$NX_BASE --head=$NX_HEAD
build:prod:
stage: quality-check
extends:
- .quality-check
script:
- npx nx affected --base=$NX_BASE --head=$NX_HEAD -t build --parallel=3
test:
stage: quality-check
extends:
- .quality-check
script:
- npx nx affected --base=$NX_BASE --head=$NX_HEAD -t test --parallel=3
By leveraging Nx commands with affected projects, these jobs optimize the code quality checks by only running tasks on projects affected by the changes between the base and head commits, improving efficiency and reducing execution time.
Step 4. Test the pipeline
That's great! We're almost finished setting up our pipeline! It's time to see it in action. All you need to do is commit and push these changes to a new branch. Then create a merge request for it. Our pipeline will be automatically triggered, like the image below.
You can click on the pipeline ID to see its detailed progress.
Conclusion
Thank you for joining us on this exploration of GitLab CI/CD for React Nx repositories. We hope you found this guide informative and actionable, empowering you to elevate your development processes and deliver exceptional software with confidence. See you in Part 2! 🚀
Komentar