Deploying Your Angular Application To Azure Using Visual Studio Team Services (VSTS)


Introduction

It is no secret by now that the Angular CLI is the preferred method to develop an Angular application due to its simplicity and power at the same time. One of the main advantages of using Angular CLI is that it hides a lot of the ceremony involved in creating an Angular application (deciding on a style guide, setting up the package.json file, setting up the client side build system, setting up unit testing, preparing your code for production, etc.).

This is all great, but one sticky point with developers who are accustomed to working Azure has always been the fact that the Angular CLI doesn't provide much information regarding publishing to Azure. This is by design as the Angular CLI is trying not to be opinionated in terms of how you will host your application. In this post I will show you how to build a CI/CD pipeline with Visual Studio Team Services (VSTS) which will deploy your Angular application to an Azure Web App. I will assume that you have already setup the Angular CLI on your machine and that you have already created the Angular application. I will also assume that you have already carried the proper steps to push your code into VSTS.

Building The Application

As mentioned above I won't go into the details of creating a new Angular application using the Angular CLI, but I would like to point out that we will need to add a web.config file to instruct our underlying web server on Azure to rewrite all incoming request to serve our index.html file:

We will also need to instruct the Angular CLI to include the web.config file as part of the assets to be included when building our application. We can achive that by adding it the the assets array in .angular-cli.json:

Creating the Azure Web App

The next step is to create an Azure Web App which will host our Angular application. You can sign up for a free or paid account and log in the Azure portal.

  1. New -> Web and Mobile -> Web App
  2. Fill out the required fields: 
  3. After pressing "Create" you should now have an Azure Web App created.

Setting Up CI Pipeline With VSTS

In the next steps we will set up our VSTS CI/CD pipeline to push the Angular application to the newly created Azure Web App. Start by creating a new build definition under VSTS:

  1. Build and Release -> Builds -> New
  2. Add an npm task to install the npm packages required by the Angular application
  3. Add another npm task to build the application and create the dist folder:
  4. Add a publish artifact task that generates the dist artifact which will be provided later on as an input to our release definition:

Setting Up CD Pipeline With VSTS

The last step is to add a CD pipeline which will deploy the artifacts created by the build to the Azure Web App. In this demo I am keeping the release pipeline simple by deploying the artifacts directly to production. In a real life application you will probably create multiple environments before releasing to production (Development, QA, Staging, etc.):

The production environment includes a single task that deploys the Angular application to an Azure Web App:

That's it! You now have a fully functional CI/CD pipeline that will deploy your Angular application to an Azure Web App the next time you check in your code.

 


Comments (6)

  1. Karan says:

    Hi There,
    This is the most crisp write up on this topic, unfortunately before getting my hands on this article after stumbling few time i was able to get the build going 🙁

    For the npm build task i am using the Command and arguments* as run build –prod -aot, but its still not generating the production build. I also tried modifying my package.json file agumenting the build script with prod and aot flags but no success.

    1. Wael Kdouh says:

      @Karan i am glad you found the article helpful. Regarding your question, you can ng build –prod for preparing code for production. Or you can add a script command under the package.json file that would trigger the aforementioned command. Hope this helps.

  2. Andrew says:

    Thanks for the article, I have it up and running in my environment. My question is about the “npm run build” step, can you include arguments to build a prod release? e.g. run-script build –prod

  3. UNNIE says:

    Good article, could you add any link to some public repo where I can get the web.config.

    Thanks

Skip to main content