Deploy Angular 8 app to Azure with Azure DevOps

1. Create a Azure Web App.

Use the following Configurations:

Runtime Stack: ASP.NET V4.7
Operating System: Windows

You can select your own subscription plan, resource group and region.

2. Create a Git repository to hold the Angular app

2.1. Initialize your angular application

2.2. Commit and Push the code.

3. Create a Pipeline in Azure DevOps.

3.1. Login to the Azure DevOps. (https://dev.azure.com/)

3.2. Create a project:

I'll select Private as visibility and Git as Version control.

NOTE: Azure DevOps provides different features.

For this task we are going to focus on Pipelines.

4. Pipeline Part 1: Integrate Git

From the Connect section select: Use the classic editor.

4.1. Select a Source as GitHub and authenticate with your GitHub account using OAuth.

4.2. Select your repository which holds the angular app.

4.3. Select the branch. This is the branch that Azure DevOps will have its eye on for changes. So

4.4. select the branch that need to do the deployments with.

5. Pipeline Part 2: Create a Job Agent

Azure DevOps provides in-build templates for perform different jobs.

In our case, we are going to select 'Empty job'. And when you select this option, you need to select agent steps.

5.1. Give a name as you like for the Agent job

6. Pipeline Part 3: Create agent steps

Click on '+' button in your agent to add steps

Job 1: Node.js tool installer

6.1. Add 'Node.js tool installer'. Specify the node version that you want to use.

Job 2: npm

6.2. Add 'npm' job to install angular cli

Select the Command as 'custom' from the drop down.
In the Command and arguments section add the command to install angular cli as install -g @angular/cli (You don't have to use npm because this is a npm job)

Job 3: npm

6.3. Add another 'npm' job to install all the in package.json

Job 4: npm

6.4. Add another 'npm' job to build the production build.

Select the Command as 'custom' from the drop down.
In the Command and arguments section add the command to build the production release as run build.

Job 5: Azure App Service Deploy

6.5. Add 'Azure App Service Deploy' job to connect the build to Azure Web App.

Set Connection type as Azure Resource Manager.
Select your Azure subscription. (You need to provide Authorization to it if you haven't done it before.)
Set the App Service type as Web App on Windows.
Select the 'App Service name' by selecting your Web App that we have created in Azure before.
Set the 'Package or folder' value as 'dist/{name of your angular app}'

7. Enable Continues Integration by setting up a trigger

7.1. Navigate to 'Triggers' section

7.2. Select your repository under 'Continues Integration'.

7.3. Check the 'Enable continuous integration' check box.