Code Analysis with Java and AngularJS Project via SonarQube

Many Java based projects are shifting away from more traditional Java based frontend technologies, such as JSP, JSF, and GWT. Today, they are moving to Single Page Application technologies like AngularJS. This leaves Java as the language for the backend. As a result, you will likely experience a project using at least a JavaScript based frontend technology and a backend technology like Java. Another big trend these days is improving the software development lifecycle by implementing Continuous Integration, Continuous Deployment, and code analysis as a part of your project or company’s DevOps strategy. This tutorial will show you how to tie a project built using Java and AngularJS with Jenkins, BitBucket and SonarQube.

If you are using Maven and the concept of microservices, you likely are following a standard directory structure used for many Java projects. Also, if you have a web application, you are likely used to using a webapp folder for your presentation code, perhaps written with JSPs or JSFs. With that assumption, if you were switching to a JavaScript based frontend framework, like AngularJS, then you may have also put your JavaScript files in this very same webapp folder. Lets say we have two services and one project for the web application, then you may have a Git repo that looks like the following:

The dvo-web-ui is the web application project. You likely wouldn’t have any Java code mixed in this project, but you may have some Selenium tests (though maybe not the best testing tool for AngularJS). The Java code would be in the two microservices, called dvo-claim-service and dvo-product-service.

If you don’t already have Tomcat installed, you can download the latest here:

• https://tomcat.apache.org or, more specifically I am using Tomcat 9.0.5

Now, find your downloaded file, apache-tomcat-9.0.5.zip, and then unzip the file.  If using a Mac/Unix build, you will likely need to make the scripts in bin executable by doing the following:

