VSTS for beginners: release your web-app to Azure

In the previous post of this series dedicated to VSTS we talked about continuous integration. Now we’ll talk about publishing our Web-App hosted on Azure with the release management tools provided by VSTS. With this kind of tools we can deploy the latest version of our web-app to Azure in complete automation removing manual procedures and human errors. The setup of Azure will be covered in another blog post.


1. Release management

To setup a release we need to open the Build and Release menu and then Releases.


From here we create a new Release definition with the “plus” menu and select Create release definition.


VSTS opens a template browser for use and we choose the Azure App Service Deployment and click Apply.


As we can see the template has been applied and the Pipeline section of the definition needs our attention.
The basic components of a build are:

  • Artifacts: they are the output products of a build process (zip file, NuGet package, msi installer, etc.). A release process takes one o  more artifacts from one or more builds and deploys them into
  • Environments: they are the deployment target of the release process and they represent our infrastructure. Typical examples are Staging and Production.

Setup artifacts source

Now we need to configure the artifacts source of our release to tell VSTS where to get the bits that we want to deploy.  As we can see in the next image we have to click the “+ Add artifact” button.


Now we set a Build as source type and the source. In our case (linked to the previous post) we choose our Parrish Shoes project and the build definition that builds our web-app. Finally we click Add.





Now it’s time to setup the environment. In this basic tutorial we’re going to have only one environment. In a real world scenario you’ll probably have at least a test environment before production.

We click the link under the environment name with the red exclamation mark that’s telling us that some parameters are missing.


The release process in this environment called Environment 1 is composed by only one step that the template added for us: Deploy Azure App Service. If our Azure account is well configured, VSTS will prompt our Azure Subscription and App service Name when we open the respective combo-boxes (step 1 and 2). Now it’s time to save (Step 3).



Release it!

Our release process is completed, now let’s give it a try! In the upper-right side of the screen click Release and then Create release.


In the next screen we’ll use default values and hit Create.


As we can see we have a nice green feedback that a release has been created!


If we click on the name Release-1 we can see that it’s now in progress.


After a couple of minutes the build is ok: succeded! (you may need to refresh manually the page to get the deployment status updated)

(Bonus point) Continuous Deployment

We can deliver our latest version of the web-app without having to start our release process manually by activating the Continuous Deployment trigger. We click the lightning icon in the corner of the artifact source and enable the switch that by default is set to disabled. This way everytime a build is completed successfully the release process will start and our web-app will be updated without effort!



With this blog post we’ve setup a simple release process for a web-app hosted on Azure. With the templates loaded in VSTS we had to complete a few fields to setup the artifact source and the link to our Azure account. We are more confident with the concepts of artifact and enviroment and their role in a deployment pipeline.

An automated process for a real world application can be much more complex than this. However, we can see that automation is a very powerful tool to reduce the global leadtime of our process and deliver features or quality improvements to our users.

In the fast-paced world of today this is the way we want to go through if  we want to give our project a brilliant success!

1 commento su “VSTS for beginners: release your web-app to Azure”


Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.