You're 5 Minutes Away from Code Quality & Code Security

Rate this content
Bookmark

In this session I'll use a live demo to show how effortless it is to add Code Quality and Code Security to your project with SonarCloud - not just for now but for every commit going forward.

This talk has been presented at DevOps.js Conf 2021, check out the latest edition of this JavaScript Conference.

FAQ

Sonar Cloud is a SaaS product designed to add code quality and code security to your repository.

To log into Sonar Cloud, choose your ALM (Application Lifecycle Management) tool for signing in, such as GitHub, which will create your account. If you already have an account, simply log in to access your projects.

To set up a new project in Sonar Cloud, click the PLUS button to analyze a new project. Choose an organization from your ALM, select the repositories you want to analyze, and follow the steps to name and set a key for your organization. Finally, click 'Setup' to start the analysis.

Sonar Cloud is free for open source projects.

During the automatic analysis, Sonar Cloud checks your code and runs an analysis on the latest version of the master branch. It will continue to run analyses on every commit to the main branch and every new pull request, reflecting the results in your PR in GitHub.

Yes, Sonar Cloud can analyze multiple programming languages within a single project. For example, it can analyze both JavaScript and HTML code.

Sonar Cloud detects various issues such as bugs, vulnerabilities, and code quality problems. It provides a list of issues along with their context, making it easy to understand and fix them.

Yes, Sonar Cloud provides rule descriptions and code samples to help you understand why an issue is a problem and how to fix it. It shows examples of broken code and the corresponding fixed code.

Sonar Cloud helps identify security vulnerabilities such as injection attacks and provides easy-to-understand visual flows of these vulnerabilities across functions and files, making it easier to address them.

Yes, you can select specific repositories to give Sonar Cloud access to, rather than granting permissions to all repositories.

G. Ann Campbell
G. Ann Campbell
7 min
01 Jul, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Sonar Cloud makes it easy to set up projects for code quality and security analysis. It automatically analyzes code and provides insights into bugs, vulnerabilities, and other issues. The UI helps understand vulnerability flow across functions and files. Sonar Cloud supports multiple languages and offers rule descriptions and code samples for best practices. Overall, it simplifies code analysis and helps developers improve code quality.

1. Introduction to Sonar Cloud

Short description:

Hi, I'm Ann Campbell with SonarSource. Today, I want to show you how easy it is to set up your projects with code quality and code security. I'll start by logging in with my GitHub account and selecting the repositories I want to analyze. Then, I'll create my organization and choose the repositories to analyze. It's that simple!

Hi, I'm Ann Campbell with SonarSource. I don't have any slides for you today. I'm going to try something that's a little bit risky given the time constraints, but this should work out okay. So what you're seeing right now is the front page of Sonar Cloud, which is a SAS product, a SAS-SAS product, to add code quality and code security to your repository. And I want to show you today how easy that is.

So I'm going to start by logging in. Now I already have an account, so you're going to see that reflected in my experience. But as a new user, all you would have to do is choose your ALM to sign in with, and it creates your account for you. So I'm going to start with GitHub, because I have an account there. And it logs me in and shows me the projects that I have access to. But that's not what I want to show you today. What I want to show you today is how easy it is to set up your projects with code quality and code security.

So I'm going to go to the PLUS to analyze a new project. Now it asks me if I want to analyze a project from one of the existing organizations that I already have access to. But again, that's not what I want to show you today. I'm going to show you creating an organization from my ALM. So I'm going to choose GitHub. And when I get here, it says which organization do you want on GitHub? I'm going to choose my private one. And now GitHub is asking me to grant permissions. Now, I don't want to give Sonar Cloud, I'm just trying this out, right? So I don't want to give Sonar Cloud permission to all my repositories. I'm going to select the repositories that I've chosen, I've forked recently for this demonstration. So I type in my repositories and there are a couple that I want to show you. And once I've got them selected, I can save that. That brings me back to Sonar Cloud, where I've got a couple more steps to get through. So I have to name, set a key for my organization. I'm going to go with the default. I do want the free plan, Sonar Cloud is free for open source projects. So I'm going to create my organization like that. Now Sonar Cloud is asking me, of the repositories it has access to, which ones I want to analyze? I want to analyze both of them. Now I click Setup.

