How to Run Sonar-scanner for React Project

Hi,
We have React project(Typescript,Bootstrap) which is running in Node20 as a docker image in Kubernetes container. we are using Azure DevOps Server(ADS) pipeline to create CI/CD pipeline.
The Agent machine is 2.175.2 which is used to create docker image. Would like to run sonar analysis and coverage for this React project.

  1. We can not run sonar analysis in the Agent machine itself as it does not have required capabilities(Not Installed Java, Node, NPM, Yarn).
  2. So we have to run our sonar analysis in the docker image.
  3. I try to use sonar-scanner command to run sonar analysis but getting error “sonar-scanner: command not found”. Even I have installed yarn add sonarqube-scanner -g in the docker image.

Kindly provide step by step to achieve sonar analysis and coverage for this React Project and post the results in sonar portal. We have Paid license for https://sonarcloud.io/

Hey there.

A good start would be sharing your docker image, the build pipeline, and the logs.

Hi Colin,
Thanks for your reply.
1.Dockerfile

FROM node:20 as build-stage
WORKDIR /app
ARG BUILD_NAME=Viewer
ARG BUILD_ID=LocalDev
ARG SONAR_HOST
ARG SONAR_LOGIN
ARG BRANCH_NAME
ARG PULL_REQUEST_KEY

COPY package.json .
COPY yarn.lock .
RUN yarn install --silent
COPY . .

ENV NODE_ENV=$(ENVIRONMENT)
ENV NODE_ENV=development

RUN if [ "$BUILD_ID" != "LocalDev" ] ; then \
chmod u+x ./build.sh ; \
./build.sh $BUILD_NAME $BUILD_ID $SONAR_HOST $SONAR_LOGIN $BRANCH_NAME $PULL_REQUEST_KEY ; \
fi
ENV NODE_ENV=$(ENVIRONMENT)

RUN yarn build
FROM nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

2.build.sh

BUILD_NAME=$1  # The name used as a identifier when reporting build results
BUILD_ID=$2    # The id used as a identifier when reporting build results
SONAR_HOST=$3  # SonarQube hostname (optional)
SONAR_LOGIN=$4 # SonarQube login (optional, but required with hostname above)
BRANCH_NAME=$5
PULL_REQUEST_KEY=$6

yarn add -g sonarqube-scanner

sonar-scanner begin /k:"$BUILD_NAME" /d:Dsonar.host.url="$SONAR_HOST" /o:<XYZ> /d:Dsonar.login="$SONAR_LOGIN" /d:Dsonar.projectBaseDir="/app" /d:Dsonar.exclusions="**/*.spec.tsx,**/*.spec.ts,**/index.tsx,**/App.tsx" /d:Dsonar.javascript.lcov.reportPaths=./coverage/lcov.info
/d:Dsonar.branch.name="$BRANCH_NAME" /v:"$BUILD_ID" /d:Dsonar.verbose=true

yarn build
yarn test --watchAll=false

sonar-scanner end /d:sonar.login="$SONAR_LOGIN"

3.Error Log

./build.sh: line 43: **sonarscanner: command not found**
The command '/bin/sh -c if [ "$BUILD_ID" != "LocalDev" ] ; then 	chmod u+x ./build.sh ; 	./build.sh $BUILD_NAME $BUILD_ID $SONAR_HOST $SONAR_LOGIN $BRANCH_NAME $PULL_REQUEST_KEY ; 	fi' returned a non-zero code: 127
##[error]The command '/bin/sh -c if [ "$BUILD_ID" != "LocalDev" ] ; then 	chmod u+x ./build.sh ; 	./build.sh $BUILD_NAME $BUILD_ID $SONAR_HOST $SONAR_LOGIN $BRANCH_NAME $PULL_REQUEST_KEY ; 	fi' returned a non-zero code: 127
##[error]The process '/usr/bin/docker' failed with exit code 127

I think the first thing that’s not quite right is relying on this yarn package that hasn’t been updated since 2018 Yarn

Nor was that package ever officially supported by SonarQube.

There is an official NPM module to run SonarQube: sonarqube-scanner - npm

Is that an option for you?

I should also mention that there is a Docker image for the SonarScanner CLI that you can use.

https://hub.docker.com/r/sonarsource/sonar-scanner-cli