Introduction​

Last week at R2Devops, I had the chance of writing a VSCode extension. Its purpose is to display the Public Marketplace of R2Devops once a .gitlab-ci.yml file is opened. This article will describe the process of creating a VSCode extension that shows a React Webview.

Writing a VSCode extension​

The first step to create a VSCode extension is to create the extension folder and run npm init to create the package.json file. Then we can use the VSCode Yeoman extension generator to create the skeleton of the extension.

$ npm install -g yo generator-code
$ yo code

Anatomy​

Here is the basic structure of the extension

.
├── .vscode
│   ├── launch.json     // Config for launching and debugging the extension
│   └── tasks.json      // Config for build task that compiles TypeScript
├── .gitignore          // Ignore build output and node_modules
├── README.md           // Readable description of your extension's functionality
├── src
│   └── extension.ts    // Extension source code
├── package.json        // Extension manifest
├── tsconfig.json       // TypeScript configuration
├── webview-ui      // The webview directory that contains the React stuff

Each VS Code extension must have a package.json as its Extension Manifest. The package.json contains a mix of Node.js fields such as scripts and devDependencies and VS Code specific fields such as publisher, activationEvents and contributes. You can find description of all VS Code specific fields in Extension Manifest Reference. Here are some most important fields:

• name and publisher: VS Code uses <publisher>.<name> as a unique ID for the extension. For example, the Hello World sample has the ID vscode-samples.helloworld-sample. VS Code uses the ID to uniquely identify your extension.

• main: The extension entry point.

• activationEvents and contributes: Activation Events and Contribution Points.

• engines.vscode: This specifies the minimum version of VS Code API that the extension depends on.

Here are the basics, for further details, you can check the complete anatomy on the VSCode documentation.

Now that we have our Extension skeleton, we can start the design part with React.

In the world of CI/CD, there is currently a notable absence of projects that facilitate the knowledge sharing and collaboration among developers. This often results in developers duplicating efforts and reinventing the wheel. To address this issue, initiatives like R2Devops and to be continuous have emerged. These projects promote collaboration and innovation within the open source community, aiming to improve the quality and reusability of code in the world of CI/CD. Let's take a closer look at those projects 👇

What are R2Devops & to be continuous?​

Both R2Devops and to be continuous are open-source projects that aim to simplify the process of creating CI/CD pipelines for developers on GitLab.

The R2Devops platform offers a marketplace of open source CI/CD templates that are versioned & documented. This allows developers to quickly and easily access a range of pipeline templates, saving them time and effort in building and maintaining their own pipelines from scratch.

#more

When it comes to implementing a continuous integration and continuous delivery (CI/CD) pipeline, developers are often faced with a plethora of options. However, finding a reliable and effective solution can be a daunting task. That's where R2Devops comes in 🔥

What is R2Devops GitLab CI/CD Marketplace?​

R2Devops is an open source community that provides a marketplace of ready-to-use CI/CD templates for GitLab. Our mission is to provide a collaborative space for developers to find, share and contribute to CI/CD templates. We propose the R2 standard which has the value of providing templates that are documented, versioned and configurable.

In 2020, my co-founder Aurélien Coget and I started our own consulting business, helping other companies to develop their DevOps methodologies. We both have pronounced engineer mindsets, I should point out at this stage.

Begin in CI/CD​

Our main focus was on CI/CD (continuous integration/continuous deployment). We offered a way to automate testing, building, and deployment of clients’ software. Our clients were happy with the value we provided, and we grew quickly to a staff of eight.

However, we felt like we were reinventing the wheel every time. Creating a CI/CD pipeline requires considerable effort. After all this effort, you have something that’s great for your customers, but you also create a single point of failure in their development workflow.

Because, if one day the pipeline stops working, the developers can’t code anymore. So it’s become really critical.

#more

CI/CD is nowadays mandatory to ensure a good developer experience. It’s primordial to test your code, ensure security, package, build documentation, deploy…
Today, the challenge is to do all of this faster and faster, while maintaining a high standard of quality. Fortunately, R2Devops can simplify your CI/CD processes and ease the updates of your configuration.

