Azure VSTS Deployment

If you want to deploy LunchOrder web application using Azure, you can follow the instructions below to setup a continuous build environment on the Microsoft Azure platform.

Connecting GIT

Choose any team project and navigate to "Build". Create a new build defintion.

Create build definition

Create build definition Empty Task

Navigate to the "Repository" tab and select the correct repository.

Set build repository

Setting up the build definition

Add build variables

Add the following Build tasks to the newly created build definition:

Visual Studio Build
Publish Build Artifacts
npm
gulp
Publish Build Artifacts

Empty Build Tasks

Building backend WebApi

MSBuild Arguments: /p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:PackageLocation="$(build.stagingDirectory)/webapi" Make sure you select "Restore NuGet Packages".

Backend Solution Parameters

Backend Publish

Building frontend

Frontend NPM Install

Queue a build

Save build

build success

And we should have build artifacts that we can use for later deployment...

build artifacts

Setting up the release definition

After a successful build we can configure our actual deployment.

Create Azure Website

Azure create web app

Set Azure Website Api Virtual Directory

In order to deploy our website frontend but also our website backend to the same website, we need to configure a virtual directory on the web application. Azure web app set virtual directory

Setting up the Deployment Task

Navigate to "Release" on VSTS and create a new Release Definition.

Create release definition

Create release definition2

Add the following Build tasks to the newly created release definition:

Extract Files (extract backend WebDeploy package)
Tokenization: Transform file (adds backend parameters)
Archive Files (overwrite old WebDeploy package)
Azure Web App Deployment => deploys frontend
AzureRM Web App Deployment => deploys backend (WebApi)

release tasks

If you don't have the Tokenization task, you could install it from The extensions MarketPlace (Github source) We use this specific Tokenization Task as it allows us to do a recursive search for a file.

Tasks in detail

Extract files

Archive file patterns: $(System.DefaultWorkingDirectory)/LunchOrder Master Branch/webapi/Lunchorder.Api.zip Destination folder: $(System.DefaultWorkingDirectory)/LunchOrder Master Branch/webapi/unzip extract files task

Tokenization Source Path: $(System.DefaultWorkingDirectory)/LunchOrder Master Branch/webapi/unzip tokenization task

configure variables

Deployment Parameters (more info)

configure variables dialog

Archive Files

Root folder (or file) to archive: $(System.DefaultWorkingDirectory)/Lunchorder Master Branch/webapi/unzip Advanced => Archive file to create: $(System.DefaultWorkingDirectory)/Lunchorder Master Branch/webapi/Lunchorder.Api.zip archive files task