How to add SonarQube to a Vue Project.

How to add SonarQube to a Vue Project.

Measuring Code Quality for a Vue project with Jest and SonarQube.

·

4 min read

The Gist of it all.

In this article, we will learn about adding SonarQube, to a Vue project which uses Jest for testing. I'm assuming, since you are here already, you know what Vue, Jest and SonarQube are, and you are only looking to understand how to put the three together to measure code quality.

Prerequisites and tools you need.

Obviously you need to know about Vue, Jest and SonarQube. And atleast some knowledge of dabbling into config files for Vue and Jest(or you can always google it). You also need to have Docker installed on your machine. That's all.

Step 1, here we go!

We first need to install a few packages, namely

  1. express
  2. jest(if you haven't already)
  3. sonarqube-scanner

Now assuming you already know what Express and Jest are, I'll give a one-liner about the third package. The SonarQube-scanner makes it easier to perform sonar analysis on a Javascript codebase. So we run the npm command for installation below: npm install — save express jest sonarqube-scanner

Step 2, setting up the docks!

In this step, we will setup docker(which you must have installed by now). For this we need to create a docker-compose file by the name "docker-compose.sonar.yml" at the root directory.That extension "yml" stands for YAML which is a data serialization language that is often used for writing configuration files. Indentation of blocks is important in YAML, the structure of this file as far as indentation of blocks are concerned, should be same as the snippet below.

version: '3' 
services: 
  sonarqube: 
    container_name: sonarqube 
    image: sonarqube:latest 
    ports: 
    - "9000:9000" 
    - "9092:9092"

Now fire up docker on your machine from the GUI. Once it starts up, navigate to the project root directory on your terminal and run the command below:

docker-compose -f docker-compose.sonar.yml up -d

Now run the SonarQube server locally using the url http://localhost:9000/sessions/new and add default credentials when asked login: admin and password: admin. Our work here is done, on to the final step.

The final step, Setting up the scanner for coverage!

In this step we will configure Jest to measure coverage, and the sonarqube-scanner to analyse our code. Go on and add a file sonarqube-scanner.js at the root directory. And add the below config into the file(if you want you can change some of the config based on your needs too!)

const scanner =require('sonarqube-scanner'); 
scanner({ 
    options :{    
          "sonar.exclusions": "**/*.test.tsx", 
          "sonar.tests": "./src", 
          "sonar.test.inclusions": "**/*.test.tsx,**/*.test.ts", 
          "sonar.typescript.lcov.reportPaths":  "coverage/lcov.info", 
          "sonar.testExecutionReportPaths":  "coverage/test-report.xml" 
         },     
  serverUrl: "http://localhost:9000", 
  login:"admin", 
  password:"admin", 
  options: { 
    "sonar.sources": "./src" 
    }, 
}, 
() => process.exit() 
);

NOTE: If for some reason, you get an error later while running the scan about the file "test-report.xml" not found, just remove the last property from the options object in the above snippet and things will work fine.

Now come to the package.json file, and add the following snippet inside the "scripts".

"sonar":  "node sonarqube-scanner.js", 
 "test":  "jest --coverage",

We have set up jest to collect coverage and a script to run the scanner. Now we will add reporting paths, add the snippet below to your "package.json":

"jestSonar": { 
    "reportPath": "coverage", 
    "reportFile": "test-reporter.xml", 
    "indent": 4 
  }

Now finally, go to the terminal, and from the root run the command npm run test. When the execution is complete, run another command npm run sonar. If this step goes well, great! but you face something like the error below:

Not authorized. Analyzing this project requires to be authenticated. Please provide the values of the properties sonar.login and sonar.password.Not authorized. Analyzing this project requires to be authenticated. Please provide the values of the properties sonar.login and sonar.password.

We need one additional step. Go to the URL http://localhost:9000/sessions/new, login with default credentials. Go to Administration> Security and disable Force Authentication. Remember, this is a quick fix for running Sonar Locally. Now run the command npm run sonar again, and it should work. Let Sonar do it's thing, and head over to the webpage you just logged into above.

You should be able to see your project, click on it and Done! We have the SonarQube report for your Vue-Jest Code! So that was the whole process to add SonarQube analysis locally, to your Vue-Jest Project. If you hit a snag somewhere, feel free to ask in the comments, and as always, Googling is key! Hope this article was of help. Until Next time!