Deploy Angular 8 App as Azure Web App with Github Actions

I recently wanted to setup continious deployment of an Angular 8 project as an Azure Web App with Github Actions and strugeled a bit. It turns out the devil is in the details, so I provide this gist to hopefully make it easier for others.

Create an angular project, if you have none

Assuming you have the angular cli installed run the following command and use all the default settings.

ng new your-app-name

Create an Azure Web App

• login to the Azure portal
• optionally create a new resource group, or you can use an existing one
• create a new resource
  • select "Web App"
    • select the resource group and choose a name for your Web App
    • select ASP.NET V4.7 as the runtime stack!
    • select the region and service plan to your liking
    • create the Web App

Configure the Web App Publish Profile as a Github Secret

I'm assuming your Angular app is pushed to a Github repository.

• go to your Azure Web App and select get publish profile at the top and download the file
• go to your Github repository and select the setting tab and go to secrets
  • create a new secret and name it AZURE_WEBAPP_PUBLISH_PROFILE
  • copy the whole content of the Web App publish profile into the secret value field

Configure the github action

The github action workflow is defined by a yaml file with any name which is located at repository_root/.github/workflow. So you can create a file there and name it for example webapp-on-azure.yml or you can use the userinterface at github and select actions to create the file there. The result is the same.

The content of the configuration file is adapted from the Azure example here: https://github.com/Azure/actions-workflow-samples/blob/master/AppService/node.js-webapp-on-azure.yml

Copy the content of the webapp-on-azure.yml of this gist into your yaml file. The only things you need to change is in the env part:

• Set the AZURE_WEBAPP_NAME according to your Azure Web App name.
• Set your-app-name of the AZURE_WEBAPP_PACKAGE_PATH: './dist/your-app-name' according to your angular app name.
• Set the node version according to your version.

Push your repository and see the github action in action

Now when you push to your repository, you should see the github action workflow running. When it is completed you should see your angular app deployed at your web apps url: https://your-app-name.azurewebsites.net/