Enhancing React Code Quality, SonarQube Scanning with Podman

In the world of React web development, creating strong and efficient code is important. That’s where SonarQube comes in. It’s a tool that helps make sure your code is top-notch. And when you team it up with Podman, a tool that helps manage your code in containers, you’ve got a powerful combo. This post is all about how to use SonarQube with Podman to check your React project’s code for issues like bugs and other problems.

Installing and Configuring Podman

Installing Podman on your system is a straightforward process that can greatly enhance your development and deployment workflows. Podman is a containerization tool that allows you to manage containers and pods, making it an excellent choice for isolating and deploying applications.

Here, we’ll discuss how to install and configure Podman on macOS. For other operating systems, you can refer to the official Podman documentation.

Install Homebrew (if not already installed)

Homebrew is a package manager for macOS that makes it easy to install and manage software. Open a terminal and run the following command to install Homebrew if you haven’t already

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Podman

Once Homebrew is installed, you can use it to install Podman. Run the following command

brew install podman

Create Podman Machine

Create and start your first Podman machine, and the default machine name will be “podman-default-machine.”

podman machine init
podman machine start

Now the Podman is running on your machine and you can confirm it by running the below command. It will show if there is any container is running on your Podman machine.

podman ps

Create a SonarQube container in Podman

Creating SonarQube on Podman involves a series of steps. SonarQube is typically run in a Docker container, and while Podman is compatible with Docker images, there could be some differences in the commands and setup.

Pull the SonarQube Docker Image

Run the following command to pull the SonarQube Docker image

podman pull sonarqube

Create a Pod and run Container for SonarQube

The below command creates a pod named “sonarqube-pod” and defines the port mappings, which will be used for all containers running within this pod.

podman pod create — name sonarqube-pod -p 9000:9000 -p 9092:9092

• podman pod create: This command creates a new pod.
• --name sonarqube-pod: Assigns the name "sonarqube-pod" to the created pod.
• -p 9000:9000 -p 9092:9092: Specifies port mappings for the pod. It maps port 9000 on the host to port 9000 in the pod, and port 9092 on the host to port 9092 in the pod.

The below command creates a new container named “sonarqube-container” within the “sonarqube-pod” pod using the SonarQube image. The container will run in the background.

podman run -d — name sonarqube-container — pod sonarqube-pod sonarqube

• podman run: This command runs a new container.
• -d: Runs the container in detached mode (in the background).
• --name sonarqube-container: Assigns the name "sonarqube-container" to the container.
• --pod sonarqube-pod: Specifies the pod ("sonarqube-pod") to which the container should be added.
• sonarqube: This is the name of the image you want to use to create the container. In this case, it refers to the SonarQube image.

if you check the pods and the containers using the commands in the below image you can find that the pod is created for SonarQube and the container created using that pod is running without any issues.

You can now visit http://localhost:9000 to verify that SonarQube is operational. The default credentials for the initial login are both “admin.” Upon your first login, you’ll be prompted to update your password.

Create React project

Now to see that Sonarqube is working with React we need to create a React app and add some test cases and configurations for SonarQube.

Create a React App

First, let's create a project named “sonarqube-test” using the below command.

npx create-react-app sonarqube-test --template typescript
cd sonarqube-test

Install the Necessary Packages

Next, we need to install the “sonarqube-scanner” package and “jest-sonar-reporter” package.

The “sonarqube-scanner” works like a code inspector for our project, checking for ways to make our code better. After it’s done, it sends its findings to the SonarQube application, helping us improve how we build software.

The “jest-sonar-reporter” is like a translator for your tests. It takes the report that Jest generates after running tests and transforms it into a format that SonarQube understands. This helps SonarQube to see your test results and code coverage in a way that makes sense to it, making it easier to keep track of how well your code is tested.

npm install --save-dev sonarqube-scanner jest-sonar-reporter

Create SonarQube Configuration File

To add SonarQube configurations, navigate to your project’s root directory and create a file named “sonarqube-scanner.js”. Then, include the following configurations

Let's see why we put those configurations

