Using VS Code Extension for Azure Pipeline–Part1

Visual Studio Code is becoming a popular code editing tool in all platforms, Recently VS Code was added with Azure Pipeline extension which can generate YAML based pipeline code. The extension assists in writing YAML pipeline code providing IntelliSense. Let’s look at how we can get started with the Azure Pipeline extension to generate a YAML base pipeline.
Getting the GitHub Repo Ready
As the first step create a public repo in the GitHub (you can do with private repos as well).

Then we need to create an API token to access this public repository. For that go to your account settings.

In the settings click Developer to get the developer settings.

In the developer settings Personal Access Tokens and generate a token.

Set the scope to public repos (since we have created a public repo) and generate the token.

Copy and keep the token in a safe place.

Get the VS Code Ready with Azure Pipelines Extension
Open the VS Code and click on Extensions icon or press Ctrl+Shift+X. Then search for Azure Pipelines and install the extension.

Now you have to Clone the GitHub repository. You can copy the clone URL from GitHub and press Ctrl+Shift+P to launch the command palette of VS Code. Then type git:Clone and provide the clone url of GitHub. Clone the GitHub repo to a local folder.
Generating Code
Install .NET Core SDK 2.2 in your machine if you have not already done. You can download .NET Core SDK from here https://dotnet.microsoft.com/download.
Open the terminal in VS Code and type dotnet new webapp to create ASP.NET Core Web Application.

Then commit and push the code to GitHub using VS Code.
Creating Azure Web App
In Azure portal create a new resource group and create a new web app in the resource group with .NET Core 2.2 as the runtime.
Generating the YAML Pipeline with Azure Pipelines Extension
In the File explorer of VS Code you can right click and click Configure Pipeline to start generating the YAML pipeline.

Or you can press Ctrl+Shift+P to launch command palette. The search for Azure pipelines and slect the command Azure Pipelines: Configure Pipeline and press enter.

You have to select the template for pipeline as the next step.

Once start configure pipeline you will be prompted to log on to your Azure account in VS Code.

Sign in with your Azure account credentials. Then you will be prompted to GitHub authorization. Provide the Personal Access Token we have generated earlier with GitHub and press enter.

Then you will be prompted to select an Azure subscription from your account. Select the subscription where you have created the new web application.

Next you have to select the web app.

Then the generator will create an Azure DevOps account.

The it will connect your Azure subscription with the pipeline.

The YAML file for pipeline will be created in the repo and you will be requested to commit and push it.

It would be a basic YAML template which would archive the project content and deploy it to the Azure web app.

Let’s do improvement to this YAML in the next blog. For now, just commit and push which will initiate a configuration of the pipeline in Azure DevOps and then it will execute it to deploy.

Once completed you can see a notification in VS code which let you browse the pipeline.

The pipeline is executed and Azure WebApp is deployed with the contents of the project.

However if you check the web app you will fined it is not showing the .NET core sample web app. The generated YAML pipeline has not compiled and published the web app. It has just deployed the web project files as it is. You can inspect in Azure Kudus the files deployed.

In the next post let’s try to explore how to develop the YAML pipeline with VS Code to properly build and deploy the .NET Core web app.