So What is the Entire CI Pipeline?

Obviously this being a simple project I was not going to setup multiple servers with disk failovers, CDNs and to be able to handle huge amounts of traffic but rather the following:

A Code Repository

A way to build my project

Run Unit Tests

Deploy to hosting site

Code Repository

For my code I currently host is all in Bitbucket. They have a great pricing model for single developers: Free.

I hear you all say, but why not Github? Although I have nothing against Github and have personally used it many times, when I am creating a site that is going to go live and is using paid hosting I want my code stored in a private repository.

Either option is great though.

Building & Deploying Your Angular Project

Angular and the new CLI are great for building your application. While in development it is as simple as running ng serve .

For building an Angular project it is as simple as ng build . It really can’t be any simpler. This would all run in the terminal or command prompt depending on your OS, however we don’t want to have to run this manually each time.

To solve this we have many different automated deployment tools. My choice for this project was something that I hadn’t actually tried before, and one of the reasons why I approached this project like this in the first place. That tool is DeployHQ.

Again being a sucker for anything with a Free Tier I dove right in and my goodness it was simple. Their free tier lets you deploy to one server up to 10 times a day.

*Disclaimer: I have no affiliation with DeployHQ, but or any of the products/companies I have mentioned here, but I have found these together to work well together.

They also had a dead simple guide for deploying Angular applications. It integrated directly with Bitbucket (As well as other including GitHub), so no worries there.

My Build Commands in DeployHQ

Following the guide step by step I had added Code Repo, my FTP server details, added the above three Build Commands (I will get to the testing one now) and voila I was done.

One thing to note is that it picks up any changes pushed to my master branch only. So I can still comfortably branch off and develop, however once I am happy can merge into master and trigger my pipeline.

Running Unit Tests

At this time I could leave it here, but one thing I wanted to ensure is that my unit tests ran BEFORE I deployed.

As any good developer I ALWAYS ensure to have my tests running while developing and NEVER forget to run before pushing them. (I wish this were true…)

So adding the Run Unit Tests step in DeployHQ required a tiny amount of tweaking for the base Angular CLI generated project. The CLI runs its tests using Chrome as its base test runner for Jasmine. Obviously on DeployHQ’s server they don’t install and shouldn’t have Chrome installed by default. So we turn to the old faithful, PhantomJS.

There are a couple if minor changes that we needed to make to the default project.

Firstly we need in install the Karma PhantomJS Runner

npm install karma-phantomjs-launcher --save-dev

We then need to add it to our karma.config.js file.

The line we added was require('karma-phantomjs-launcher'), in plugins section.

Lastly we must add a new script to our package.json file in order to run our tests. We cannot run ng test directly from DeployHQ rather wrapping it in an NPM script.

So we add the “testonce”: “ng test --watch=false --browsers=PhantomJS”, script.

Breaking this down what it does is run the base ng test however it adds the optional parameter watch=false which ensures the tests are only run once. Changing it in here specifically for your build allows the base ng test to still be run while in your development environment with the default watcher.

Secondly we add in the targeted browser (PhantomJS) we just added.