Analizzare un progetto React con SonarQube

SonarQube è uno strumento molto utile per noi sviluppatori per assicurarci di poter andare a rilasciare del codice pulito e sicuro, ma come possiamo utilizzarlo per eseguire una analisi veloce del nostro progetto React in locale?

Prerequisiti

• Docker
• Kind
• Un po’ di pazienza!

Prima di tutto, creiamo il nostro cluster con Kind eseguendo il comando

kind create cluster

Questo creerà un cluster locale temporaneo (che successivamente possiamo disinstallare col comando kind delete cluster) su cui potremo andare ad installare l’Helm Chart di SonarQube.

Assicuriamoci quindi di avere la nostra kubectl configurata sul cluster corretto andando ad eseguire il comando kubectl config use-context kind-kind e successivamente andiamo a installare sonarqube con i comandi

helm repo add sonarqube https://SonarSource.github.io/helm-chart-sonarqube
helm repo update
kubectl create namespace sonarqube
helm upgrade --install -n sonarqube sonarqube sonarqube/sonarqube

Aspettando qualche minuto, dovremmo riuscire a trovare due nuovi pod sul nostro cluster nel namespace sonarqube

kubectl get pods -n sonarqube

Andiamo quindi ad effettuare un port-forward per raggiungere il nostro server SonarQube:

kubectl port-forward services/sonarqube-sonarqube -n sonarqube 9000:9000

E accediamo al nostro server SonarQube!

In primis, ci verrà chiesto di effettuare il login, possiamo usare lo username e la password di default che sono entrambe admin.

Una volta cambiata la nostra password ci ritroveremo davanti a una schermata che ci chiederà di creare un progetto.

Clicchiamo sull’ultima voce “Manuale” e inseriamo il nome del nostro progetto, ci verrà quindi chiesto in che modo vogliamo analizzare il nostro codice.

Scegliamo la voce “Locally” e generiamo un token per la nostra analisi.

Ora abbiamo tutti i pezzettini necessari per far partire la nostra analisi!

Apriamo un terminale e digitiamo:

docker run \
    --rm \
    -e SONAR_HOST_URL="http://host.docker.internal:9000" \
    -e SONAR_SCANNER_OPTS="-Dsonar.projectKey=${YOUR_PROJECT_KEY}" \
    -e SONAR_TOKEN="${SONAR_TOKEN}" \
    -v "${ABSOLUTE_PATH_TO_YOUR_REPO}:/usr/src" \
    sonarsource/sonar-scanner-cli

Una volta eseguito il comando partirà la scansione del nostro progetto e, una volta finita (nel mio caso dopo circa 10 minuti) avremo a disposizione i risultati da analizzare, andiamo a vedere quindi come!

Già dalla dashboard di sonarqube possiamo notare un breve riassunto di bug, vulnerabilità, hotspots e code smells del nostro progetto.

Entriamo nel dettagli per vedere meglio di cosa si tratta cliccando sul titolo del nostro progetto.

E cliccando infine su “1 Code Smells”

In questa pagina possiamo notare che SonarQube ha trovato un problema dovuto all’uso dell operatore logico || al posto dell’operatore ??.

Entriamo nel dettaglio per vedere dove si trova il problema.

Dal dettaglio del code smell possiamo notare che il problema si trova a riga 50 del file Main.tsx (individuabile dalla sidebar sinistra).

Una volta risolto questo problema e rieseguita la scansione con SonarQube vedremo la issue scomparire e forse, se non siamo molto bravi, altre issue comparire!

Una volta finito, possiamo cancellare il nostro cluster Kind con il comando kind delete cluster così da non avere risorse occupate sul nostro computer da SonarQube e PostgreSQL.

E questo è quanto!

Grazie e alla prossima 😉

Reference

• https://docs.sonarsource.com/sonarqube/latest/setup-and-upgrade/deploy-on-kubernetes/deploy-sonarqube-on-kubernetes/
• https://kind.sigs.k8s.io/docs/user/quick-start/
• https://docs.sonarsource.com/sonarqube/10.1/analyzing-source-code/scanners/sonarscanner/