Bring Code Quality and Security to your CI/CD pipeline

Rate this content
Bookmark

In this workshop we will go through all the aspects and stages when integrating your project into Code Quality and Security Ecosystem. We will take a simple web-application as a starting point and create a CI pipeline triggering code quality monitoring for it. We will do a full development cycle starting from coding in the IDE and opening a Pull Request and I will show you how you can control the quality at those stages. At the end of the workshop you will be ready to enable such integration for your own projects.

Elena Vilchik
Elena Vilchik
76 min
29 Mar, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Workshop introduces Sonar products for code quality and security, including SonarLint, SonarQube, and SonarCloud. It covers setting up SonarLint, configuring rules in SonarCloud, and connecting SonarLint to SonarCloud. The Workshop also explains how to configure GitHub Actions for running tests and generating coverage, and how to use SonarCloud's quality gate and new code analysis. Sonar Cloud supports multiple languages and platforms and has a strong community support system.

1. Introduction to Sonar Products and Plan

Short description:

I will first present myself and Tibor, developers from Sonar. We'll discuss using Sonar products for code quality and security in your project CI. The plan includes eight models for setting up project quality analysis. Sonar provides code quality tools, including SonarLint for instant feedback while coding, SonarQube as a self-managed tool, and SonarCloud as a cloud-based tool.

I will first present myself. Myself and Tibor, so we are both developers from the Sonar Source company or now we call it Sonar and we are both developers of the JavaScript analyzers and today we will be speaking about how you can use the products developed by Sonar for bringing code quality and security into your project CI. We will see this with the Sonar cloud and Sonar Linux. I'm not sure if you heard of this product but definitely you will learn about it soon.

I will show you the plan. Let's say it's one hour and a half but that's a rough estimation. Maybe it will be faster. It depends on how things are going. So here is the plan. I will not just go over it but you have an understanding that there will be eight models. Each model is a baby step on setting up the pipe of your project quality analysis and we will go one by one.

I will stop sharing these slides. Now let's start slowly with the products which we're going to discuss today. So Sonar is a company which provides code quality tools. This is, let's say, an ecosystem. SonarLint is an extension for the IDE, which gives you instant feedback while you're coding. SonarQube is a self-managed tool, so you will need to host it yourself. And SonarCloud is a cloud-based tool which is hosted by Sonar. So you just buy a subscription there or it is free for open source projects and you just use it. So today for the simplicity, we will use SonarCloud, of course, so that we don't need to take care of setting up the SonarQube.

2. Forking the Project and Setting Up SonarLint

Short description:

Let's start by forking the simple small project from MDN. Fork it into your organization and clone it locally. Open the project in VS Code and focus on the 'source/app' file. Install the SonarLint extension and address the reported code problems. You can configure the SonarLint rules and disable any unnecessary ones. Finally, find the rule about shorthand syntax.

So let's start and I will ask you in the next slide, on the slide number six. There is a link. So this is, I have it open already, that's the fork of the simple small project. This is a project from MDN, I forked it and I changed it a tiny bit to have it more appropriate for our purposes. So, could you please now fork this repository to your organization? So you have this fork button over here. I will not do it, because I have already have two. You fork it into your organization where you have rights. And so you press here and you should see the organization here and you need to press it. As soon as you have forked it, please open it, so you should see your, I don't know, John slash todo react. And now you should, you can clone this project locally. You can copy the SSH link to it. And you can clone the repository locally with git clone and insert this link. So I just have my some empty directory which I created for our workshop for devop.js and I just clone it in there. So we have cloned the wrapper and now let's go to VS Code.

So VS Code is one of the ideas which is supported by Sonor lint. I picked it up because it's the most common idea for the JS development. Also JetBrains ideas are supported, Eclipse, Visual Studio. I think that's it. So let's open our project into this. We'll just use the menu here. Open folder. And I will open this project here. So let's open the file source. I don't know where I got the file name. So let's open the file source slash app. So this will be the file we will be focusing today. So you might ignore the rest. So that's a Simple React project, which does the addition of to-do items, so your, I don't know, daily tasks or whatever. So it's a small demo project based on YouTube's yarn. So you can install yarn dependencies, while it's not in fact so much required now. And now let's install the Sunerlint extension.

So in this extensions tab in VS Code, where these four squares, you can just type Sunerlint and it's on the top and you will click on the install button. And it is installing and here it is. And instantly we are getting some underlined code. So this is sunerlint telling us that there are some problems in the code, or things to improve for the maintainability purposes. For example, there is a commented code here which might be confusing for maintainers. Here you have an import from React two times so you can merge these imports to be more concise, etc. So we have different issues here. In the VS Code at the bottom you have this warning, at the bottom in this tab you see the Sonor Lint reporting you the problems in the code. So there are warnings. Okay, I'm not sure what does this icon meaning. In Sonor Lint you can configure the rules. So if you open this explorer tab, the first tab where you see the files at the bottom there is a Sonor Lint rules tab. It's not super handy but that's what VS Code gives us. So you have the list of rules here and for them, those rules which are activated have on and those which are deactivated have off. So we have this default set of rules, which is running by default, which we expect will satisfy everybody, but for sure you might want to disable something. For example, here we have like, okay you don't need to create this variable, just directly return this rule or this expression. So you might want to disable the variable, the rule and you just can click it from here. Also for each rule you have a description. You can also access it from this bulb, and you have here description of the rule and examples examples of good and bad code, and the last thing we're gonna do now is let's find in this list of the rules the rule about shorthand syntax.

