Angular2 Go pipepline

October 25, 2016

We use GoCD for our normal Continuous Integration system and having recently needed to deliver an Angular 2 project we had the need to set up a new pipeline template.

Background

The project uses Angular CLI which wraps up a number of useful tasks into a handy command - such as creating new template source files (E.g. Components, Services, Pipes etc), build for different environments (E.g. dev and production), running tests and many more! I thoroughly recommend it and realistically it is essential for any serious project.

Install required tools

On the Go Agent(s) that will be enabled for Angular builds install Angular CLI.

ssh goagent1
npm install -g angular-cli

Note 1, if you’ve not used this machine for anything Node Js related you’ll need to install that too: [https://nodejs.org/en/download/]().

Note 2, you will see lots of warning messages coming out from NPM.. Just get used to that!

Steps

1) Create a new pipeline, enter the name and select next.

2) Set where your source code comes from

3) Create the first Job. We normally create jobs that follow: Build, Test, Deploy.

To that end, set the names as ‘build’.
The first command will install any required depencies

Command: /usr/local/bin/npm
Arguments: install

We now want to add add the second command, that will actually run the build

Command: /usr/local/bin/ng
Arguments: build

You’ll now have the first stage looking something like this:

4) Create a new stage called ‘test’. Keep the stage running “On success”

Command: /usr/local/bin/ng
Arguments: test

What we’ve achieved now is having our unit tests run everytime we commit any code which is just awesome!

5) Let’s package everything up in a deploy stage. We’d normally have this upload the files to the staging or live server but we’ll cover that another day. Create a new stage called ‘deploy’. Change the stage running “Manual”. This means we have to manually run it when we want to deploy our changes elsewhere. You generally do not want to deploy your codebase on every commit.

Command: /usr/local/bin/ng
Arguments: build -prod

We want to keep a copy of the production version of the code so we can upload it to a server later. We do this with support of “artefacts”. Select the deploy job and stage, then Artificats, type in the name of the output folder for our build. dist.

Celebrate

You are now done! Unpause the pipeline and you’re good to go.. You’ve now got a stable way to check your project whenever someone makes a change and a reliable way to make sure you only deploy code that is stored in your source control.

comments powered by Disqus