Build and Deploy an Angular App from GitHub to Azure Website

I had a bit of a challenge when I tried to deploy an Angular app to Azure and I'd love to share it since it was new to me, it might as well help other people. I used the Angular Cli to create my app and all I wanted was to deploy the final dist folder, but I really didn't want to plug some CI tool to it, as it was something so simple.

If you prefer watching a video with the steps, here it is

First thing I tried was simply configuring continuous deployment in Azure to pick up my GitHub repository and hoped that Azure would be smart enough to recognize it as an Angular app and it would just work. Yeah! I wasn't lucky enough. I started getting some weird 404s and 401s.

Pre-requisites

Creating New App

Generating Kuduscript

kuduscript -y --node

This will generate .deployment containing the command to run your deployment script and deploy.cmd which is the deployment script itself.

Updating deployment script

Now let's open the deploy.cmd script and look for the deployment section so we can update it. Here we'll make sure all the npm packages are installed, build the angular app and copy the content of the dist folder to the deployment target folder (wwwroot).

Update Dependencies

Couple more things you need to update, this time in your package.json. Under dependencies, add @angular/cli and @angular/compile-cli, in my case it looks like this:

"@angular/cli": "1.5.0",
"@angular/compiler-cli": "^5.0.0"

IIS Configuration

This part is not quite mandatory, but highly recommended if you're hosting on IIS which will most likely be the case when hosting in Azure. We have to add some URL rewrite rules so IIS doesn't freak out with our Angular routes. So I'm gonna add a web.config file into my src folder to do this trick