SonarQube Pipeline for Node, Angular, TypeScript, or React

While SonarQube setup for .NET projects is readily available, finding a comprehensive example with full code for Node, Angular, TypeScript, or React projects can be a challenging quest. Today, I'm excited to bridge this gap by sharing a straightforward guide that includes the exact code you need. In this article, we'll demystify the often-overlooked but crucial 'scannerMode: CLI' configuration.

Step 1: Triggering Builds Efficiently

In this section, we optimize our builds by setting a daily trigger at 8 PM for the 'develop' branch. This ensures that SonarQube analysis is regularly performed, enhancing the continuous inspection of our codebase.

trigger: none

schedules:
- cron: "0 0 20 * *"
  displayName: Daily 8PM Build
  branches:
    include:
    - develop        

Step 2: Defining Pipeline Variables and Demands

Here, we define variables to identify pull requests and the development branch. Additionally, we set up the Azure Pipelines pool with specific demands, including the CodeAnalysis capability and Java, prerequisites for effective SonarQube analysis.

variables:
  isPullRequest: $[eq(variables['Build.Reason'], 'PullRequest')]
  isDevelopment: $[eq(variables['Build.SourceBranch'], 'refs/heads/development')]

pool:
  name: Azure Pipelines
  demands:
  - CodeAnalysis
  - java        

Step 3: Integrating SonarQube into the Pipeline

This section is the heart of our pipeline. We initiate the SonarQube analysis by preparing the environment, executing the analysis, and publishing the results back to SonarQube. The inclusion of npm commands ensures compatibility with Node.js, Angular, TypeScript, or React projects.

In this crucial step, we utilize the SonarQubePrepare@5 task to seamlessly integrate SonarQube into our Azure Pipelines. The correct configuration of the scannerMode parameter holds significant importance, we need to use scannerMode: 'CLI'

stages:
  - stage: SonarQube_Analysis
    jobs:
      - job: sonarqube_analysis
        pool:
          vmImage: 'windows-latest'

        steps:
          - script: npm i

          - script: npm run build

          - task: SonarQubePrepare@5
            inputs:
              SonarQube: 'SonarQube' # Use the correct service connection name for your SonarQube server
              scannerMode: 'CLI'  # Crucial for Node, Angular, TypeScript, or React projects
              configFile: sonar-project.properties

          - task: SonarQubeAnalyze@5
            inputs:
              jdkVersion: 'JAVA_HOME_11_X64'

          - task: SonarQubePublish@5
            inputs:
              pollingTimeoutSec: '300'

          - script: npm test        

Step 4: Configuring the Branch for SonarQube Analysis

Now, let's address a critical aspect of SonarQube configuration - determining the branch for analysis. To analyze any branch other than 'develop', it's imperative to set up the desired branch as the default branch in Azure DevOps. Here's how:

Configuring Default Branch in Azure DevOps: A Necessary Step

1. Navigate to your Azure DevOps project.
2. Go to 'Project Settings' and select 'Repositories'.
3. Under 'Repository Settings', find the 'Branches' tab.
4. Locate the branch you want to set as the default (other than 'develop').
5. Click on the three dots (...) next to the branch and choose 'Set as default branch'.

By setting up the desired branch as the default, you ensure that SonarQube analyzes the correct branch during each pipeline run.

Embrace this powerful combination to enhance the robustness of your Node, Angular, TypeScript, or React projects. Happy coding!