Skip to Content
Author's profile photo Enric Castella Gonzalez

SonarQube our ally to improve the webapp projects

Hi all,

Today I would like to comment on an indispensable (free)software in the continuous delivery of our projects.

The official definition is:

SonarQube provides the capability to not only show health of an application but also to highlight issues newly introduced. With a Quality Gate in place, you can fix the leak and therefore improve code quality systematically.

For us, it allows us to detect possible bugs of our project and manage the corrections. It allows us to improve the quality of the presented software.

So, let’s go to install this fabulous software on your local PC (this guide is made for windows, although it is available in different platforms).

 

Prerequisites


(based on: http://(based on: http://www.tecnohobby.net/ppal/index.php/programacion/java/28-instalar-sonarqube-con-postgresql )

1.- Install local data base: SonarQube needs a local database, in our case we will use postgres. Go to https://www.postgresql.org/ and download and install postgres.

When the installation has completed, install your local database storage on C:\pgsqldb, to do this, user this command “initdb -D C:\pgsqldb“.

2.- Assing local windows path for postgres commands and then start your local database server with command: “postgres -D C:\pgsqldb > C:\pgsqldb\logs\logfile.log 2>&1 &

(NOTE): you can user the following .bat file to do second stept automatically:

@ECHO ON
REM The script sets environment variables helpful for PostgreSQL
@SET PATH="C:\pgsql\bin";%PATH%
@SET PGDATA=C:\pgsqldb
@SET PGDATABASE=postgres
@SET PGUSER=postgres
@SET PGPORT=5432
@SET PGLOCALEDIR=C:\pgsqldb\share\locale
REM "C:\pgsql\bin\initdb"
"C:\pgsql\bin\pg_ctl" -D "C:\pgsqldb" -l logfile start
ECHO "Click enter to stop"
pause
"C:\pgsql\bin\pg_ctl" -D "C:\pgsqldb" stop -m fast
3. Prepare Postgres using pgAdmin on Windows > PostgresSQL x.x > pgAdmin X.
In console, we have to create a new database server, click on Server > Create > Server…
In the options add the followin parameters:
  • General: Add name (free text)
  • Connections: add server address, port, database name, user and password
Save this options.
– It is important don’t use the admin user to connect the sonarQube to the database. So let’s go to create a new user on “Servers > your server > Login/Groups Roles”. Then right click on “Login/Groups Roles” and create > Login/Groups Roles.
Add name:
Add password on definition tab:
Modify privileges as follow:
– After create server, you need to create a new database, this is a easy stept. Goes to “Servers > your server > Databases” and click on right button and then “create database”. The name of database is “sonar” and the owner is “sonar” user (the user created before).
And then add definiton:
Install SonarQube and start server

4.- Download sonarQube files from https://www.sonarqube.org/downloads/
After downloading the file, Unzip this file in the folder that you think appropriate. In my case (C:/).
5.- We will modify the sonarQube configuration file to add the connection of the own database. Go to file “C:\sonarqube\conf\sonar.properties” and add the following lines:
#PostgreSQL configuration
sonar.jdbc.username=sonar
sonar.jdbc.password=sonar
sonar.jdbc.url=jdbc:postgresql://localhost/sonar
6.- Start the SonarQube server in folder C:\sonarqube\bin\windows-x86-64 (depending on your operating system) and executing the file “StartSonar.bat“.
Let’s use SonarQube

7.- In your browser goes to http://localhost:9000/ 
Then, on the right side we will “Log in”. And log in as administrator, by default:
  • Login: admin
  • Password: admin

8.- Install new plugins. My recommendation is to install “Sonarjs“, “CSS/SCSS/Less” and “Sonarxml“.

Todo this, goes to “Administration > System > Update Center” and then search plugin and push on “install”. After install all plugins you must restart aplication.

 

Prepare run the analysis


9.- Before we can perform the analysis, we need to install the sonarQube analysis client. We will download the client program at  https://docs.sonarqube.org/display/SONARQUBE45/Installing+and+Configuring+SonarQube+Runner

Then unzip the files, in my case in “C:\sonar-runner” and add path variable on to windows.

 

10.- Add file configuration called  “sonar-project.properties” at the root of the project “\WebContent” with the following content (sonar.projectName and sonar.projectKey text can be customized):

sonar.projectKey=org.sonarqube:javascript-lcov-sq-scanner
sonar.projectName=your_name_project
sonar.projectVersion=1.0

sonar.sources=.
sonar.sourceEncoding=UTF-8
sonar.exclusions=node_modules/**

# To import the LCOV report
sonar.javascript.lcov.reportPath=report/lcov.dat

You can user “sonar.exclusions” to discard files or folders.

 

Execute analisis and get results


11.- In the system symbol, you can execute the command “sonar-runner”. At the end of the analysis we will have the following result

12.- Then in http://localhost:9000/projects you can analyze the results of the analysis:

For more information:

https://docs.sonarqube.org/display/SONAR/User+Guide

 

In next post I will add examples of the use of this tool in our projects ui5

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Lars Breddemann
      Lars Breddemann

      Maybe I missed a critical step here, but where is the connection to any SAP technology let alone SAPUI5?Right now this blog is mostly a copy of the pages you linked to.

      Right now this blog is mostly a copy of the pages you linked to. I think you should rather remove these copied setup instructions and provide examples and experiences how you use this tool with your SAPUI5 development.

       

      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez
      Blog Post Author

      Thank you for your comments, These helps me to improve the level of my posts. Although I do not share your opinion that this guide is a copy. I have reviewed and simplified installation.

      Rome was not built in a day, so I have been working for days on the second part of this blog, including a real cases on ui5 used in my projects.

      I have modified the part that specified ui5 because this tool is used in devops as universal for projects js, xml, css.

      Best regards.

      Author's profile photo Lars Breddemann
      Lars Breddemann

      Alright, then let's see what you have in store for us!

      Author's profile photo jorge san martin
      jorge san martin

      Hi Enric, thanks for this post. Looking forward on see how to apply this on UI5 developments!