For those who tried out hosting their Aurelia apps as a static website on Azure Storage, and liked it. Here’s a yaml pipeline description that will make it super easy to deploy it in a proper CI/CD fashion with Azure DevOps!
For those who haven’t tested but want to try static web hosting in Azure Storage, check out my previous post: Hosting an Aurelia App on Azure Storage Static Websites
TLDR; Show me the yaml!
The Pipeline
Here’s a short description of what the pipeline does:

- Trigger the pipeline when any change is committed to master.
- Select a machine type from the build pool.
- Position in the app root (mine being
src/web-app
), and install npm packages - Run a npm command called “build”. This is where you setup how you want your app to be built.
- Use the
CopyFiles
task to copy the build artifacts to theArtifactStagingDirectory.
- Use the
AzureFileCopy
task to deploy the artifacts to Azure Blob Storage.
The yaml Pipeline Definition
If you don’t have a pipeline description already, create a file in the root of your project and name it azure-pipelines.yml, then copy the yaml content below in to it.
Beware! You need to replace the following variables, in the yaml file, with your proper Azure account values:
- NAME_OF_SUBSCRIPTION = Name of your subscription.
- NAME_OF_STORAGE_ACCOUNT = The name of your storage account.
- NAME_OF_RESOURCE_GROUP = The name of your resource group.
trigger: - master pool: vmImage: 'vs2017-win2016' steps: - task: NodeTool@0 inputs: versionSpec: '8.x' displayName: 'Install Node.js' - script: | cd src/web-app # The root of your Aurelia app npm install displayName: 'npm install' - script: | cd src/web-app npm run build displayName: 'npm build' # Copy Files - task: CopyFiles@2 displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)' inputs: contents: | src\web-app\index.html src\web-app\scripts\*.* src\web-app\icons\*.* # Add your applications folders here targetFolder: '$(Build.ArtifactStagingDirectory)' # Azure File Copy - task: AzureFileCopy@2 inputs: sourcePath: $(Build.ArtifactStagingDirectory)\src\web-app # This will be the root of your Aurelia project i the staging directory azureConnectionType: 'ConnectedServiceNameARM' # Options: connectedServiceName, connectedServiceNameARM #azureClassicSubscription: # Required when azureConnectionType == ConnectedServiceName azureSubscription: NAME_OF_SUBSCRIPTION # Required when azureConnectionType == ConnectedServiceNameARM destination: azureBlob #classicStorage: # Required when azureConnectionType == ConnectedServiceName storage: NAME_OF_STORAGE_ACCOUNT # Required when azureConnectionType == ConnectedServiceNameARM containerName: $web # Required when destination == AzureBlob #blobPrefix: # Optional #cloudService: # Required when azureConnectionType == ConnectedServiceName && Destination == AzureVMs resourceGroup: NAME_OF_RESOURCE_GROUP # Required when azureConnectionType == ConnectedServiceNameARM && Destination == AzureVMs #resourceFilteringMethod: 'machineNames' # Optional. Options: machineNames, tags #machineNames: # Optional #vmsAdminUserName: # Required when destination == AzureVMs #vmsAdminPassword: # Required when destination == AzureVMs #targetPath: # Required when destination == AzureVMs #additionalArgumentsForBlobCopy: # Optional #additionalArgumentsForVMCopy: # Optional #enableCopyPrerequisites: false # Optional copyFilesInParallel: true # Optional #cleanTargetBeforeCopy: false # Optional #skipCACheck: true # Optional #outputStorageUri: # Optional #outputStorageContainerSasToken: # Optional
As can be seen in the yaml files comments, there are some if’s and but’s with a few options to choose from. I elected to use the parameters suitable for a new Storage Account. But as you can see, you can make this work for the classic accounts as well.
Happy Coding! 😀