Speed up CI builds with yarn offline mirror

Chris House
SlackerNoon
Published in
2 min readFeb 14, 2018

In my previous post, I showed how to set up a CI environment with Circle CI and angular 5.

One thing that I knew could be improved was to store the NPM packages inside the repository. I don’t need every container, or separate build environment to download every new package.

Thankfully, Yarn has made this easy!

The yarn lock file will ensure every developer/environment will have the same packages installed in the node_modules folder.

Another benefit of npm offline packages is your build servers do not have to connect to the internet. In some development shops, this is enforced so that you can make a build even if npm is down or some proxy isn't working for whatever reason in an enterprise environment.

Setup:

Assuming you are familiar with yarn and have it installed globally, create a .yarnrc file inside your angular repository and paste in the following

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
lastUpdateCheck 1518388841556
yarn-offline-mirror "./npm-packages-offline-cache"
yarn-offline-mirror-pruning true

Delete your previous yarn.lock and your node_modules folder.

Now run yarn again. You should now see 1500+ files in your npm-packages-offline-cache.

To add on to my previous post about CI with Angular, I wanted to set up build workflows for my application. I have four containers at my disposal, and the goal is to run the unit tests, and lint at the same time.

Here is the new Circle Ci configuration with the new workflow pattern.

Some interesting sections of this build workflow is now it is using:

yarn --offline

The other interesting enhancement is to only deploy the application to firebase on the master branch. My configuration requires a successful run of the unit-test job.

Here is the repository with the working code.

--

--