Deploy an Angular application to Azure

Posted on by Martin Brandl

There are already many articles about deploying an Angular application to Azure Web App out there. However, many of them are outdated, no longer work or refer to a single runtime environment. Therefore, I decided to write an article that covers several environments and provides an easy-to-understand example.

In this article we will:

  • Create an Angular 12 demo application
  • Provision an Azure Web App using the Azure CLI
  • Use Visual Studio Code to deploy the web app to Azure

Prerequisites

Scaffold an Angular demo application

We will need a sample application for our deployment, which we can scaffold using the ng new command from the Angular CLI. The name of our application will be demoapp. I also added some additional parameters to create a minimal project without testing frameworks and routing:

ng new demoapp --skip-git --skip-tests --style css --routing false

Provision an Azure Web App using the Azure CLI

We will use the Azure CLI to provision a resource group, an App Service Plan, and an Azure Web App. In the first example, I use Node.js v14 as the runtime and added a pm2 startup command to serve our application.

In addition, I set the SCM_DO_BUILD_DURING_DEPLOYMENT App Setting to false to disable serverside build actions since we will deploy an already-built application:

$rg = 'rg-on-behalf-of-sample'
$location = 'germanywestcentral'
$appServiceplan = 'on-behalf-of-asp'
$frontendApp = 'on-behalf-of-frontend-web'
$backendApp = 'on-behalf-of-backend-web'

az group create --name $rg --location $location
az appservice plan create --name $appServicePlan --resource-group $rg --sku S1 --is-linux
az webapp create --resource-group $rg --plan $appServiceplan --name $frontendApp --runtime '"NODE|14-lts"' --startup-file "pm2 serve /home/site/wwwroot --no-daemon --spa"
az webapp config appsettings set --resource-group $rg --name $frontendApp --settings SCM_DO_BUILD_DURING_DEPLOYMENT=FALSE

If you already have an existing App Service, you can add the setting in the Configuration page within the portal:

The same applies to the startup command (pm2 serve /home/site/wwwroot --no-daemon --spa) which you can add in the General settings section within the Configuration:

Configuration for a .NET stack (optional)

If you want to use a .NET based runtime instead of Node.Js, you just have to omit the startup command in the above script and change the runtime to DOTNET|6.0:

az webapp create --resource-group $rg --plan $appServiceplan --name $frontendApp --runtime '"DOTNET|6.0"'

Deploy the application to Azure using Visual Studio Code

We will use the Azure App Service Visual Studio Code extension for the deployment. If you don’t have it yet, you can install it using the following command:

code --install-extension ms-azuretools.vscode-azureappservice

Before we can deploy our application, we will have to build it. Again, we can use the Angular CLI for that:

ng build

Now open the Azure code extension, click on App Service, expand the subscription where your resources are located and right click on the desired App Service and choose “Deploy to Web App …“:

This will open the Visual Studio Command Prompt where you choose “Browse…“:

Now navigate to the dist/<yourApp> folder which contains the output from the previous ng build command. Since the name of my app is demoapp, the folder I am looking for is dist/demoapp.

Finally, click the Deploy button to deploy your app:

After a few seconds, the deployment should succeed and you will be able to browse your application:

Note: Deploying an application using Visual Studio Code is a nice feature to quickly test things on Azure. However, for production I would strongly recommend building and deploying your application through a pipeline (e. g. Azure DevOps Pipeline or GitHub Actions).

The demoapp is also available on GitHub.

Published by Martin Brandl