Azure DevOps Pipeline for Static Aurelia Apps

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:

1. Trigger the pipeline when any change is committed to master.
2. Select a machine type from the build pool.
3. Position in the app root (mine being src/web-app), and install npm packages
4. Run a npm command called “build”. This is where you setup how you want your app to be built.
5. Use the CopyFiles task to copy the build artifacts to the ArtifactStagingDirectory.
6. 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! 😀