I'm trying to get both my front end and backend in the same scanner

ForyouHQ · April 22, 2024, 11:59am

I’m trying to get run SonarCloud on both my front end and back end at the same time using Github actions.

Right now I’m using this workflow:

name: SonarCloud Scan
on:
  push:
    branches:
      - main
      - develop

jobs:
  sonarcloud_frontend:
    name: SonarCloud Analysis - Frontend
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@master
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
        working-directory: {frontend directory}
      - name: Set CI environment variable
        run: echo "CI=false" >> $GITHUB_ENV
      - name: Build
        run: |
          npm run build
        working-directory: {frontend directory}
        continue-on-error: true
      - name: Upload coverage report
        uses: actions/upload-artifact@v2
        with:
          name: coverage-report
          path: coverage/lcov.info
      - name: SonarCloud Scan - Frontend
        uses: SonarSource/sonarcloud-github-action@master
        with:
          projectBaseDir: {frontend directory}
          args: >
            -Dsonar.projectKey={project key}
            -Dsonar.organization={organization}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

  sonarcloud_backend:
    name: SonarCloud Analysis - Backend
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Set up JDK
        uses: actions/setup-java@v3
        with:
          java-version: '17'
          distribution: 'adopt'

      - name: Build and analyze
        run: mvn -B verify org.sonarsource.scanner.maven:sonar-maven-plugin:sonar -Dsonar.projectKey={project key}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
        working-directory: {backend directory}

so because the back end is done faster than the front end i will only get to see the front end analysis in the SonarCloud. Is there a way to show both of the directories in SonarCloud? I’m using a mono repository.

PS. If there are other ways I could improve this workflow, I’m always open for tips

long-tran-dss · April 23, 2024, 9:57am

@ForyouHQ I tried running both FE and BE in the same job and it worked.
But currently SonarCloud is not showing coverage in pull-request even though it was still showing yesterday. Are you having the same problem? (Please refer my topics : Currently, SonarCloud does not show coverage analysis on each pull-request)

ForyouHQ · April 23, 2024, 10:31am

@ long-tran-dss How did you run them both in the same job if i may ask? Did you just make it one long job Like this:

sonarcloud:
    name: SonarCloud Analysis - Backend
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Set up JDK
        uses: actions/setup-java@v3
        with:
          java-version: '17'
          distribution: 'adopt'

      - name: Build and analyze
        run: mvn -B verify org.sonarsource.scanner.maven:sonar-maven-plugin:sonar -Dsonar.projectKey={project key}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
        working-directory: {backend directory}
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@master
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
        working-directory: {frontend directory}
      - name: Set CI environment variable
        run: echo "CI=false" >> $GITHUB_ENV
      - name: Build
        run: |
          npm run build
        working-directory: {frontend directory}
        continue-on-error: true
      - name: Upload coverage report
        uses: actions/upload-artifact@v2
        with:
          name: coverage-report
          path: coverage/lcov.info
      - name: SonarCloud Scan - Frontend
        uses: SonarSource/sonarcloud-github-action@master
        with:
          projectBaseDir: {frontend directory}
          args: >
            -Dsonar.projectKey={project key}
            -Dsonar.organization={organization}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

Would something like this work?

long-tran-dss · April 23, 2024, 11:12am

Yes. But i think you just need to checkout once
One more thing, does your SonarCloud show coverage on pull-request ?

ForyouHQ · April 23, 2024, 12:25pm

Ok so right now this is my workflow

sonarcloud:
    name: SonarCloud Analysis - Backend
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Set up JDK
        uses: actions/setup-java@v3
        with:
          java-version: '17'
          distribution: 'adopt'

      - name: Build and analyze
        run: mvn -B verify org.sonarsource.scanner.maven:sonar-maven-plugin:sonar -Dsonar.projectKey={project key}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
        working-directory: {backend directory}
   
      - name: Set up Node.js
        uses: actions/setup-node@master
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
        working-directory: {frontend directory}
      - name: Set CI environment variable
        run: echo "CI=false" >> $GITHUB_ENV
      - name: Build
        run: |
          npm run build
        working-directory: {frontend directory}
        continue-on-error: true
      - name: Upload coverage report
        uses: actions/upload-artifact@v2
        with:
          name: coverage-report
          path: coverage/lcov.info
      - name: SonarCloud Scan - Frontend
        uses: SonarSource/sonarcloud-github-action@master
        with:
          projectBaseDir: {frontend directory}
          args: >
            -Dsonar.projectKey={project key}
            -Dsonar.organization={organization}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

and it passes but the problem is that in sonarcloud i can still only see the frontend coverage in the end.

I can see the backend coverage when that part passes but as soon as the frontend part passes it gets overriden.

Also no i don’t have Pull-request coverage.

long-tran-dss · April 23, 2024, 5:38pm

Here is my config

name: SonarCloud Scan

on:
  push:
    branches:
      - main
      - develop

jobs:
  sonarcloud_coverage:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Setup node env
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          registry-url: 'https://npm.pkg.github.com'

      - name: Setup go
        uses: actions/setup-go@v3
        with:
          go-version-file: ./go.mod

      - name: Install yarn
        run: |
          npm install --global yarn

      - name: Install dependencies
        run: yarn install --frozen-lockfile
        working-directory: ./frontend

      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2.2'

      - name: Install Ruby Dependencies
        run: |
          cd ruby
          gem install bundler
          bundle install

      - name: Jest coverage report for FE
        run: |
          yarn test:coverage
        working-directory: ./frontend

      - name: Run coverage unit-test for BE
        run: |
          mkdir -p tmp
          export GIN_MODE=release
          export CGO_ENABLED=0
          go test $(go list ./... | grep 'common\|handler\|model\|cache\|setup') -v -coverprofile=tmp/cover.out
          go tool cover -html=tmp/cover.out -o tmp/cover.html

      - name: SonarCloud Scan
        uses: SonarSource/sonarcloud-github-action@master
        env:
          SONAR_TOKEN: ${{ secrets. SONAR_TOKEN }}

Can I see your config in sonar-project.properties file?
Here i have to config coverage for both FE and BE in sonar-project.properties file

sonar.javascript.lcov.reportPaths=frontend/coverage/lcov.info
sonar.go.coverage.reportPaths=tmp/cover.out

ForyouHQ · April 23, 2024, 5:53pm

This is my sonar-project.properties file:

sonar.projectKey=foryouhq_Foryou
sonar.organization=foryouhq

And this is my project structure:

I have a React frontend and a Spring Boot backend, and i want to test them both into the same sonarcloud project. Because right now it only the one that finishes last gets shown, it overrides the previous file.

long-tran-dss · April 24, 2024, 3:31pm

It seems like you are configuring SonarCloud Scan in each separate directory (FE and BE) so whatever runs later will overwrite the previous one. You should put SonarCloud Scan last and it will receive both

ForyouHQ · April 25, 2024, 10:50pm

I’ve tried to do it but they both get scanned in different ways so one always overwrites the other. I’ve now just made a different sonarcloud project for front and back end, but it would be better to get them both at the same time. How would i put the scan last so that both get received?