I've done it! I was able to get it done earlier this week, but I wasn't able to write about it until now. I ended up using some information from this post (https://dev.to/thisdotmedia/continuously-integrating-angular-with-azure-devops-2k9l) and I mixed in the angular cli deploy gh-pages addin (https://www.npmjs.com/package/angular-cli-ghpages).
Now when I push to master in my devops git repo, a pipeline will kick off, run the build, lint it, test it, publish the tests and if everything succeeds, push up to my github pages.
Here's how I got to where I'm at:
1) Upload newly created angular app to devops git repo.
2) Create a branch for the pipeline work
3) In that branch in devops, go to pipelines and add the following YAML file:
# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
variables:
buildConfiguration: 'Release'
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool@0
inputs:
versionSpec: '10.x'
displayName: 'Setup Environment'
- script: |
npm install -g @angular/cli
npm install
displayName: 'npm install'
- script: ng lint
displayName: 'Code Analysis'
- script: ng test --watch=false --codeCoverage=true
displayName: 'Tests'
- task: PublishTestResults@2
condition: succeededOrFailed()
inputs:
testResultsFormat: 'JUnit'
testResultsFiles: '**/TESTS-*.xml'
displayName: "Publish Test Results"
- task: PublishCodeCoverageResults@1
condition: succeededOrFailed()
inputs:
codeCoverageTool: 'Cobertura'
summaryFileLocation: '$(Build.SourceDirectory)/coverage/$(Angular_Project_Name)/cobertura-coverage.xml'
displayName: 'Publish Code Coverage Results'
- script: ng deploy --repo=https://$(Github_Username):$(GITHUB_TOKEN)@github.com/$(Github_Username)/$(Github_Repo_Location)
condition: succeeded()
displayName: 'Build Production and Deploy to github.io'
- task: PublishBuildArtifacts@1
inputs:
PathtoPublish: 'dist/$(Angular_Project_Name)'
ArtifactName: 'web-app'
publishLocation: 'Container'
displayName: 'Publish Artifacts'
I really like that devops allows me to store secure variables!
I really didn't need that publish artifacts at the end, but I figured I'd try it out. I do have one bug currently, the linting results publish can't find the output file to publish at the moment, so there is probably something wrong with my pathing.
Once I am able to finish the linting issue, it's on to the fun: Making the website work!
Top comments (0)