After setting up a CI Pipeline in the last blog, we are back with a new Blog. In the blog, I will tell you how you scan your code using SonarCloud for Free!
Please read the previous blog for setting up a CI pipeline using Azure Pipelines:
For this tutorial, we will use the following Git Repositories and setup CICD for a Quiz App made in React JS.
Link: https://github.com/27aadesh/QuizApp.git
So, Let’s begin.
Static Code Analysis
Static program analysis is the analysis of computer software that is performed without actually executing programs, in contrast with dynamic analysis, which is the analysis performed on programs while they are executing.
SonarCloud
Sonarcloud is a Cloud version of SonarQube with all the features and the main thing is that “It’s Free for public projects”.
When we use Sonarcloud, We are free from managing the Sonarqube machine, Database, and version upgrades. Everything is done automatically and we can use it as a Software as a Service.
Also, We get a cool badge which we can show in our README.MD file.
SonarCloud and Azure Pipelines
We need to follow the below steps to scan our code with sonarcloud.io and Azure Pipelines.
1. Installing Sonarcloud Extension in Azure DevOps
We need to go to the Azure DevOps marketplace and install the sonar cloud extension.
In the marketplace, search for sonar cloud extension and click on “Get it Free”
If you are the owner of the organization, then the extension will be installed but if you are not the owner of the organization then you will need the approval from the organization owner.
2. Setting up a new project in Sonarcloud.io
Go to https://sonarcloud.io and create an account. Once the account is created, click the “New Project” or “+” button on the Top Right Corner.
Setup the new project by filling the required details.
3. Generate a new Token in SonarCloud
Go to my account -> Security Tab
You will see the previously generated tokens and the option to generate a new token on this page.
Just give any name to the new token and click on generate. A new token will be generated.
Note: Make sure you copy the token as soon it is generated as you won’t be able to see it again!
Once the token is generated, We need to add a sonar cloud service Connection in Azure DevOps.
4. Adding SonarCloud Service Connection in Azure DevOps
Go to project settings -> Service Connections.
In the service connections tab, Click on new Service Connection.
Search for SonarCloud and click on Next.
Paste the sonar cloud token and verify the connection.
Once saved, You will see the service connection in the list.
5. Adding Sonarcloud Scanner in Azure pipeline
Since we have installed the sonar cloud extension, Sonarcloud steps are searchable in the tasks.
We will just add the Prepare analysis Configuration task before the build and Run Code analysis task after the build and then we will publish the Quality gate result.
Prepare Analysis Configuration:
Use the same SonarCloud Service Endpoint which was added in the Service Connections.
Give the organization name of the SonarCloud account.
We are scanning for the ReactJS app that why we are using the standalone scanner.
We can provide the configuration in the sonar-project.properties file but here we are providing the manual configuration.
Give the project key which was created in SonarCloud.
We can use the BuildNumber variable of Azure Pipelines to version our SonarCloud analysis.
In the Run Code Analysis and Publish Quality Gate results, We don’t need to do any configuration so just add the tasks in the YAML.
Our final YAML will look like this.
# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
– master
pool:
default
steps:
– task: NodeTool@0
inputs:
versionSpec: ’10.x’
displayName: ‘Install Node.js’
– task: PowerShell@2
inputs:
targetType: ‘inline’
script: ‘npm install’
– task: SonarCloudPrepare@1
inputs:
SonarCloud: ‘SonarCloud’
organization: ‘clouddevopstc’
scannerMode: ‘CLI’
configMode: ‘manual’
cliProjectKey: ‘demoquizapp’
cliProjectName: ‘Quiz App’
cliSources: ‘.’
– task: PowerShell@2
inputs:
targetType: ‘inline’
script: ‘npm run build.azure’
– task: SonarCloudAnalyze@1
– task: SonarCloudPublish@1
inputs:
pollingTimeoutSec: ‘300’
displayName: ‘SonarCloud’
Once the Pipeline is ready, just click on Save and Run Pipeline.
The Pipeline steps will run and the analysis will be done on SonarCloud.
Azure Pipeline Log
We can also find the analysis results in the Extensions Tab in the Pipeline.
If we click on “Detailed SonarCloud Report”, We will be redirected to the SonarCloud project. Here we can see the issues, Vulnerabilities, Security Hotspots, and other details of the code.
You can view the analysis on https://sonarcloud.io/dashboard?id=demoquizapp.
SonarCloud Analysis Page
Voila!! Our SonarCloud analysis has been done and We can get Project badges and add them to our README.MD file.
Conclusion: We discussed how to use sonarcloud for the Static Code Analysis of your code for Free! If you have any queries please write to me at [email protected], I will be happy to answer your questions.
Read more