Why should you use R2Devops for your CI/CD configuration?​

As you probably know, configure a strong CI/CD pipeline requires a lot of knowledge, and you spend too much time doing it. Another negative point is that developers usually rewrite their code from a project to another because they don’t centralize their code.

R2Devops is a collaborative and open-source platform of CI/CD jobs, made by developers for developers. Using the platform, it’s the promise to save a considerable amount of time and avoid code duplication. You need only a few clicks to implement a powerful ready-to-go pipeline.In addition, R2Devops also has a strong community of DevOps developers that will help for every question you have about CI/CD.Let’s see how to use the hub to configure a strong pipeline 👇

#more

We gathered for you the tips and tricks from people already doing CI/CD. It’s all the advices they would have love to get when they begin their own journey, learned (sometimes) the hard way! 👏

Tips n°1: think your Git workflow strategy​

It all starts here: your branch strategy will impact your CI/CD pipelines. You need to think of it before building your pipeline, in order to make sure it will be the more efficient possible!

You can find some good Git branch strategy on GitKraken. You can also use the tool to visualize all your branches for your projects!

Here is the GitHub flow we prefer and use at R2Devops:

#more

CI/CD increases the frequency of application distribution through automation. Indeed, it automates the process at the application development stage. The main concepts related to the CI/CD approach are Continuous Integration, Continuous Delivery and Continuous Deployment. CI/CD is a best practice for DevOps development. Today, many platforms exist to help you to set up your CI/CD pipeline. GitLab is one of them! Let’s see how this one works.

How to normally implement a CI/CD pipeline on GitLab?​

Implementing a CI/CD pipeline can be scary if you don’t know where to start. Let’s see how you can implement it on GitLab!

The first step: define stages​

In order to set up your pipeline, the first thing you need to do is to define the stages. They are really important in CI/CD because they define when a job will be executed.

A typical GitLab pipeline may consist of four steps, executed in the following order:

1. Build
2. Test
3. Staging
4. Production

#more

You probably already heard about CI/CD. If not, we recommend you to read those two articles about Continuous Integration and Continuous Deployment.

As a reminder, a job is a set of instructions to perform actions on your project. Comining several jobs together is the key to create a powerful pipeline. We will explain to you why you should use R2Devop’s official jobs. 👇🏼

Guaranteed security with official jobs​

On r2devops.io, you will find a library of CI/CD jobs, some are officials and some are published by the community. Official jobs are jobs written or reviewed by R2Devops’ technical team. The community ones are personal jobs put online by the community, without examination from us.

All our official jobs go through a strong security pipeline. We made it to ensure tthey are all safe to use in your pipelines! Here is a schema of our security pipeline, where you can retrieve all the steps:

#more

You are not sure if you should implement a CI/CD pipeline in your development project? We explain to you why indeed you should! Check all the benefits you can pull from Continuous Integration, Delivery and Deployment. 👇

Improve your code quality and processes​

First things first: continuous integration, or CI. It’s the process to continuously have faith and control of the lifecycle of your code (I know, it’s quite obvious).

Continuous and safe integration of your code​

The CI part of your pipeline is where you test your code to ensure its quality and safety. You can do different kinds of tests: static or dynamic! They can all be in the same stage of your pipeline, or you can create 2 stages and realize your static tests before the dynamic ones.

Plus, you can easily add linters, to ensure a certain level of quality in your code, and make sure all your team respects the same standards.

Obviously, you can do both things by hand, but it will take hours! With the rights jobs in your CI pipeline (for example: megalinter, python test, … ), it would be done automatically in a few minutes. ✌️

#more

What are fixed version? Is it really dangerous to use the Latest version of a CI/CD template? We answer your questions!

Some insight about version​

Following semantic versioning, every time an owner applies changes to their CI/CD template, a new version should be released. They are 3 types of changes, each one corresponding to a number: X.Y.Z.

• Z are patches, meaning bug fixes which don’t change the CI/CD template.
• Y are minor modifications, improving the solution, and are backward compatible.
• X are major changes that are NOT backward compatible.