Angular Continuous Delivery / Deployment with gitlab-ci, stage on commit and prod on git-tag

=> Please follow us on Twitter & Medium for more!

What will we do:

1. Set up a sample app with e2e and unit testing
2. Configure gitlab-ci to do unit tests, e2e test and deploy to surge
3. Configure this for stage on every commit
4. Configure this for prod on every git tag

Check out our Angular In-House trainings or a public Angular courses.
Try out fossilo.com our angular project to archive complete websites.

Gitlab CI CD is powerful

Disclaimer: This is a simplified approach with a one-step ci/cd separated by prod/env. I recommend to start simple, get used to it, learn about gitlab-ci/cd and separate the jobs as you need.

Based on:

• Angular 4 and testing: angular/cli + gitlab-ci + ng test + PhantomJS + TDD.
• Angular End to End Testing

1. Build the sample app

Here the parts you need:

• create fresh angular-cli app
• add example app.component with .spec.ts (unit testing) and e2e testing from bellow
• run ng test, ng e2e and ng serve to make sure it works on your machine

Instead of using a boilerplate github projects, which are usually outdated and you don’t know what hidden config they did, I prefer to start with a clean new app in tutorials.

2. Build and deploy from your local system

1. Let’s install surge for deployment:

npm install surge --save-dev

2. If you use surge for the first time let’s login:
(follow the steps in the terminal after executing the command)

node_modules/.bin/surge login

3. Now let’s build our angular app (built code will go into dist/ folder):

ng build --prod --aot

4. And now let’s deploy manually:
(replace XXX with whatever you like. Hint: letslearn is already used ;-))

./node_modules/.bin/surge -p dist/ --domain XXX-stage.surge.sh

3. Let’s configure the gitlab-ci stage deployment

1. Create a GitLab project: https://gitlab.com/projects/new

2. Add gitlab as remote and push your local repo including the changes
(ng new already did git init for you)

git remote add origin git@gitlab.com:XXXuserXXX/XXXprojectXXX.git
git add .
git commit -m "basic plus1 app"
git push -u origin master

3. Now we need the SURGE_LOGIN and SURGE_TOKEN to do the deployment

cat ~/.netrc

Create two pipeline environment variables in settings of your gitlab project:

https://gitlab.com/XXXuserXXX/XXXprojectXXX/settings/ci_cd

Navigate to settings => Pipelines

Scroll down till you find secret variables

Add the variable SURGE_LOGIN (login string from ~/.netrc) and SURGE_TOKEN (password string from ~/.netrc).

2. Create gitlab-ci.yml doing all the nice things:

3. Add and commit the gitlab file and go to your projects gitlab piplines to see if it works:

Pipelines in your gitlab project.

Click on your pipeline and then on the “deploy_stage” icon to go to the console.

Watch the build process as it progresses.

If it failed scroll down in the console in gitlab and read the error messages. Understanding error messages will make you 1000 times better developer, so run through the wall (if you didn’t yet) and force yourself to really understand it. If you are good at it, suddenly the Matrix will draw images in your head and you’ll see the lady with the red dress.

4. Open the domain you defined ie.: XXX-stage.surge.sh:

Roll back your chair, take a sip of coffee, breath out slowly and say “wow, that’s devops. The force is with us.”

5. Now we need a separate ci/cd for production. But this time we only want to run it for git tags (like “v1.0.23”):

It’s important to set “only” tags, so the production gets deployed new versions.

6. To deploy on prod you need to add a tag:
(We only want to get full versions to production. But we want to see for every push if it works on stage.)

git add .gitlab-ci.yml
git commit -m 'adds prod to gitlab-ci'
git tag v1.0.23 -am 'quick to the golden submarine'
git push origin v1.0.23

7. Go to your pipelines and see how prod is deployed based on your tag.

8. Go to your prod domain on xxx-prod.surge.sh an see how you just deployed automatically based on git tags ;-)

What’s next?

Let’s try other deployment destinations, add automatic tag hooks for package.json version changes, separat ci/cd steps and add different angular environment.ts configs for stage and prod. So follow us on Youtube, Twitter (Flavie, Rob, Jonas) or Facebook to see new stuff.

PS: Thank you to https://twitter.com/everflux for the nice docker image tailor made to build and test Angular.

=> Please follow on Twitter & Medium for more!