CICD working!

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!

Blog

Rob Montague

Join Our Newsletter. No Spam, Only the good stuff.

Related