To set up an Angular project with SonarQube and SonarLint in a Bitbucket pipeline on macOS

 

1. Install SonarQube and SonarLint

SonarQube:

1. Download and Install SonarQube:
• Download SonarQube from SonarQube Downloads.
• Extract the files and run the following commands in your terminal:

  
  brew install sonarqube
  sonarqube start

           or

          sudo /opt/sonarqube/bin/macosx-universal-64/sonar.sh console

Java should be - export JAVA_HOME=$(/usr/libexec/java_home -v 22.0.2)

• SonarQube should be accessible at http://localhost:9000.

1. SonarLint (for IDE integration):

• For VS Code:
  • Install the SonarLint extension from the VS Code marketplace.
• For JetBrains IDE (like IntelliJ, WebStorm):
• Install SonarLint from the JetBrains plugin marketplace.

1. 2. Set Up SonarQube on Your Project

1. Install the SonarScanner: The SonarScanner is used to analyze the code and send the results to SonarQube.

   • Install SonarScanner globally using Homebrew:

     bash
     brew install sonar-scanner
     

2. 
   

3. Configure sonar-project.properties: In your Angular project’s root directory, create a sonar-project.properties file with the following content:

   properties
   sonar.projectKey=SonarAngular
   sonar.projectName=SonarAngular
   sonar.host.url=http://localhost:9000
   sonar.projectVersion=1.0
   sonar.login=your_sonarqube_token
   sonar.sourceEncoding=UTF-8
   sonar.sources=src
   sonar.tests=src
   sonar.exclusions=**/node_modules/**
   sonar.javascript.lcov.reportPaths=coverage/lcov-report/index.html
   

   Replace your_sonarqube_token with the SonarQube token you generate in the SonarQube dashboard (under My Account -> Security -> Generate Tokens).

2. Execute sonar through terminal

sonar-scanner \

  -Dsonar.projectKey=SonarAngular \

  -Dsonar.sources=. \

  -Dsonar.host.url=http://localhost:9000 \

  -Dsonar.token=sqp_3b48738d7f2ac5450ec5bb1bfc273b8b4d92b633

1. Set Up Bitbucket Pipeline

   1. Create bitbucket-pipelines.yml File: In the root directory of your Angular project, create a bitbucket-pipelines.yml file to define the pipeline configuration. Below is an example pipeline configuration:

      yaml
      image: node:16
      
      pipelines:
        default:
          - step:
              name: Build and Analyze with SonarQube
              caches:
                - node
              script:
                - npm install
                - npm run build
                - npm run test -- --code-coverage
                - sonar-scanner
      

      • The sonar-scanner command will analyze the code and send the results to SonarQube.

   2. Set Up Bitbucket Secrets:

      • Add the SonarQube token in Bitbucket under Repository settings -> Pipeline -> Environment Variables. Add SONAR_TOKEN as the variable name and your SonarQube token as the value.

   3. Configure Angular karma.conf.js: Ensure that the karma.conf.js file in your Angular project is set up to produce a code coverage report:

      js
      reporters: ['progress', 'coverage'],
      coverageReporter: {
        type: 'lcov',
        dir: 'coverage/'
      },
      

   4. Run the Pipeline

   1. Push Your Changes: After setting everything up, push your changes to Bitbucket:

      bash
      git add .
      git commit -m "Set up SonarQube and Bitbucket pipeline"
      git push
      

   2. Check the Pipeline: Go to the Pipelines section in your Bitbucket repository to see the results of the build. SonarQube analysis should appear after the build and tests are complete.

   5. View the Results in SonarQube

   1. Go to http://localhost:9000 in your browser (or the SonarQube instance you’ve configured).
   2. You should be able to see your Angular project and its analysis, including metrics like code coverage, code smells, and potential bugs.

   Additional Tips:

   • You can install SonarLint in your local IDE to receive immediate feedback on your code as you write it.
   • Ensure that your Bitbucket pipeline YAML configuration is correctly formatted and your SonarQube instance is running.
2.