• serverUrl: This specifies the URL of your SonarQube server. In this example, it’s set to, http://localhost:9000Which assumes the SonarQube server is running locally on port 9000. Adjust this URL to match the actual location of your SonarQube server.
• sonar.sources: This points to the directory where your source code is located. In this case, it’s set to ./src, indicate that the source code is in the src directory.
• sonar.exclusions: Excludes specific files from analysis. Files matching patterns like *.spec.js, *.test.js, *.test.jsx,*.test.tsx , *spec.jsx and *.spec.tsx are excluded, typically denoting test files.
• sonar.sourceEncoding: Sets the character encoding for the source code files. UTF-8 encoding is used in this example.
• sonar.tests: Specifies the directory containing test files, which is ./src in this case.
• sonar.test.inclusions: Defines the patterns of test files to include in the analysis. It includes files matching patterns like *.spec.js, *.test.js, *.test.jsx,*.test.tsx , *spec.jsx and *.spec.tsx within the ./src directory.
• sonar.javascript.lcov.reportPaths: Points to the location of the code coverage report in LCOV format. In this example, the report is expected to be at ./coverage/lcov.info.
• sonar.testExecutionReportPaths: Specifies the location of the test execution report. It’s set to ./reports/sonar-report.xml

Configuring package.json

Next, you need to update your “package.json” file, Update the test script

"scripts": {
....
  "test": "react-scripts test — watchAll=false — coverage — testResultsProcessor jest-sonar-reporter"
....
},

• --watchAll=false: We use this to prevent React from asking us how we want to run our tests every time. We simply want to run all tests without any questions, so we turn off this feature.
• --coverage: This command tells Jest to keep track of how much of our code is covered by tests and show us the results.
• --testResultsProcessor jest-sonar-reporter: We use this to make sure that Jest presents the results in a way that SonarQube can understand and use effectively. It's like formatting the test results in a language that SonarQube can easily read.

Also, add the below configurations to your “package.json” file

"jest": {
  "collectCoverageFrom": [
    "**/*.{js,jsx,tsx}","!sonarqube-scanner.js"
  ],
  "coverageReporters": ["json", "lcov"]
},
"jestSonar": {
  "sonar56x": true,
  "reportPath": "reports",
  "reportFile": "sonar-report.xml",
  "indent": 4
}

• "collectCoverageFrom": [...]: This configuration specifies the files that Jest should collect code coverage information from. It uses the glob pattern to match files with specific extensions (js, jsx, txs). The "!sonarqube-scanner.js" part excludes the sonarqube-scanner.js file from coverage calculations. In simple terms, this tells Jest which files to consider when calculating code coverage.
• "coverageReporters": [...]: This configuration defines the format in which Jest should report the code coverage results. "json" indicates that coverage data should be output in JSON format, and "lcov" indicates that it should also generate an LCOV report, which is a widely used format for coverage reporting.
  – "jestSonar": {...}: This section contains configurations specifically related to the jest-sonar-reporter package, which helps format Jest's output for use with SonarQube.
  – "sonar56x": true: This flag indicates that you're using SonarQube version 5.6 or later. It ensures that the reporter generates the output in a format compatible with this version or higher.
  – "reportPath": "reports": Specifies the directory where the SonarQube reporter should generate the report files. In this case, the reports will be created in a directory named "reports".
  – "reportFile": "sonar-report.xml": This sets the name of the report file that will be generated. The file will have the XML format expected by SonarQube.
  – "indent": 4: Determines the indentation level for the generated XML report. This value ensures the report is well-formatted and easy to read.

Great! With our application’s configuration now complete, it’s time to introduce a code smell in “App.tsx” as below and check this is working as we expect.

Now you can run npm run test to run the test command and it will generate two folders; reports which include the “sonar-report.xml “file and coverage folder which contains “icov” details

Now run the below command on your terminal

node sonarqube-scanner.js

Probably you will run into error like this

this means you need to go to the file path and add your credentials in “sonar-scanner.properties” file. In my case, the file path is “/Users/maneesharajapaksha/.sonar/native-sonar-scanner/sonar-scanner-4.7.0.2747-macosx/conf/sonar-scanner.properties”

sonar.login =admin //your sonarqube username
sonar.password=123123 //your sonarqube password

Let's run the command again.

Successful execution

Now, if you navigate to http://localhost:9000/projects, you will be able to see your project listed in SonarQube. It also displays the code coverage information. Upon entering the project, you will find comprehensive details about the SonarQube analysis.

SonarQube analysis summary

Code smell exists in the project (the one we created)

References

Getting Started | Create React App

Podman Installation | Podman