<h3>Configuration</h3>
Setting up SonarQube &#x26; SonarCloud for Azure DevOps is straight-forward and can be done by following the steps outlined here:
SonarQube installation/setup: <a href="https://docs.sonarqube.org/latest/setup/install-server/" title="SonarQube setup documentation">https://docs.sonarqube.org/latest/setup/install-server/</a> (SonarQube requires Java 11 or Docker to work depending on whether you are installation the zip file or docker image).
SonarCloud installtion/setup is far more trivial and is configured when creating an account.
<h3>Continuous Integration</h3>
Once the SonarQube/Cloud has been configured you then need to configure your DevOps pipeline. In order to do so you will need to install the relevant extension:
SonarQube: <a href="https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarqube">https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarqube</a>
SonarCloud: <a href="https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarcloud">https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarcloud</a> 
Installing the SonarQube/Cloud extension will give you access to three tasks in DevOps:
<ol>
<li>Prepare Analysis Configuration</li>
<li>Run Code Analysis</li>
<li>Publish Quality Gate Result</li>
</ol>
<ul>
<li>Instructions for SonarQube: <a href="https://docs.sonarqube.org/latest/analysis/scan/sonarscanner-for-azure-devops/#header-3" title="SonarScanner setup for Azure Devops documentation">https://docs.sonarqube.org/latest/analysis/scan/sonarscanner-for-azure-devops/#header-3</a> </li>
<li>Instructions for SonarCloud: <a href="https://sonarcloud.io/documentation/analysis/scan/sonarscanner-for-azure-devops/" title="SonarCloud setup for Azure Devops documentation">https://sonarcloud.io/documentation/analysis/scan/sonarscanner-for-azure-devops/#configure</a></li>
</ul>
The configuration process for the SonarQube/Cloud extensions are identical.
For the purposes of this work I have manually added the sonar configuration settings, however I recommend adding the settings to a file called sonar-project.properties and storing that in git with the solution.
<h3>Pipeline Process</h3>
Once the extensions are configured the build pipeline needs to be updated so that the analysis can be reported to SonarQube/Cloud correctly.
The build process should have the following steps:
<ol>
<li>Checkout solution</li>
<li>Install NodeJs</li>
<li>Run npm ci</li>
<li>Run the SonarQubePrepare/SonarCloudPrepare task</li>
<li>Run npm build</li>
<li>Run npm test</li>
<li>Run SonarQubeAnalyse/SonarCloudAnalyse task</li>
<li>Run SonarQubePublish/SonarCloudPublish task</li>
</ol>
Below is a sample YAML pipeline.
<pre><code class="language-yaml"># Node.js
# Build a general Node.js project with npm.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
 vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
 inputs:
 versionSpec: '10.x'
 displayName: 'Install Node.js'

 - script: |
 npm run lint
 displayName: 'npm lint'

- script: |
 npm ci
 displayName: 'npm ci'

- task: SonarCloudPrepare@1
 inputs:
 SonarCloud: 'SonarCloud'
 organization: '[ORGANISATION_NAME]' #this will come from setup
 scannerMode: 'CLI'
 configMode: 'manual'
 cliProjectKey: '[PROJECT_KEY_NAME]' #this will come from setup
 cliProjectName: '[PROJECT_NAME]' #this will come from setup
 cliSources: [COMMA_SEPARATED_LIST_OF_FOLDERS_TO_COVER] #e.g.'components,lib,pages,utils'
 extraProperties: |
 sonar.testExecutionReportPaths=test-report.xml
 sonar.javascript.lcov.reportPaths=coverage/lcov.info

- script: |
 npm run build
 displayName: 'npm build'

- script: |
 npm run test
 displayName: 'npm run test'

- task: SonarCloudAnalyze@1

- task: SonarCloudPublish@1
 inputs:
 pollingTimeoutSec: '300'

- task: PowerShell@2
 displayName: SonarCloud Result
 inputs:
 targetType: 'inline'
 script: |
 $token = [System.Text.Encoding]::UTF8.GetBytes([AUTHORISATION_TOKEN] + ":")
 $base64 = [System.Convert]::ToBase64String($token)

 $basicAuth = [string]::Format("Basic {0}", $base64)
 $headers = @{ Authorization = $basicAuth }

 $result = Invoke-RestMethod -Method Get -Uri https://sonarcloud.io/api/qualitygates/project_status?projectKey=[PROJECT_NAME] -Headers $headers
 $result | ConvertTo-Json | Write-Host

 if ($result.projectStatus.status -eq "OK") {
 Write-Host "Quality Gate Succeeded"
 }else{
 throw "Quality gate failed"
 }

- task: CopyFiles@2
 displayName: "Copy Output Directory"
 inputs:
 Contents: |
 **
 !.git/**/*
 !debug.log
 targetFolder: $(Build.ArtifactStagingDirectory)
