In this post i will share my experience on how to deploy an Angular 2 app from Visual Studio to Azure. This is one way that worked for me, if you know a simpler way please share it.

I am pretty sure most of us when started learning Angular 2 have came across the 5 MIN QUICKSTART. So simply copy and add the files to a Visual Studio project (TypeScript or ASP.NET Web Application project). I assume you have something as shown below. Note: This tutorial is using Angular 2 – RC4, although it should be fine for newer versions.

AzureAngular2 Project Structure

Prerequisites

  1. Working Angular 2 app on Visual Studio 2015, i.e. it builds and runs under localhost.
    • Useful links on how to build and run Angular 2 app with Visual Studio: [link1], [link2]
  2. Azure Account
    • Familiarity on how to create Web App.

Publish Steps

Create Azure Web App

AzureAngular2 Web App

Download Publish Profile

Get your apps publish profile. In this case is AzureAngular2.PublishSettings.

Get Publish Profile

Publish from VS to Azure

There are various ways to publish your app to Azure, however the easiest one i found is Web Deploy. Click Publish… and then import publish profile. Wait for uploading to complete.

VS Project Publish

Setup Angular Modules on Azure

Back to Azure portal, and we are looking to access a command line of our web app. One way to do it is click Tools and launch Kudu, then Debug Console.

Execute the following command: npm install

Kudu Debug Console Install

It takes a while and you might get few red warnings, but you should end up with the 2 new folders:

Angular modules on Azure Console

Angular2 on Azure Done

Note

You don’t have to repeat these steps in the subsequent publishes of the app unless you wipe the wwwroot directory. For instance, in the Publish Wizard settings you could opt to “Remove additional files at destination”.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *