How To Setup Sonarqube With Angular Application (5 Minute Guide)

If you are trying to set up Sonarqube for your Angular codebase for code coverage analysis. You have to follow up on the below steps. Learn how to setup sonarqube with angular project quickly.

In this article, you will learn how to setup sonarqube for your Angular application easily.

Step 1: Install Sonarqube

For installing Sonarqube first download the Sonarqube from the official website

Step 2: Configure Sonarqube with your Angular Project

Run the following command

npm install sonar-scanner --save-dev

Step 3: Configure the SonarQube properties file on the Angular project

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

sonar.host.url=http://localhost:9000
sonar.login=admin
sonar.password=admin
sonar.projectKey=demo-app
sonar.projectName=demo-app
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

Now you want to run code coverage on the Angular project, so Karma will do the same work for you.

Step 4: Integrate Angular project’s Karma code coverage with Sonarqube

Add a script called sonar to your package.json, You can give any key name!

"scripts": {
    "sonar": "sonar-scanner"
}

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

npm run sonar

Step 5: Configure the project from the SonarQube server and start an analysis

Once your sonar is started using the above command, hit this URL in your browser:

http://localhost:9000/

Enter your credentials (admin/admin in our case) and configure your project.

Give them a couple of minutes to index all the files on SonarQube.

Bingo You did it in 4 Minutes 51 seconds! Congrats!

Cover Image Credits: Prepared by Author in MS PowerPoint

Here are the explanation of all key values explained in Step 3.

• sonar.host.url=http://localhost:9000: Specifies the URL of the SonarQube server.
• sonar.login=admin: Specifies the login username for connecting to the SonarQube server.
• sonar.password=admin: Specifies the login password for connecting to the SonarQube server.
• sonar.projectKey=demo-app: Specifies the project key for identifying the project in SonarQube.
• sonar.projectName=demo-app: Specifies the project name in SonarQube.
• sonar.projectVersion=1.0: Specifies the version of the project.
• sonar.sourceEncoding=UTF-8: Specifies the encoding for the source files.
• sonar.sources=src: Specifies the source directory of the project.
• sonar.exclusions=**/node_modules/**: Specifies the directories to be excluded from analysis (e.g., node_modules).
• sonar.tests=src: Specifies the directory containing the test files.
• sonar.test.inclusions=**/*.spec.ts: Specifies the patterns for including test files.
• sonar.typescript.lcov.reportPaths=coverage/lcov.info: Specifies the path to the TypeScript coverage report file.

Usage of Sonarqube in Angular Application.

SonarQube is a tool used to analyze the quality of code in an Angular application. It helps developers by providing insights into potential bugs, code smells, and security vulnerabilities in their code. By running the SonarQube analysis, developers can ensure that their Angular application meets the highest coding standards and best practices. SonarQube also provides valuable metrics and visualizations, making it easier to understand and improve the overall code quality. Overall, SonarQube is a valuable tool for maintaining the health and quality of an Angular application’s codebase.

You may also like,

• Angular Basics: Read Data From External File On Your Prod Build
• Generate QR Code in Angular 10 (Easy)
• How To Refresh a Component Without Refreshing Whole Component