Does your React Native app SMELL ?

My face when I read a piece of code I wrote a year ago

React and React Native are great frameworks for developing fast ! But this comes with a price : JavaScript.

JavaScript is a great language. But the fact that it is so permissive gives you the ability to do absolutely what you want in the way you want.

You may think that being free is a positive thing. Sure, it has some benefits but it turns out you may want to impose you some restrictions if you don’t want to completely lose control when your codebase grows.

One of the greatest additions to JavaScript is TypeScript. It forces you to self document your code and gives you some restrictions over bad patterns.

But this article is not about TypeScript. Today I’m gonna show you a tool which will greatly help you to find anti-patterns in your code automatically.

SonarQube

This is their headline.

SonarQube is an open-source platform developed by SonarSource for continuous inspection of code quality to perform automatic reviews with static analysis of code

But how does it work ? Basically you spin up a SonarQube server on your computer or on a remote server and it will scan your code to detect bugs, code smells, and security vulnerabilities on each push.

I was amazed the first time I ran it by how accurate it was and by how few false positive it reported. It’s very easily pluggable into your CI pipelines and it supports up to 30 programming languages (including TypeScript).

They have a free open source tier and we’ll see how to set it up on your machine.

Installation and setup

This will cover only macOS setup but you can easily find how to do it on Windows following the official documentation at https://docs.sonarqube.org/

Prerequisite:

  • Having Docker installed on your machine
  • Having Homebrew installed : https://brew.sh/

First you’ll need to run the SonarQube server using docker. You can do so with the following command :

docker run -d —-name sonarqube -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true -p 9000:9000 sonarqube:latest

This will spin up the server on port 9000 of your machine. You can then open your browser and visit http://localhost:9000/. You will land on this page :

Just click login and enter the following credentials :

username : admin
password: admin

In your dashboard create a new project and assign it a Project key and a Display Name (usually both your project name)

Next give a name to your token (you can use the same name as before) and generate a new token. Keep it for later and hit continue.

Now that our project is set up on SonarQube we’ll configure our React project.

Open your project in your favorite code editor and create a new file at the root called sonar-project.properties

This file will help the sonar-scanner to know what to test and how. In this file just put the following code by filling it with your values.

sonar.projectKey=my-project
sonar.sources=.
sonar.host.url=http://localhost:9000
sonar.login=<Your token>
sonar.exclusions=.github/**, .vscode/**, android/**, assets/**, build/**, ios/**, node_modules/**
sonar.projectName=deevent
sonar.projectVersion=1.2

Note that you’ll want to exclude certain folders from your analysis like node_modules or ios/android if you scan a React Native Project. (sonar.exclusions)

That’s it ! Now we need to run the sonar-scanner. First install it via homebrew

brew install sonar-scanner

And when it’s done, just run the command sonar-scanner from the root of your project. It will take some time and when it’s done go to the dashboard again and you’ll see your test results.

You’ll see multiple suggestion to improve your code quality and maintainability. The most interesting for me were “code smells”. These are piece of code not technically wrong but which could cause bugs upon refactoring or editing in the future.

React Developer based in Switzerland