Reducing SharePoint Framework Code Smells: 1 – Setting up SonarQube in Azure

This is a three part series on how to set up SonarQube as a Quality Gate in your SharePoint Framework development process. The end goal is to add SonarQube to your build and release process through DevOps. These three articles will explain:

  1. How to set up a sample SonarQube server in Azure
  2. How to run a code review manually
  3. How to integrate the code review into your Azure DevOps build and release process.

As part of a quality development process not only should developers be linting their code, running unit test and so forth, another step in the process which can be added is a “Code Quality” check using the open source project SonarQube.

In this article we will see how to create a stand alone sample SonarQube server in Azure (and locally if you really want as well).

Introduction

“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.” 

In practice what it means is an additional tool which developers can use to write better, more maintainable code. This increases quality and reduces overall maintenace costs when implemented as part of a continuous build and deploy process.

There are plugins for JavaScript and TypeScript and thus makes this very applicable to SharePoint Framework development.

Setting up the server

The first step is to create a SonarQube server upon which your code can be reviewed. Some VERY nice person by the name of vanderby has created an ARM template to “Deploy Sonar Cube to Azure“. It is limited by using an embedded database, but it will at least show you the basics before you are ready to scale this properly.

As the github page states – it does take a while to get started but once it is up you can start to use it.

To log into the server I used admin/admin. As this is a sample setup it doesn’t really matter.

Creating a project

Once you are set up and running you can create a project and a key which can then be used to access the server from a command line interface (CLI).

Under the administration server create a new project and once that is complete generate a key for your project

Using these credentals we can test out code from the command line.

Conclusion

Setting up a sample SonarQube server in Azure is pretty simple. As it states though this will not scale and if you are going to use this in an enterprise it will need some better set up. But for the sake of demonstration, it’s just fine.

In the next article we will look at how to apply this to an Azure DevOps build and deploy process for SPFx.

 

Note

You can just as easily set up your own local SonarQube server by following the 2 minute set up installation instructions

Get Started in 2 minutes

 

Advertisements

Bluemix Monitoring and Analysis – Diagnostics version

In this article I will show how to utilize some aspects of the paid Bleumix Monitoring and Analysis service to look inside the performance of your applications.

State of shock

I am in a state of shock, as I am writing this post I actually broke my application, and used these very tools to figure out why……………..COOL !!!

Introduction

The paid version of Bluemix monitoring and analysis costs $0.03 per application her hour – which equates to about $21 a month per app. Once you turn this on it starts charging – and this is completely outside of the 375GB/Hour free cost. In a week I racked up $5 in charges cos I went away for an extended weekend.

m6

 

I hooked that up to my application and immediately started to see more information about it than the free package

m1

Clicking on the Diagnose button gives me access to more information about my slowest requests

m2

Click on one of the request name options then shows me more information about the response time of that item

m3

 

So how did I break the application?

I am putting together a websockets demo for MWLUG and as part of looking at this monitoring service I started to refresh my website repeatedly, quickly in multiple browsers. This blew up the application and it crashed

m4

Out of memory……weird – how come?

Well as I look at the monitoring tools I can clearly see that the baseline application with no one using it – was hovering over 100M

m5

So clearly we need to add more memory

Go CLOUD

All this preaching about scaling and paying for what you need is all well and good until you actually see it happen. In less than 30 seconds I have more memory applied

m8

and after a quick restart – we can see that we are now not pushing the limit of allocated memory

m7

This is fantastic – because I plan to do a live demo of this application in a room full of people next month – there is a really good chance that this would have crashed when 30 people connected to it – and now there isn’t – and that is freaking awesome !!!!

m9