2. Code Analysis and Issue Exploration

Short description:

Sonar Cloud automatically analyzes my code, eliminating the need for CI/CD setup. It analyzes the latest version of master and runs the analysis for every commit and new PR on my main branch. The results are reflected in my PR in GitHub. I have zero bugs, some vulnerabilities, and other issues. Let's dive into the issues and look at the blocker issues and rules. One of the rules is that database queries should not be vulnerable to injection attacks. This application demonstrates vulnerabilities, and the UI makes it easy to understand the vulnerability flow across functions and files. Now, let's switch to another project and explore something on the Issues page under the list of languages.

And what's happening now is Sonar Cloud is checking out my code. And it's taking a look at it to see if it can automatically analyze it for me. So I don't have to do any CI CD setup here. It's just going to handle it for me.

So it looks at my code, it says, yes, I can run an automatic analysis on this. And it's analyzing the latest version of master. And from this point forward, for every commit on my main branch, and for every new PR, it's going to run that analysis for me, reflects the results in my PR in GitHub, with a check on my PR.

So now my little application has already finished analyzing. Let's jump in and see what I've got. So here's my overview. Zero bugs, I've got some vulnerabilities. I've got some other issues, but what I really want to show you here is the issues. So here I've got my list of issues. It's not terribly useful though to just see a list of issues without contact. So I'm going to dive in here. Let's look at the blocker issues, and look at the rules. And I've got database queries should not be vulnerable to injection attacks. So let's see which ones those are. And I'm going to click on this to see the issue in the context of the code.

Now, this application was crafted to demonstrate vulnerabilities. And so what we're seeing here is really compact vulnerability flow. But the reality is that in normal projects, the vulnerability flow is going to span not just functions, but probably pages as well, different files in the project. We've crafted the UI, even though you're not quite seeing that here, to make that flow across functions and files easy to understand. So that's what I wanted to show you in this project.

Now, I'm going to return to my list of projects. And my other one is done analyzing by now. So I want to jump into that one. And again, I've got my overview here at the top. And I want to show you something on the Issues page. And that is here under the list of languages.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
Automating All the Code & Testing Things with GitHub Actions
React Advanced 2021React Advanced 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.
Fine-tuning DevOps for People over Perfection
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Top Content
DevOps is a journey that varies for each company, and remote work makes transformation challenging. Pull requests can be frustrating and slow, but success stories like Mateo Colia's company show the benefits of deploying every day. Challenges with tools and vulnerabilities require careful consideration and prioritization. Investing in documentation and people is important for efficient workflows and team growth. Trust is more important than excessive control when deploying to production.
Why is CI so Damn Slow?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
Slow CI has a negative impact on productivity and finances. Debugging CI workflows and tool slowness is even worse. Dependencies impact CI and waiting for NPM or YARN is frustrating. The ideal CI job involves native programs for static jobs and lightweight environments for dynamic jobs. Improving formatter performance and linting is a priority. Performance optimization and fast tools are essential for CI and developers using slower hardware.
The State of Passwordless Auth on the Web
JSNation 2023JSNation 2023
30 min
The State of Passwordless Auth on the Web
Passwords are terrible and easily hacked, with most people not using password managers. The credential management API and autocomplete attribute can improve user experience and security. Two-factor authentication enhances security but regresses user experience. Passkeys offer a seamless and secure login experience, but browser support may be limited. Recommendations include detecting Passkey support and offering fallbacks to passwords and two-factor authentication.

Workshops on related topic

0 to Auth in an hour with ReactJS
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
MERN Stack Application Deployment in Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Joel Lord
Joel Lord
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
Azure Static Web Apps (SWA) with Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.