In this section, we describe how to set up the pipelines we'll face in our frontend journey.

Integration pipeline

1. Set up SonarCloud

2. Create pipeline in Azure DevOps

As soon as the service connection is set up, it is time to work in the integration pipeline.

❗Before you start, please make sure the development and main/master branch are up to date and completely synced.

In Azure DevOps, go ahead and create a new pipeline in your product organization as follows:

1. In the Connect section select Azure Repos Git

2. Select the repo where your app lays on.

3. Select Node.js.

4. Paste the following code in your pipeline YAML.

   # Node.js with Vue
   # Build a Node.js project that uses Vue.
   # Add steps that analyze code, save build artifacts, deploy, and more:
   # <https://docs.microsoft.com/azure/devops/pipelines/languages/javascript>
   
   trigger:
   - master       # Project main branch name
   - development  # Project development branch name
   
   pool:
     vmImage: ubuntu-latest
   
   steps:
   - task: NodeTool@0
     inputs:
       versionSpec: '18.x'
     displayName: 'Install Node.js'
   
   - script: npm install
     displayName: 'Installing dependencies'
   
   - script: npm run test:coverage     # Must be the name of your package json run test coverage script
     displayName: 'Testing Components'
   
   - task: SonarCloudPrepare@1
     inputs:
       SonarCloud: 'VerifierFrontEnd-SonarCloud'
       organization: 'masivian-verticals'
       scannerMode: 'CLI'
       configMode: 'manual'
       cliProjectKey: 'estratec_masivapp-verifier-front'
       cliProjectName: 'masivapp-verifier-front'
       cliProjectVersion: '0.1'
       cliSources: '.'
       extraProperties: |
         # Additional properties that will be passed to the scanner, 
         # Put one key=value per line, example:
         # sonar.exclusions=**/*.bin
         
         sonar.language=js
         sonar.tests=tests
         sonar.test.inclusions=tests/**/*.spec.js,tests/**/*.test.js
         
         sonar.javascript.lcov.reportPaths=./coverage/lcov.info
   			sonar.testExecutionReportPaths=./coverage/sonar-report.xml
               
         sonar.sourceEncoding=UTF-8
   - task: SonarCloudAnalyze@1
   - task: SonarCloudPublish@1
     inputs:
       pollingTimeoutSec: '300'
   

5. Click on the Settings in the SonarCloud section:

   

6. A drawer will appear on the right section of the window. You’ll need to fill it out with the info gathered on 3rd step of Set up SonarCloud.

7. In the drawer, click on Advanced Settings and make sure there are no indent spaces:

❌ BAD

✅ GOOD

1. Hit the Save and run button in the top right corner and set the commit message as follows:

   

2. Wait for the pipeline to run.

Possible issues

Analyzing your branches

1. In your Azure repo, go to Pull requests.