Setup Sonarqube With Angular Project in 6 Minutes

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.

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 config 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! 👏👏👏

** I counted the remaining minutes as a buffer time.

If you are not sure how to install and run sonarqube…

1. I can help you for sure. The below steps will work for you!
2. Download JDK 11 (Minimum Requirement to run SonarQube) from the official oracle website
3. Download SonarQube, community edition, from this link.
4. Unzip SonarQube in C drive (You can choose any directory), let's say C:\sonarqube Move to unzipped SonarQube \bin\windows-x86–64 folder lets say, C:\sonarqube\bin\windows-x86–64, after that find file RunSonarServer.bat, open it and change the java-11 path as per your system
5. If SonarServer still gives you an error on “SonarQube requires Java 11 to start” after executing RunSonarServer.bat, even the Java-11 path is set up correctly, you need to find the wrapper.conf in the conf folder of SonarQube. Then change wrapper.java.command into the location where your JDK 11 is. e.g. wrapper.java.command=C:\Program Files\Java\jdk-11.0.8\bin\java
6. Now open terminal, change the directory to unzipped SonarQube folder\bin\windows-x86–64, let’s say, C:\sonarqube\bin\windows-x86–64 and execute RunSonarServer.bat file.
7. Once it has started, open the page in a browser http://localhost:9000
8. Login using username=admin and password=admin
9. After login, find the button Create New Project and click on it.
10. Type project key and display name; let’s say, demo-app, and click on Continue.
11. On the next screen generate a token by typing any string in the field and clicking on the generate button.
12. Once a token is generated, copy and keep that token handy.
13. Click continue, and select Java as the main language and Maven as a builder of the project.
14. Next, you will see the command to run an analysis on the project.
15. Open a command prompt, go to the root folder of your project demo-app and execute that command.
16. Once SonarQube has analyzed your project the browser page will be refreshed automatically to show you the report of analysis.

I saved you a lot of time, isn’t it? — Please comment with your thoughts! Your support will be appreciated.

Get my stories in your feeds by subscribing to me, or become a vocal+ member to read all stories of thousands of other writers, participate in all challenges and get a payout with low fees and less payout threshold on Vocal Media.

Originally Published on Setup Sonarqube With Angular Project in 5 Minutes, also republished on Medium by Author Rakshit Shah (me).