How to: Build and deploy an Angular app to Azure using Visual Studio Team Services

This post will guide you on how to build an Angular 4 app using Visual Studio Team Services and then deploy it to an Azure App Service instance.

So let’s review what we’ll need before we begin:

1. You will be required to have an active Visual Studio Team Services account. If you don’t have one you can signup for free here.
2. You will also need to have an active Azure subscription. If you don’t have one you can signup for a free trial here.

Now that we have met the requirements, let’s get started.

Create a new build definition

We will start by signing into your Visual Studio Team Services account and then navigating to the Build & Release tab from the top navigation links to create a build. From here we will click on the New button to define a new build definition.

Next you will choose a template to use for your build. There are a lot of build templates so take a look at what’s available and choose what is most appropriate for your needs. If you don’t see what you want, you can always choose the empty template which is what I’m going to do now and then add the necessary build tasks that make sense for you.

After selecting the empty template you will want to name your build definition, connect your source code repository (Github, Visual Studio Team Services, other) and then start adding build tasks:

Click on the Get sources link on the left side to wire up your source code for the build. In this demo I’m connecting to my personal Github repository:

Now that we have our source code wired up, you’re ready to start defining your build tasks.

Defining your build process tasks

Now that we have our build definition configured to our source repository, it’s time to start adding build process tasks. To do this we click on the Add Task button from the left which will then present a listing of available build tasks (some of which are in preview):

In this post I want to build an Angular app, so I will need to use an npm build task. Using the search box I will type in npm and the listing will then filter out to only show me any npm build tasks. At this time there is one, so I will click on it and then the Add button to add it to my build process:

This will be the configuration for our npm install task:

Next we will need to add another npm build task for running the Angular CLI build command ng build. This will be the configuration for our npm run task:

At this point our build is installing all necessary npm packages and then running an npm command to build the Angular app. Once the app is built, I like to archive the build artifacts in a ZIP file. This will be our configuration for our archive files build task:

Finally we will deploy our app to an Azure App Service instance. To do this you will want to have your Azure App Service already pre-configured. You can checkout this post for details on creating an Azure App Service.

This will be our configuration for our Azure App Service Deployment build task. There are 3 settings you need to set:

1. Select you Azure subscription
2. Select your App Service name
3. Select the package or folder you wish to deploy

Here is a review of the build tasks we created above:

Queue a new build

Once we have our build process defined we can kick off a new build by clicking on the Queue button on the top toolbar:

This will being up the queue build modal where you can define the agent queue to use, the branch to build or a specific commit along with defining build variables, etc. I will select the Hosted agent queue and my master branch. I will then click on the Queue button to initiate the build:

For more information on the differences between the hosted agents, checkout this link for further details.

You should now notice that your build is now queued:

Viewing your build process

You can click on your build at anytime and see detailed output for what is happening during the build process along with view and/or download detailed log files:

Voila, our build is now finished:

Visual Studio Team Services build can also be configured to send out an email when builds succeed and/or fail:

 

Now that I have a successful build, lets browse and take a look at our deployed Angular app: http://blog-angular-deployment.azurewebsites.net/ .

Wrap up

I hope this post helps your build and deploy your Angular apps to Azure. As you can see it’s very straight forward to setup and requires no build infrastructure on your end to make it happen.

Enjoy!

References

Azure free trial

Visual Studio Team Services

Build and release tasks

Hosted agents

Angular

Angular CLI