Sonar cloud integration with Github repository for React Native App — Part 1.
We usually come across a situation where we need to suggest a solution to improve code quality, remove code that is exposed to a security threat, day-to-day bugs in code, vulnerability, duplication, and code coverage in a new project or existing project. We usually follow a PR process to review the code but that is too time-consuming and we can miss many important checkpoints. We need to automate the PR and merge process to perform all the checks and provide the consolidated report that can be shared across all stakeholders after each release and code reviewed at the PR level itself.
Sonar cloud is a solution to your above requirements. I personally become a fan of this tool :D. Let’s start real work.
Setup the Sonar cloud with Github:
Please follow these steps to connect your GitHub repository with sonar cloud for a react native project.
- Open sonar cloud web site i.e. https://sonarcloud.io and click on Github icon
2. Authorize Sonar Cloud to connect with Github
3. Import your project from Github
4. Install Sonar Cloud on Github
5. Create an organization on Sonar Cloud
6. Choose your plan, Select a free plan for public repositories. It means your code will be shared with the sonar cloud and visible to others. Select a paid plan if want to hide a source code.
7. Select the repository you want to analyze
8. Choose the analysis method, select GitHub actions
9. Follow the steps provided by Sonar Cloud
a. Copy the SONAR_TOKEN and Value
b. Save the Sonar Token in Github Project -> Settings -> Secrets, please see the screenshot attached:
c. Create or update (if you already have) the build.yml file, Save the file in your project root directory on Github i.e -> .github -> workflows -> build.yml you can get the .yml by following the steps from sonar cloud while setting it up, please see the screenshot attached:
d. Now you need to set up the properties for Sonar Cloud in Github, Create a new file named sonar-project.properties in the root directory of your app project, Copy the setting provided by Sonar Cloud, and update your file, for reference please see the screenshot attached
Now your project and Sonar Cloud (Github) are successfully integrated.
Testing the Quality Gate :
In order to test your project i.e Github synced with SonarCloud Please follow these steps:
PR Test :
- Create a new branch from master e.g named new branch demo-branch push the code on GitHub and create a Pull Request.
- When a pull request is created on Github it will automatically start the quality gate check by running the pipeline specified in the build.yml file and it will show you in progress this is now synced with Sonar Cloud, running and scanning your code, pls see the screenshot below for reference.
3. Once the scanning is done it will give you result like this, if no issues it will be like this:
On Sonar Cloud it will look like this:
4. If there is an issue it will be like this on the Github log for that PR.
Click on details to get a detailed report, it will give you the link for the Sonar Cloud panel when you click on that it will report like this:
Merge Test :
Merge test can be only done on a long live branch in our case it is the master branch.
Sonar cloud best works with the master branch as a default long live branch if we try to change it can create some other issue. Once you will merge the PR into the Master branch it will generate an overview report like this,
Finally, The basic quality gate test is done :D.
What Next? Code Coverage value.
If you have noticed code coverage is showing zero always for PR as well Merge. This we can not achieve directly we need more steps to do that. We need to write a unit test script, generate a report, create a new pipeline to do the code coverage as per the number of unit test done.
Go the Part -2 of this blog series for the Sonar cloud integration with Github repository for React Native App — Part 2.
If you have any suggestions and questions you’re free to ask and suggest.
Have a great day guys :D.
