Analyse source code with SonarQube, Docker & React/Angular

Glimpse of SonarQube

SonarQube is an open source platform for static code analysis that empowers developers to write cleaner and safer code. As a result of the full scan, it generates a detailed report of bugs, code smells, vulnerabilities and code duplications.

Code-Scan Report

Let’s analyse an application built using VS code

I recently scanned an application that was written using react and the editor used was VS Code (macOS).

Scanning is a four step process:

1. Set up scan within the application codebase
2. Set up sonarqube in a Docker Container
3. Configure settings within the sonarqube dashboard
4. Start the scan and view the generated report on the web portal

Set up scan within the application codebase

brew install sonar-scanner

Now, go to your project source folder in VS code and create a new file

‘sonar-project.properties’

sonar.projectKey= <add name>
sonar.sources=.
sonar.host.url=http://localhost:9000
sonar.login= <add token>
sonar.exclusions=.github/**, .vscode/**, android/**, assets/**, build/**, ios/**, node_modules/**, scripts/**
sonar.projectName= <add project name>
sonar.projectVersion=1.0
sonar.login=admin
sonar.password=admin

Keep the file above as is for now - we’ll revisit it and make appropriate changes at a later stage.

Setup sonarqube in a docker container

Pull the latest image and start the server,

docker pull sonarqube:latest
docker run -d --name sonarqube \ -p 9000:9000 sonarqube:latest

SonarQube in a docker container

Configure settings within the sonarqube dashboard

1. Launch sonarqube dashboard locally - http://localhost:9000
2. Login to the dashboard using admin credentials - username: admin & password: admin
3. Set up a new project on the portal and generate a token, save it for future references

Create a project

Generate a token

Start the scan

Remember, the file we created in the first step. Let’s revisit that file and make necessary changes to it as below and save the same,

sonar.projectKey= SampleProject
sonar.sources=.
sonar.host.url=http://localhost:9000
sonar.login= Copy the Token from above step and Paste it here
sonar.exclusions=.github/**, .vscode/**, android/**, assets/**, build/**, ios/**, node_modules/**, scripts/**
sonar.projectName= SampleProject
sonar.projectVersion=1.0
sonar.login=admin
sonar.password=admin

Execute the scan by running the command below in VS code terminal,

sonar-scanner

Access the final report using the sonarqube dashboard,

Final Report

Github: https://github.com/AnuragChughGithub