SonarQube is an Open Source Software for static code scanning to discover potential vulnerabilities, bugs and code smells.
- Have Docker up and running on your machine. For more information on Docker platform, you may want to read this
Clone this repository or download the zip file of the project alternatively. This is a very basic demo React application.
Assuming that Docker is already installed on your machine, we need to run SonarQube server inside the Docker container. To run SonarQube server, run the below command on the terminal to start.
$ docker run -d --name SonarQube -p 9000:9000 -p 9092:9092 sonarqube
To verify if the container started without errors, run the commands:
List running docker containers $ docker ps#
List all docker containers including the stopped one $ docker ps
#Go inside the running docker
$ docker exec
-it SonarQube-server bash# List all plugins, JS plugin should be inside plugins/ directory
extensions/plugins/# Exit the container
To view the Admin UI for the SonarQube-server, hit this URL on the browser http://localhost:9000
Now we have the JS application code on our machine and SonarQube server is up and running. We need SonarQube scanner, an analyzer to perform static code scans on code base. At the end it sends the analysis to SonarQube server. You can download the SonarQube-Scanner for the appropriate OS from here.
SonarQube Scanner needs a way to communicate with SonarQube-server for publishing and processing the analyzed results. After you have downloaded scanner, provide the information of SonarQube server to this scanner to establish this communication channel.
sonar-scanner-220.127.116.113 sonar-scanner-18.104.22.1683 $ vi
Add the address of the SonarQube server. Below is the default address but you want want to change this if server is running on a different host/port.
For SonarQube-scanner/ analyzer to analyze a project, we need to perform the following configuration steps.
- Add the sonar-scanner binary to PATH. This would allow SonarQube-Scanner binary to run from any location. To do this run this command:
Note: Replace the path <$HOME/Downloads/> to the location on your machine where sonar-scanner is installed
- Add a configuration file inside the React project root directory. This is to ensure that SonarQube-Scanner can find this config file and start analyzing.
# Go inside the React project directory $ cdreact-app-sonarqube
It has the following content in sonar-project.properties file.
sonar.projectKey=sonar-reactapp sonar.projectName=sonar-reactapp sonar.projectVersion=1.0 sonar.sources=src sonar.sourceEncoding=UTF-8
Now we are all set to scan the JS application codebase. Start scanning the code base using the below command from within the project root directory.
$ cdreact-app-sonarqube react-app-sonarqube
You should be able to see the log trace while scanner is analyzing each file. Ensure that you see “EXECUTION SUCCESS” at the end of scanning. The logs should look like below
Verify the vulnerabilities on the Admin UI http://localhost:9000
Below is the screen shot from the code scan. This project has no vulnerabilities but you should be able to view here if your project has any.