---
layout: post
title: Caching Azure CI Pipeline Artifacts
date: 2021-01-15 00:00 +0000
subtitle: Learn how Caching improves speed of your Angular Build in Azure CI build
description: Learn how Caching improves speed of your Angular Build in Azure CI build
cover-img: https://i.imgur.com/hiQZ0BG.png
cover_image: https://i.imgur.com/EeYRFDf.jpg
thumbnail-img: https://i.imgur.com/h5qlMda.jpg
share-img: https://i.imgur.com/EeYRFDf.jpg
tags: devops,azure,tutorial,beginners
last_modified_at:
published: true
sitemap: true
comments: true
social-share: true
excerpt_separator: "<!--more-->"
---
# Caching Azure CI Pipeline Artifacts


If you are following agile then continuous integration is must. I have setup CI/CD in Azure DevOps and I personally found my Angular build is taking lot of time. The Npm Install step itself takes like around 3 minutes or so. If you are using [nrwl.Nx monorepo](https://nx.dev/) then you will notice your npm install or npm ci step will take around 8 to 10 minutes. Every-time you push the build it will download all of the node packages from npm.org and will spend same amount of time even-though you have not changed their versions. That is waste of time and resources.

Fortunately, Azure DevOps now offers a new build task called [cache task](https://docs.microsoft.com/en-us/azure/devops/pipelines/release/caching?view=azure-devops) (Pipeline Caching). In this article I will give you steps to create a Build Definition by using Cache Task. I will demonstrate how you can speedup your build process more than 50% or so.

## Create Node.js Project
After restoring from cache during build time. If I use the node package to run some program it should work lets test it.

add build script in package.json
`build: node index.js`

index.js

const chalk = require('chalk');
 
console.log(chalk.blue('Hello world!'));

## How to know cache location in Azure DevOps.
Check the log of `npm install` or `npm ci`


In my case it says `D:\\a\\.npm` which means it is `$(Pipeline.Workspace)/.npm` in azure devops machine.

In this example it says cache location is `C:\\npm\\cache`


## First Npm Ci 20s


## Second Time Npm Ci <1s
After first time build if you do not change package-lock.json file and rebuild then your build should be super fast even less than a second.


## Steps to create Azure Devops CI Build Definition with Cache
Create new pipeline and select classic editor and start adding task as mentioned below.
### step 1: Add Cache Task
Pipeline caching can help reduce build time by allowing the outputs or downloaded dependencies from one run to be reused in later runs, thereby reducing or avoiding the cost to recreate or re-download the same files again.

name: Cache npm Dependencies
key: **/package-lock.json, !**/node_modules/**/package-lock.json, !**/.*/**/package-lock.json
path:$(Build.SourcesDirectory)/node_modules


### step 2: Add npm task for ci
select `ci`

Inside Control options:
- set enabled
- Run this task: Select Custom Condition
- Add `eq(variables['CacheRestored'],False)` in Custom Condition Text.

### step 3: Add npm task for build
Add new npm task and call it `npm build`
Add your build script from your package.json


## Build Definition

pool:
  name: Azure Pipelines
  demands: npm

steps:
- task: Cache@2
  displayName: 'Cache npm Dependencies'
  inputs:
    key: '**/package-lock.json, !**/node_modules/**/package-lock.json, !**/.*/**/package-lock.json'
    path: '$(Build.SourcesDirectory)/node_modules'
    cacheHitVar: CacheRestored

- task: Npm@1
  displayName: 'npm ci'
  inputs:
    command: ci
    verbose: false
  condition: eq(variables['CacheRestored'],False)

- task: Npm@1
  displayName: 'npm build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build'

---

## Do You Want to become full stack developer? :computer:
If you want to become full stack developer and grow your carrier as Lead Developer/Architect. Consider subscribing to our full stack development training programs. We have monthly membership plans and you will get unlimited access to all of our video courses, slides, source code & Monthly video calls.
- Please visit www.fullstackmaster.net/pro to subscribe to All Access PRO membership.
- Please visit www.fullstackmaster.net/elite to subscribe to All Access ELITE membership. You will get everything from PRO plan. Additionally you will get access to monthly live Q&A video call with Rupesh and ask doubts and get more tips and tricks.

>You bright future is waiting for you so visit today www.fullstackmaster.net and allow me to help you to board on your dream software architect/lead role.

---

### :sparkling_heart: Contact Details: Say :wave: to me!

* Rupesh Tiwari
* www.rupeshtiwari.com
* :email: <[e-mail]>
* Founder of www.fullstackmaster.net :mortar_board:
* [<img src="https://i.imgur.com/9OCLciM.png" width="295" height="65">](http://www.fullstackmaster.net)