[code language=”bash”]
$ chmod 755 bin/*.sh
$ ls -ltr bin/*.sh
-rwxr-xr-x@ 1 kcoy staff 1908 Feb 6 21:43 bin/version.sh
-rwxr-xr-x@ 1 kcoy staff 5483 Feb 6 21:43 bin/tool-wrapper.sh
-rwxr-xr-x@ 1 kcoy staff 1904 Feb 6 21:43 bin/startup.sh
-rwxr-xr-x@ 1 kcoy staff 1902 Feb 6 21:43 bin/shutdown.sh
-rwxr-xr-x@ 1 kcoy staff 3680 Feb 6 21:43 bin/setclasspath.sh
-rwxr-xr-x@ 1 kcoy staff 1965 Feb 6 21:43 bin/digest.sh
-rwxr-xr-x@ 1 kcoy staff 8509 Feb 6 21:43 bin/daemon.sh
-rwxr-xr-x@ 1 kcoy staff 1922 Feb 6 21:43 bin/configtest.sh
-rwxr-xr-x@ 1 kcoy staff 1997 Feb 6 21:43 bin/ciphers.sh
-rwxr-xr-x@ 1 kcoy staff 23315 Feb 6 21:43 bin/catalina.sh
[/code]

Next, you will need to download the Jenkins WAR:

• https://jenkins.io/download/

I would go for the Long-Term Support (LTS) build, which is currently, 2.89.4

•   Generic Java package (.war) 

Take jenkins.war and move it your webapps folder in the Tomcat directory you just unzipped.

[code language=”bash”]
$ ./bin/startup.sh
Using CATALINA_BASE: /Applications/apache-tomcat-9.0.5
Using CATALINA_HOME: /Applications/apache-tomcat-9.0.5
Using CATALINA_TMPDIR: /Applications/apache-tomcat-9.0.5/temp
Using JRE_HOME: /Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home
Using CLASSPATH: /Applications/apache-tomcat-9.0.5/bin/bootstrap.jar:/Applications/apache-tomcat-9.0.5/bin/tomcat-juli.jar
Tomcat started.
[/code]

You should be able to now go to the following link (you’ll need to follow the setup instructions if this is your first time launching Jenkins):

• http://localhost:8080/jenkins

Afterwards, you’ll need to install the SonarQube plugin by going to Manage Jenkins ? Manage Plugins ? Available tab ? Filter “SonarQube” ? Select SonarQube Scanner ? Install without restart ? Check Restart Jenkins.

I like to use BitBucket for source control as it comes with lots of nice features, such as a wiki, managers users/teams and is FREE for five or less users, If you are using BitBucket, you’ll need to install the BitBucket plugin, as well, by going to Manage Jenkins ? Manage Plugins ? Available tab ? Filter “BitBucket” ? Select BitBucket ? Install without restart ? Check Restart Jenkins.

Also, in BitBucket, you’ll need to setup a WebHook, which can be used to trigger a Jenkins build (with the BitBucket plugin) every time a code push is made to your Git repository hosted by BitBucket. As an aside, BitBucket is hosted on the cloud and if your Tomcat is being being hosted locally on your computer, then you’ll need to expose your localhost to the outside world. An easy way to do this is with ngrok. See these instructions. Here is a screenshot showing how to configure the webhook under Settings in your BitBucket project.

Now you will need to make sure you have the SonarQube Scanner configured in Jenkins and have your project set up to use it. You’ll need to make sure you go to Jenkins ? Manage Jenkins ? Global Tool Configuration to configure a SonarQube Scanner to use and go to Jenkins ? Manage Jenkins ? Configure System to point to your SonarQube instance you downloaded previously. Make sure you have your SonarQube instance running:

[code language=”bash”]
sonarqube-5.6.5 kcoy$ ./bin/macosx-universal-64/sonar.sh start
[/code]

Here are some screenshots showing how to configure SonarQube in Jenkins and how to configure a project to use your SonarQube Scanner.

Next, you need to make sure that your project has a sonar-project.properties file in the root of the parent project. Here is an example of this file configured for multiple modules and for scanning both Java and JavaScript code.

[code language=”bash”]
#
# Used to configure project to work with SonarQube via Jenkins automatically
#

# Required metadata
sonar.projectKey=dvo-claim-service
sonar.projectName=DVO Claim Service project analyzed with the SonarQube Runner
sonar.projectVersion=1.0
#sonar.host.url=http://15.82.89.248:9000

sonar.jdbc.username=sonar
sonar.jdbc.password=********
sonar.jdbc.url=jdbc:mysql://localhost:3306/sonar?useUnicode=true&characterEncoding=utf8&rewriteBatchedStatements=true&useConfigs=maxPerformance

# Comma-separated paths to directories with sources (required)
sonar.sources=src/test/java,src/main/java

# Language
sonar.language=java

# Encoding of the source files
sonar.sourceEncoding=UTF-8

# JUnit reports
sonar.junit.reportsPath=**/target/surefire-reports/

# Set module IDs
sonar.modules=dvo-claim-service,dvo-web-ui,dvo-product-service

# Default module base directory is <curent_directory>/<module_ID>
# It has to be overriden for dvo-web-ui
dvo-web-ui.sonar.projectBaseDir=dvo-web-ui

# Overrides some parent properties in dvo-web-ui
dvo-web-ui.sonar.projectName=DVO Web UI project analyzed with the SonarQube Runner
dvo-web-ui.sonar.sources=src/main/webapp
dvo-web-ui.sonar.language=js

# Default module base directory is <curent_directory>/<module_ID>
# It has to be overriden for dvo-product-service
dvo-product-service.sonar.projectBaseDir=dvo-product-service

# Overrides some parent properties in dvo-product-service
dvo-product-service.sonar.projectName=DVO Product Service project analyzed with the SonarQube Runner
dvo-product-service.sonar.sources=src/test/java,src/main/java
dvo-product-service.sonar.language=java
[/code]

Now, so long as you have Tomcat, BitBucket, Jenkins, and SonarQube up and running, you can push a code change to your Git repository hosted by BitBucket and see it automatically kick off a build in Jenkins. If the build is successful, you will be able to see your SonarQube Scanner results. Good luck in your implementations!

Jenkins Project with SonarQube link

SonarQube Project results.