Start with Angular in Azure - easy way

We added Angular to the set of application platforms deployed on Azure. Being new to Angular had to check different ways to deploy and monitor it on Azure.

I used standard Angular Tour of Heroes App and Tutorial and added integration with Azure Application Insights. This post is to show how easy to deploy Angular in minutes to Azure App services. Next will be on App Insights integration. The code is on github azure-ai-angular repository.

Deployment

Believe easiest way to deploy Angular application to Azure is directly from Visual Studio Code. Pre-requisite - create App Service in Azure with Node.js runtime stack.

1. Install Azure App Service Visual Studio Code extension. (instructions are in Microsoft link)

2. Build your Angular app

3. Select Azure on VS code panel and select the App Service where you plan to deploy the application.

4. Right-click and deploy your application. Make sure to select folder that contains the build (do not agree to default VS suggestion).

5. Wait for deployment to complete

6. Browse to you website

Note: for Windows App Services we also need to add web.config into a site root folder (wwwroot) for proper client-side routing and static content mime map. Example web.config is included in github repo.

We are done!