Setting up a CI pipeline for deploying your Angular application to Azure using Visual Studio Team Services and GitHub

8 min readMar 30, 2017

Introduction

## Make sure to check out my follow-up post: Automated Angular Unit Testing on Visual Studio Team Services! ##

This post is a step by step guide, explaining one way to setup your very own CI pipeline for your Angular application, taking advantage of the amazing Angular CLI.

We will build a very simple Angular application that we will deploy to an Azure Web App using Visual Studio Team Services (VSTS). We will also hook up VSTS to a GitHub repository, so that a new build and deploy is triggered every time we push to a branch of our choice.

The first part of the post covers creating the Angular application. If you want to skip that part you can either fork the repository that I created for this post or use your own. But keep in mind that this tutorial is using Angular CLI specific settings in a few steps, so if you use an app developed without the CLI you’ll have to do some modifications.

Terms

Angular = Angular version ≥ 2 (official Angular naming guidelines)
VSTS = Visual Studio Team Services (visualstudio.com)

Versions used in this post

Angular: 4.0.0
Angular CLI: 1.0.0

What this blog post is NOT trying to give you

An in-depth introduction to Angular
An in-depth introduction to the Angular CLI
An in-depth introduction to Azure
An in-depth introduction to VSTS
A guide on how Azure and VSTS pricing models work

The steps we will take

Create our small Angular app using the Angular CLI and put it on GitHub.
Create our Azure Web App
Create and configure our VSTS project to build and deploy our app every time we push to our Master branch on GitHub!

Creating our application

The app we will build will consist of three components. The AppComponent, which is the entry component and wrapper of the page, and two child components; RedComponent and BlueComponent. The app component will have two nav links that lets the users navigate between our two child pages Red and Blue. RedComponent will consist of nothing but a div with a red background while BlueComponent will have a blue background. Simple! 😊 The source code for the project we are creating can be found here: https://github.com/fredrik-lundin/angular-ci-example

As mentioned already, we will create our application with help of the Angular CLI. If you are not familiar with the CLI, I recommend you take a look at one the many tutorials on it that exist already. But in a few words, it’s a tool installed via NPM that can help you scaffold Angular components, services, entire projects and much more. It also helps you build and test your applications.

Building the application

If you’ve never developed an Angular application before, make sure you meet the few dependencies on your system that is required (for example installing node.js and npm). See the official documentation for this.

Let’s install the Angular CLI globally and scaffold the application by running the ng new command in our terminal

> npm install -g @angular/cli@latest> ng new angular-ci-example -–routing –-inline-style -–inline-template --skip-tests> cd angular-ci-example

We added the — routingflag which adds a routing module for us that we will use. We also added --inline-style, --inline-templateand — skip-testsso that the CLI will inline styles and templates and skip creating test files.

Add this to the defaults section of your .angular-cli.json file to make these settings apply for every new command we execute when using the CLI

In a real world application, you probably want to separate the html and stlyes from your components, and definitely include tests. We will just add these settings for simplicity!

Next, we generate our two child components

> ng generate component Red
> ng generate component Blue

Modify RedComponent and BlueComponent to look like this

And the AppComponent like this

To configure routing, modify the app-routing-module.ts files like this

We also need to add a web.config file. .NET developers will be familiar with this, others might not. The file has nothing to do with Angular, but is a .NET configuration file. We will use it to instruct our underlying web server on Azure to rewrite all incoming request to serve our index.html file.

We add the web.config file to the root of our src folder:

To tell the CLI to include our web.config when we build our application, we need to add it the the assets array in .angular-cli.json.

The one last piece of code editing we need is to add a build-prod script in our package.json file. We will add the two flags --prod and --aot to the ng build command to optimize our build for production use and compile our templates ahead-of-time.

If you want to run the application locally now, run the npm start command and open localhost:4200 in a browser.

The last step before moving on to Azure is to add the project to GitHub. The CLI has already initialized git for us, so just add the repository to your Github account in the way that you usually do it.

Creating the Azure Web App

Okey, time to create the Azure Web App. Sign up for a free or paid account and log in the Azure portal. Then follow these few steps

Press Create -> Web and Mobile -> Web App

2. Fill out the mandatory fields, pick an existing or create a new Resource Group, pick an App Service plan/Location and finally press Create to create the Web App. Note again that I will not go into details on how pricing, resource groups and service plans work here. Take a look at the Azure documentation to find out more about that!

3. After you’ve pressed Create, you will get redirected to the Dashboard. Wait a few seconds and your new app will show up under All Resources.

And that’s it for Azure. No more work need to be done here!

Setting up CI Build and Deploy with VSTS

Now we have an Angular app on GitHub and an empty Azure Web App — let’s set up the actual Continuous Integration to put it up on the internet!

Configuring VSTS will be very straight forward. Here are the main steps we will take:

Create an Account and Project on VSTS
Connect our GitHub repository to our VSTS project
Configure our build steps

Setting things up

Go to visualstudio.com and login with a windows account (or create one if you have to). If you are not automatically redirected to your profile, click on your name in the top right corner of the screen. Then click Create new account

Pick a name for your account. The account can consist of several projects, so you should probably pick a more generic account name than what I use in this example. Also, pick a region that fits you. I forgot to do that in the screenshot below, but you shouldn’t :)

Connecting the GitHub repository

With our VSTS project up and running, we need to add a Service Endpoint to connect it to our newly created GitHub repository.

Press the settings icon -> Services -> New Service Endpoint -> GitHub

Choose one of the two options to authorize, pick a name for the connection, then finally click OK

Creating the Build Definition

Time to create the actual Build definition. Go to Build & Release -> Builds -> New definition

Select Empty and click Next

In the next dialog, select GitHub as your Repository source, make source Continuous integration is checked (I forgot to circle that in the image below), Default agent queue is set to Hosted, and finally click Create

Click Repository on the small sub-menu, pick the repository containing the Angular app we created, then click Save

Now go to Build and press Add build step… Pick npm install twice and Azure App Service Deploy once.

Our build steps

npm install

The first build step is our npm install. This step will download and install all of our projects dependencies. Leave this one with default settings.

2. npm build

The second build step will perform the building (bundling, minifying, uglifying, etc) of the app. What we instruct it to do is run the build-prod npm script that we added to our package.json file earlier. Edit the build step to look like this

3. Azure App Service Deploy

The third and final build step will be used to the deploy the app to our Azure Web App.

I should note that VSTS has a dedicated Release section for Release Management that can be used separately from the Build. But for simplicity, we will just include deployment as a step of our build in this example.

Pick the correct Azure Subscription, authorize and select your Web App from the App Service Name drop down. Modify the Package or Folder to deploy the $(System.DefaultWorkingDirectory)/dist folder. The reason we do this is because the Angular CLI produces a folder named dist as the output directory when it builds our project.

That’s it! Now make sure to Save, then press Queue new build… to make the magic happen.

To trigger new builds, just push to the master branch of the GitHub repository you have connected and it will kick of automatically. All you have to do is sit back and relax.

Wrapping up

I tried to make this guide very detailed, so I’m hoping at least someone managed to follow along or at least learned something from it! My plan is to make this into a series of post where I can add things like testing, release management, deployment slots and more GitHub integrations like last build status badges, policies for pull requests etc.