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.