In this article, I will be looking at connecting Visual Studio Code (VSCode) to Visual Studio Team Services (VSTS) to set up source control and finally create our build in VSTS with the YAML file as described in the first article.
Latest posts by Graham Beer (see all)

This is the second part of our two-part series on building a Windows Server in Azure by using a YAML configuration file in Visual Studio Team Services. In the first part of this article, we looked at creating a connection between Azure and VSTS while looking at JSON and YAML files to deploy.

Before we start, if you want to follow along, I have posted the files in my GitHub repository. The link can be found in the first article, VSTS and Azure: Configuring, infrastructure and config as code - Part 1.

Now let’s look at creating a local Git repository and integrating it with VSTS. Visual Studio Code has a useful Source Control branch to allow us to make changes, commit code, and—with the VSTS extension—sync to VSTS as well.

NOTE: If you haven't already installed Git on your machine, please install from https://git-scm.com/.

From Visual Studio Code, open a PowerShell terminal. Make a directory from where you will be working from:

New-Item -Path 'C:\Repositories\Azure ARM VSTS\' -ItemType Directory

Open the newly created folder within VScode (File -> Open Folder). On the side bar, open the Source Control icon:

VScode source control

VScode source control

At the top of the screen, next to the title of source control, is a small diamond-shaped icon. If you hover over it, it says Initialize Repository. Click on this icon. At this point, we have a local repository all set up. Copy the three files—template.json, parameters.json, and .azure-vm.yml—to our directory.

Type the message first commit and press CTRL + Enter from within VScode.

At this point, we are ready to make our remote Git connection to VSTS.

From the terminal and in the directory of local repository, type git remote add origin with the link we copied from VSTS. To push our code to the VSTS remote repository, type git push -u origin master.

Git commands

Git commands

On the bottom of the screen, you will now see that the connection to VSTS has been made by the name of your project (in VSTS).

VScode connected to VSTS

VScode connected to VSTS

By the two arrows in a shape of a circle (shown in the above screenshot), click and sync the changes to VSTS. A quick check in VSTS shows that the connection and sync has been successful:

Code in VSTS

Code in VSTS                               

Configuring the build in Visual Studio Team Services

Now we have all the pieces in place to set up our build. Using YAML makes this part of the process straightforward. Opening the project gives us the option to Set up build. Taking this option asks us to select a source. For this guide, we have moved our local repository to VSTS, so we will leave it on the default option of VSTS Git.

Setting up build Selecting a source

Setting up build Selecting a source

Leaving the rest of the options the same, select Continue.

Setting up build Using YAML template

Setting up build Using YAML template

Next, we need to select a template to use. After enabling the preview feature earlier on, we now have the option to select YAML, Config as code, or Template.

Once we apply the YAML template, we can add our YAML file and configure the password variable.

Setting up build Config template

Setting up build Config template

When we click on the three periods besides the YAML path box, we can select our YAML file from our local VSTS repository. Change the Agent queue to Hosted.

Finally, we need to configure our variable password. Click on the Variables tab, between YAML and Triggers.

Setting up the build Setting the Password variable

Setting up the build Setting the Password variable

After pressing Add+, type the name of the variable (in this case, to work with the YAML file, name it Password), and then the password you want to use. Using the padlock icon next to the variable will make the variable password secret.

Click back on the YAML tab, and from the top right-hand side, press Save and queue.

Setting up the build Save and queue

Setting up the build Save and queue

A smaller window will be displayed, giving you the option to add a comment and a commit message. Select Save and queue again to start the build.

A green bar will be shown with a link to view your build progress.

VSTS Build link

VSTS Build link

The link, you will notice, is formed from the first line in the YAML file:

name: $(TeamProject)_$(BuildDefinitionName)_$(SourceBranchName)_$(Date:yyyyMMdd)$(Rev:.r)

Clicking the link will display the build screen:

VSTS Build in progress

VSTS Build in progress

If all is going well, you should get a successful build notification:

VSTS Build success

VSTS Build success

Let’s log back into Azure and check that everything is as we expect:

Azure completed setup

Azure completed setup

As you can see, we have our virtual machine, disk storage, network, and security group.

Before we wrap up, one thing to note is that having installed the Visual Studio Team Services extension in Visual Studio Code is an additional feature. When in VScode, by pressing F1 and typing team, you will have some quick links to the project you are working on.

Subscribe to 4sysops newsletter!

Team tasks in VScode

Team tasks in VScode

Working with VScode, VSTS, and YAML is a powerful way to perform automated tasks. I hope you have found this guide to be useful and to have provided some ideas on what you can achieve with YAML in VSTS and connecting VSTS to VScode.

0 Comments

Leave a reply

Please enclose code in pre tags

Your email address will not be published.

*

© 4sysops 2006 - 2023

CONTACT US

Please ask IT administration questions in the forums. Any other messages are welcome.

Sending

Log in with your credentials

or    

Forgot your details?

Create Account