SonarQube setup and execution in React Native

Sanjana Human In Tech
3 min readJan 13, 2021

SonarQube is an open-source platform developed by SonarSource for continuous inspection of code quality. SonarQube is a tool to perform static code analysis which provides a detailed report for,

  • bugs
  • code smells
  • vulnerabilities
  • code duplications
  • unit-testing coverage

SonarQube setup requires two softwares
1. sonar-scanner-cli
2. SonarQube server
To download SonarScanner CLI software visit below link

To download SonarQube server software visit below link.
If you need to download specific version of SonarQube server go to under historical downloads, select community-edition and select Sonarqube server version.

After installation, set path of sonar-scanner-cli and SonarQube server under System Variables as per below reference.

C:\Users\SonarScanner\Documents\SonarScanner\sonarqube-7.8\bin
C:\Users\Documents\SonarScanner\sonar-scanner-cli-4.4.0.2170-windows\sonar-scanner-4.4.0.2170-windows\bin
System Variables
System Variables

Start Sonarqube server by selecting StartSonar.bat file.

SonarQube server
Sonarqube Server

Once SonarQube server starts in SonarQube window, the message is shown as SonarQube server up and running.

Now go to React native project, create sonar-project.properties file in project root directory. Below is file format to save.


sonar.java.binaries=.
sonar.projectKey=”TestProject”sonar.projectName=”TestProject”sonar.sourceEncoding=UTF-8sonar.sources=.sonar.exclusions=**/node_modules/**,**/ios/**,**/android/**,**/*.spec.t

After the SonarQube server is up and running, open google chrome and type localhost:9000 URL.

It will open below screen to login. Use username and password as admin.

In case of sonarqube server hosted differently then mention the respective URL in sonar-project.properties file.

sonarQube login
Login window for SonarQube
ssonarQube server
SonarQube

After login, go to user settings under Projects tab, create a new project if it is not created already. If you have already created a project then it will appear on dashboard.

Assign a project key and project name which should be similar to one defined in sonar-project.properties file, then click on the setup button.

Now it will ask to provide a token, click on the Generate button then click on Analyze button.
It will ask to select OS and langauge to run SonarQube.

sonar-scanner
sonar-scanner.bat -D”sonar.projectKey=TestProject” -D”sonar.sources=.” -D”sonar.host.url=http://localhost:9000" -D”sonar.login=5ad511ba844a263017c967bf993eff318e7fe37f”

Copy above command to execute a scanner from your computer.
Execute this command in the project directory and it will show the analyzed report. It will take some time to analyze and execute files.

Now, you can browse to http://localhost:9000, and you will be looking at the SonarQube Web GUI.

sonar-scanner result
sonar-scanner result

On this page result of sonar scanner will be shown. If you want to see unit testing coverage then click on that file. The statements which are in red indicates that they are not covered in unit testing coverage and green ones indicates that they are covered.

It will also indicate how much percentage of code is covered in unit testing.

Thank you for reading this blog.
If you have any questions feel free to ask me in comments.

--

--

Sanjana Human In Tech

A React Native front-end enthusiast and dedicated development engineer, eager to expand knowledge on development techniques and collaborate with others.