SonarQube Integration for Frontend Projects

As the business of the company grows, so is the codebase and it becomes very difficult to maintain quality of the project. At this point of time we need some quality assurance tool that collects and analyzes source code, and provides reports for the code quality of our project. I needed a static and dynamic analysis tools that can measure code quality continually over time and can help reduce technical debt. Finally I stumbled upon SonarQube which is an open-source platform developed by SonarSource for continuous inspection of code quality. Sonar does static code analysis and provides a detailed report of bugs, code smells, vulnerabilities, code duplications. I integrated it in my projects and felt that this can be shared with the community.

Setting up Docker Hub

Download Docker Hub from here depending on the OS of your system.

Download SonarQube image on Docker

Download the sonarqube image on docker using below command:

docker run -d — name sonarqube -p 9000:9000 -p 9092:9092 sonarqube

Starting SonarQube on docker

docker start sonarqube

Sonar configuration

Install sonarqube-scanner as a dev-dependencies in your project.

npm install -D sonarqube-scanner

Create sonar configuration file

Create sonarConfig.js file at root of your project and use the below code

const scanner = require("sonarqube-scanner");
scanner(
  {
    serverUrl: "http://localhost:9000", 
    options: {
      "sonar.login": "your email", 
      "sonar.password": "your password",
      "sonar.projectKey": "your-project-key",
      "sonar.projectVersion": "1.1.0",
      "sonar.sources": "src", //source code for sonar coverage
      "sonar.exclusions": "**/exclusions.scss", 
      "sonar.javascript.lcov.reportPaths": "coverage/lcov.info" 
    }
  },
  () => {
    // A must callback
  }
);

Running Sonar

Run the following command to run sonar on your project

node sonarConfig.js

Code Quality Reports

Once you run sonar and the execution is successful, you will get info like

INFO: EXECUTION SUCCESS

You can check the result at http://localhost:9000/dashboard?id=your-project-key

A folder .scannerwork will be created at your root of your project where you can view the detail reports generated by sonar.