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
CopyFilestask to copy the build artifacts to theArtifactStagingDirectory. - Use the
AzureFileCopytask 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! 😀