</code></pre>
Solution Setup
In order for SonarQube/Cloud to analyse the code correct there are a couple steps that need to be taken.
The following packages need to be installed into the solution's dev dependencies:
<pre><code class="language-json"> "devDependencies": {
 "@babel/core": "^7.12.3",
 "@babel/plugin-transform-react-jsx": "^7.12.1",
 "@babel/preset-env": "^7.12.1",
 "@typescript-eslint/eslint-plugin": "^4.5.0",
 "@typescript-eslint/parser": "^4.5.0",
 "babel-jest": "^26.6.1",
 "eslint": "^7.12.1",
 "eslint-plugin-jest": "^24.1.0",
 "eslint-plugin-react": "^7.21.5",
 "eslint-plugin-prettier": "^3.1.4",
 "eslint-plugin-react": "^7.21.5",
 "jest": "^26.6.1",
 "jest-sonar-reporter": "^2.0.0"
 }
</code></pre>
You need to add a jest.config.js file with the following contents:
<pre><code class="language-json">/*
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/en/configuration.html
 */

module.exports = {

 // Automatically clear mock calls and instances between every test
 clearMocks: true,

 /*
 * Indicates whether the coverage information should be collected while executing the test
 */
 collectCoverage: true,

 // The directory where Jest should output its coverage files
 coverageDirectory: 'coverage',

 // The test environment that will be used for testing
 testEnvironment: 'node',

 /*
 * This option allows the use of a custom results processor
 */
 testResultsProcessor: 'jest-sonar-reporter'

};
</code></pre>
You will need to configure babel correctly - below is a sample configuration in babel.config.js
<pre><code class="language-json">module.exports = {
 presets: [
 [
 '@babel/preset-env',
 { 
 targets: { 
 node: 'current' 
 } 
 }
 ]
 ],
 plugins: ['@babel/plugin-transform-react-jsx']
 };
</code></pre>
All these files should be stored with the root of the solution.

Using & configuring SonarCloud code analysis on a nodeJs project for static code anaylsis.

SonarCloud Code Analysis

When running my legacy pipeline on Azure devops I ran into the following issue when running AZCopy.
<pre><code class="language-bash">2020-11-15T12:30:03.1523563Z ##[error]Upload to container: 'css' in storage
account: 'tmdn' with blob prefix: '' failed with error: 'AzCopy.exe exited with
non-zero exit code while uploading files to blob storage.' For more info please
refer to https://aka.ms/azurefilecopyreadme
</code></pre>
<hr>
After some investigation I discovered that I had to apply the following roles to the service principal at the Storage Account IAM level:
<ul>
<li>Storage Blob Data Contributor</li>
<li>Storage Blob Data Owner</li>
</ul>
Once the above roles were applied the issue was resolved and I was able to copy items into Azure Storage.

Solving the Azure Copy permissions by ensuring that the correct roles are applied to the service principal at the storage account IAM level.

Azure Copy Permissions Error

A quick overview on applying styling to code snippets in your website. The library that I use across this site is called PrismJs it's an easy and clean JavaScript library for styling and highlighting code. It's simple to configure download and use, so I will cover the steps I used to integrate PrismJs into this site below.The following steps outline the implementation used on this website which is built using NextJs & ReactJs and dynamically pulls the page data from an API.My requirement is:<ul class="list-unstyled"><li>I need to be able to dynamically highlight code which is retrieved from an API request. </li></ul>Firstly you need to go the PrismJs website and generate/download a JavaScript and CSS bundle for use in your site. Currently you need to go the download page <a href="https://prismjs.com/download.html" class="post__link post__link--base-colour">https://prismjs.com/download.html</a> and select the appropriate themes, languages and plugins.There are various options you can use to custom the bundles from colour to adding extra functionality like line numbers. Store the downloaded files in a suitable location for future use.Copy the JavaScript and CSS bundles to the /public folder (e.g. /public/assets/prism.css|.js) of the NextJs application where they can be referenced. Ensure that you place the CSS reference in the NextJs Head tag on the relevant page where you need the code highlighting, e.g.<pre class="code-block"><code class=" language-jsx">import React from "react";
import Head from "next/head";

const Meta = () =&gt; {
	return (
		&lt;Head&gt;
			&lt;link rel="stylesheet" href="/assets/css/prism.css" type="text/css"/&gt;
		&lt;/Head&gt;
	);
};

export default Meta;</code></pre>Place the JavaScript reference somewhere towards the end of the page - just above the body tag, e.g.<pre class="code-block"><code class=" language-javascript">&lt;script src="/assets/js/prism/prism.js"&gt;&lt;/script&gt;</code></pre>The next step is apply the markup for the code that needs to be styled in the appropriate component. This code comes directly from the API hence it's rendered as dangerous HTML in reactJs e.g.<pre class="code-block"><code class=" language-html">&lt;pre&gt;&lt;code class="language-bash"&gt;echo styling looks good&lt;/code&gt;&lt;/pre&gt;</code></pre>At the start of the component function add the following code, which will apply the code highlighting/styling<pre class="code-block"><code class=" language-jsx">React.useEffect(() =&gt; {
	setTimeout(() =&gt; (window as any).Prism.highlightAll(), 0);
}, []);</code></pre>Next you'll have neatly, responsive styled code.

The library that I use across this site is called PrismJs it's an easy and clean JavaScript library for styling and highlighting code. It's simple to configure download and use, so I will 

M is for Mackolicious

Developer

Blogger

Services