Deploying Your Angular Application To Azure Using Azure DevOps

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 the src folder to instruct our underlying web server on Azure to rewrite all incoming request to serve our index.html file:

<configuration><system.webServer><staticContent><mimeMap fileExtension=".json" mimeType="application/json" /><remove fileExtension=".woff"/><mimeMap fileExtension=".woff" mimeType="application/font-woff" /><mimeMap fileExtension=".woff2" mimeType="font/woff2" /></staticContent><rewrite><rules><rule name="Angular" stopProcessing="true"><match url=".*" /><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /></conditions><action type="Rewrite" url="/" /></rule></rules></rewrite></system.webServer></configuration>
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
]
  1. New -> Web and Mobile -> Web App
  1. Fill out the required fields:
  1. After pressing “Create” you should now have an Azure Web App created.
  1. Build and Release -> Builds -> New
  2. Add an npm task to install the npm packages required by the Angular application

Setting Up CD Pipeline With Azure DevOps

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.):

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wael Kdouh

Wael Kdouh

Principal Cloud Solution Architect. I am a Web Enthusiast who is in love with the cloud. Public Speaking is kind of my thing. #Microsoft, #emp, #Msftemployee,