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.
- Working Angular 2 app on Visual Studio 2015, i.e. it builds and runs under localhost.
- Azure Account
- Familiarity on how to create Web App.
Create Azure Web App
Download Publish Profile
Get your apps publish profile. In this case is AzureAngular2.PublishSettings.
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.
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
It takes a while and you might get few red warnings, but you should end up with the 2 new folders:
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”.