Watch more workshops on 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.
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
JSNation 2022JSNation 2022
99 min
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
WorkshopFree
Matthew Salmon
Matthew Salmon
npm and security, how much do you know about your dependencies?Hack-along, live hacking of a vulnerable Node app https://github.com/snyk-labs/nodejs-goof, Vulnerabilities from both Open source and written code. Encouraged to download the application and hack along with us.Fixing the issues and an introduction to Snyk with a demo.Open questions.
Passwordless Auth to Servers: hands on with ASA
DevOps.js Conf 2022DevOps.js Conf 2022
32 min
Passwordless Auth to Servers: hands on with ASA
WorkshopFree
E. Dunham
E. Dunham
These days, you don't need a separate password for every website you log into. Yet thanks to tech debt and tradition, many DevOps professionals are still wrangling a host of SSH keys to access the servers where we sometimes need to be. With modern OAuth, a single login and second factor to prove your identity are enough to securely get you into every service that you're authorized to access. What if SSHing into servers was that easy? In this workshop, we'll use Okta's Advanced Server Access tool (formerly ScaleFT) to experience one way that the dream of sending SSH keys the way of the password has been realized.
- we'll discuss how ASA works and when it's the right tool for the job- we'll walk through setting up a free trial Okta account to use ASA from, and configuring the ASA gateway and server on Linux servers- we'll then SSH into our hosts with the ASA clients without needing to supply an SSH key from our laptops- we'll review the audit logs of our SSH sessions to examine what commands were run
JS Security Testing Automation for Developers on Every Build
TestJS Summit 2021TestJS Summit 2021
111 min
JS Security Testing Automation for Developers on Every Build
WorkshopFree
Oliver Moradov
Bar Hofesh
2 authors
As a developer, you need to deliver fast, and you simply don't have the time to constantly think about security. Still, if something goes wrong it's your job to fix it, but security testing blocks your automation, creates bottlenecks and just delays releases...but it doesn't have to...

NeuraLegion's developer-first Dynamic Application Security Testing (DAST) scanner enables developers to detect, prioritise and remediate security issues EARLY, on every commit, with NO false positives/alerts, without slowing you down.

Join this workshop to learn different ways developers can access Nexploit & start scanning without leaving the terminal!

We will be going through the set up end-to-end, whilst setting up a pipeline, running security tests and looking at the results.

Table of contents:
- What developer-first DAST (Dynamic Application Security Testing) actually is and how it works
- See where and how a modern, accurate dev-first DAST fits in the CI/CD
- Integrate NeuraLegion's Nexploit scanner with GitHub Actions
- Understand how modern applications, APIs and authentication mechanisms can be tested
- Fork a repo, set up a pipeline, run security tests and look at the results

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

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
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
Why is CI so Damn Slow?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
The State of Passwordless Auth on the Web
JSNation 2023JSNation 2023
30 min
The State of Passwordless Auth on the Web
Can we get rid of passwords yet? They make for a poor user experience and users are notoriously bad with them. The advent of WebAuthn has brought a passwordless world closer, but where do we really stand?
In this talk we'll explore the current user experience of WebAuthn and the requirements a user has to fulfill for them to authenticate without a password. We'll also explore the fallbacks and safeguards we can use to make the password experience better and more secure. By the end of the session you'll have a vision for how authentication could look in the future and a blueprint for how to build the best auth experience today.
End the Pain: Rethinking CI for Large Monorepos
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
End the Pain: Rethinking CI for Large Monorepos
Scaling large codebases, especially monorepos, can be a nightmare on Continuous Integration (CI) systems. The current landscape of CI tools leans towards being machine-oriented, low-level, and demanding in terms of maintenance. What's worse, they're often disassociated from the developer's actual needs and workflow.Why is CI a stumbling block? Because current CI systems are jacks-of-all-trades, with no specific understanding of your codebase. They can't take advantage of the context they operate in to offer optimizations.In this talk, we'll explore the future of CI, designed specifically for large codebases and monorepos. Imagine a CI system that understands the structure of your workspace, dynamically parallelizes tasks across machines using historical data, and does all of this with a minimal, high-level configuration. Let's rethink CI, making it smarter, more efficient, and aligned with developer needs.
Atomic Deployment for JS Hipsters
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!
How to Build CI/CD Pipelines for a Microservices Application
DevOps.js Conf 2021DevOps.js Conf 2021
33 min
How to Build CI/CD Pipelines for a Microservices Application
Top Content
Microservices present many advantages for running modern software, but they also bring new challenges for both Deployment and Operational tasks. This session will discuss advantages and challenges of microservices and review the best practices of developing a microservice-based architecture.We will discuss how container orchestration using Kubernetes or Red Hat OpenShift can help us and bring it all together with an example of Continuous Integration and Continuous Delivery (CI/CD) pipelines on top of OpenShift.