SonarQube For Ionic - 3/Angular App

  

 

SonarQube For Ionic - 3/Angular App

Prerequisite: 

>>>>> node -v 

v14.20.0 

>>>>> npm -v 

6.14.17 

>>>>> ionic -v 

5.4.16 

>>>>> cordova -v 

11.1.0 

 

 

Step 1: Install Local sonarQube server setup - sonarqube-7.9.6 

 

For installing Sonarqube first download the Sonarqube from https://www.sonarqube.org/downloads/. 

 

 

• Download SonarQube from the official site. After successful download we will get a SonarQube Zip folder. Unzip that folder in C:/ drive. This folder is supported by all kinds of OS level machines like Windows, Mac, and Linux. In my case I am using a Windows OS machine. 

• Once the Unzip process is completed, please open the wrapper class file. This file is available in the below path, SonarQube Unzip folder---> Conf --> Wrapper. In that wrapper class set the JDK (11.0) path of your system. 

• Start the sonar window batch file. Follow the below path, to start the sonar SonarQube Unzip folder ---> bin ---> Select your machine OS (In my case windows) -->Start Sonar 

• Once you started the Sonar it takes 2 to 3 mins to be ready (Server up). You may see the status of the Sonar. Once the server is up you may see the SonarQube is up message in cmd. 

• Once the Sonar is up go to the Browser and open the default local host with the port 9000 (localhost:9000). If everything is done successfully you should analyze your project code and generate the quality report as well. 

•  

• 
  

• 

  
  

  
  

   

  Step 2 - Configure Sonar with Angular 

    

  run - npm install sonar-scanner --save-dev 

    

  Create a file called sonar-project.properties in your Angular root directory and add below attributes 

    

  sonar.host.url=http://localhost:9000 

  sonar.login=admin 

  sonar.password=admin 

  sonar.projectKey=myapp

  sonar.projectName=myapp

  sonar.projectVersion=1.0 

  sonar.sourceEncoding=UTF-8 

  sonar.sources=src 

  sonar.exclusions=**/node_modules/** 

  sonar.tests=src 

  sonar.test.inclusions=**/*.spec.ts 

  sonar.typescript.lcov.reportPaths=coverage/lcov.info 

  Step 3 - Integrate Karma code coverage with Sonarqube 

    

  Add a script called sonar to your package.json 

    

  "scripts": { 

      "sonar": "sonar-scanner" 

  } 

  Finally, run the below command to integrate the Karma coverage with the Sonar server, 

    

  npm run sonar 

  And you will the result directly on the Sonar server by navigating to http://localhost:9000/projects 

• 
  

• 
  

•