DEV Community: Rob Montague

CICD working!

Rob Montague — Mon, 17 Feb 2020 05:04:04 +0000

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!

Progress!

Rob Montague — Sun, 09 Feb 2020 06:48:01 +0000

This week I worked on the personal website a bit more. I didn't get the automated build/deploy completed, but that's fine. I ran into issues with forwarding my DNS to my personal server, and enabling SSL. I set up the SSL security the certificates successfully, but for some reason, when enabling nginx, I disabled the ability to see the website at all due to some sort of port requirement, but I was unable to get 8181 to work.

So... plan 2. I decided to use my github.io website as the landing pad. I followed the instructions here: http://www.curtismlarson.com/blog/2015/04/12/github-pages-google-domains/
I ran into a speedbump with the redirect however. Apparently my original redirect to my personal website was stuck in the Google settings and it took almost 48 hours to get the site to finally redirect to Github this morning.

Tonight I worked on converting my angular-cli generated project away from the starter pages and to start getting my own personal code in there. I have local versions started, but nothing yet on my github page.

My goal for the next week is to setup something basic I can throw up on the github.io so it shows something more than a single line "welcome to my website" that is currently up there now.

I'd also like to get an azure pipe ready so that when I merge master, that it will compile and push my finalized code to the github.io location.

Relearning project setup with git and angular

Rob Montague — Sun, 02 Feb 2020 05:27:02 +0000

So I've finally done it. After many months of not programming more than what's necessary for powerapps for work and after years of having a domain with nothing on it, I've decided to start a project to create a personal website based on angular and to document the process here.

Tonight I started by creating a GitHub repo for the project, updating my node, npm, and angular to latest and clone my repo in vscode. So far so good. I then used angular cli to create my website and serve it locally. Again... Great.

Now I hit my snag. I try to commit my local changes through vscode git and it doesn't see the new files in my directory. I end up going to GitHub and uploading the files via the website. I pull latest but something wasn't right with vscode still. I ended up downloading GitHub desktop, blowing away my local directory and cloning again from the GitHub app. Because not all the files were pulled I ended up clearing everything from the source directory and recreating the site with angular cli. This time vs code saw the files and I was able to commit and push. Whew!

My overall goal is to reconnect with more complex coding, learn vscode better, and finally get my personal site up and running. My next goals are to get https certificates for my site, setup GitHub to push the website when I merge to master and then to get the start of the site up on my server. Hopefully I can get to this before next week!