DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on

Setting Up SonarQube Locally for React Native & MERN Projects

#reactnative #react #nextjs #node

As a React Native and MERN developer, I recently integrated SonarQube into my local workflow using Docker. Here's a straightforward guide to get you started.

What is SonarQube?

SonarQube automatically scans your code to find:

  • Bugs and potential errors
  • Security vulnerabilities
  • Code smells (maintainability issues)
  • Test coverage gaps
  • Duplicate code

Prerequisites

Install Docker Desktop:

brew install --cask docker
Enter fullscreen mode Exit fullscreen mode

Open Docker Desktop from Applications and make sure it's running.

Setup Steps (project👨‍💻)

1. Create Docker Compose File

Create docker-compose.yml in your project root:

services:
  sonarqube:
    image: sonarqube:community
    container_name: sonarqube-local
    ports:
      - "9000:9000"
    environment:
      - SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true
    volumes:
      - sonarqube_data:/opt/sonarqube/data
      - sonarqube_extensions:/opt/sonarqube/extensions
      - sonarqube_logs:/opt/sonarqube/logs
    networks:
      - sonarqube-network

volumes:
  sonarqube_data:
  sonarqube_extensions:
  sonarqube_logs:

networks:
  sonarqube-network:
    driver: bridge
Enter fullscreen mode Exit fullscreen mode

2. Add Scripts to package.json 

{
  "scripts": {
    "sonar": "sonar-scanner",
    "sonar:start": "docker-compose up -d",
    "sonar:stop": "docker-compose stop",
    "sonar:down": "docker-compose down",
    "sonar:logs": "docker-compose logs -f sonarqube"
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Create SonarQube Configuration

Create sonar-project.properties:

# Project identification
sonar.projectKey=my-app
sonar.projectName=My App
sonar.projectVersion=1.0.0

# Source code location
sonar.sources=src
sonar.tests=__tests__

# Exclude directories
sonar.exclusions=\
  **/node_modules/**,\
  **/android/**,\
  **/ios/**,\
  **/vendor/**,\
  **/coverage/**,\
  **/__mocks__/**,\
  **/build/**,\
  **/*.spec.ts,\
  **/*.spec.tsx,\
  **/*.test.ts,\
  **/*.test.tsx,\
  **/assets/**,\
  **/*.config.js,\
  **/*.config.ts,\
  **/*.config.mjs,\
  **/babel.config.js,\
  **/metro.config.js,\
  **/jest.config.js,\
  **/jest-setup.ts

# Test exclusions
sonar.test.exclusions=\
  **/node_modules/**,\
  **/coverage/**

# Language
sonar.language=ts

# Encoding
sonar.sourceEncoding=UTF-8

# TypeScript specific
sonar.typescript.node=node

# Coverage report paths
sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.coverage.exclusions=\
  **/__tests__/**,\
  **/__mocks__/**,\
  **/*.test.ts,\
  **/*.test.tsx,\
  **/*.spec.ts,\
  **/*.spec.tsx

# Disable external issues
sonar.typescript.internal.typescriptLocation=node_modules/typescript

# Host URL
sonar.host.url=http://localhost:9000

# Authentication token (add after generating)
# sonar.login=your-token-here
Enter fullscreen mode Exit fullscreen mode

4. Update .gitignore

Add to your .gitignore:

# SonarQube
.scannerwork/
.sonarqube/
Enter fullscreen mode Exit fullscreen mode

5. Start SonarQube 

# Start Docker Desktop first
open -a Docker

# Start SonarQube server
yarn sonar:start

# Wait 1-2 minutes, then check logs
yarn sonar:logs
Enter fullscreen mode Exit fullscreen mode

6. Generate Authentication Token

  1. Open http://localhost:9000
  2. Login with admin / admin
  3. Change password when prompted
  4. Go to Profile Icon → My Account → Security
  5. Generate token:
    • Name: local-scanner
    • Type: Global Analysis Token
  6. Copy the token immediately!

7. Add Token to Configuration

Edit sonar-project.properties and uncomment the last line:

sonar.login=your-generated-token-here
Enter fullscreen mode Exit fullscreen mode

8. Install Sonar Scanner 

npm install --save-dev sonar-scanner
# or
yarn add -D sonar-scanner
Enter fullscreen mode Exit fullscreen mode

9. Run Your First Scan 

# Run tests with coverage
yarn test --coverage

# Run SonarQube analysis
yarn sonar
Enter fullscreen mode Exit fullscreen mode

View results at http://localhost:9000

Daily Usage 

# Start server (if not running)
yarn sonar:start

# After making code changes
yarn test --coverage && yarn sonar

# View results at http://localhost:9000

# Stop server when done
yarn sonar:stop
Enter fullscreen mode Exit fullscreen mode

Configuration for Different Projects

For Node.js/Express Backend:

sonar.sources=src
sonar.tests=src
sonar.test.inclusions=**/*.test.js,**/*.spec.js
Enter fullscreen mode Exit fullscreen mode

For React Native:

sonar.sources=src
sonar.tests=__tests__
sonar.exclusions=**/android/**,**/ios/**
Enter fullscreen mode Exit fullscreen mode

Common Issues

Docker not running:

open -a Docker
# Wait 30 seconds, then retry
Enter fullscreen mode Exit fullscreen mode

Port 9000 in use:

lsof -i :9000
# Kill the process or change port in docker-compose.yml
Enter fullscreen mode Exit fullscreen mode

Authentication error:

# Verify token in sonar-project.properties
cat sonar-project.properties | grep sonar.login
Enter fullscreen mode Exit fullscreen mode

What Gets Analyzed

  • Code quality issues
  • Potential bugs
  • Security vulnerabilities
  • Test coverage
  • Duplicate code
  • Complexity metrics

Key Benefits

✅ Catch bugs before production

✅ Improve code maintainability

✅ Track test coverage

✅ Enforce coding standards

✅ Identify security issues early

Useful Commands 

yarn sonar:start   # Start server
yarn sonar:stop    # Stop server
yarn sonar:down    # Stop and remove containers
yarn sonar:logs    # View logs
yarn sonar         # Run analysis
Enter fullscreen mode Exit fullscreen mode

That's it! Keep SonarQube running in the background and scan your code regularly to maintain high-quality standards.

Resources:

Top comments (0)