Introduction to Yarn & Offline Node Module CachingPosted on Feb 4, 2017
npm doesn’t. In this tutorial, you’ll be introduced to the Yarn package manager and how to offline cache yuor commonly/favourite node libraries. This tutorial expects that you have experience using the bash/*nix command line and have a basic familiarity with git.
- Learn what Yarn is and why it is useful
- Understand what a lockfile is
- Create a node project using Yarn
- Test offline caching
What is Yarn?
Gemfile.lock. A lockfile locks in a specific version of a node module to be used in a project. This means that if I share a project with you and you install packages, you’ll get the exact same versions that I have (which ultimately leads to no headaches due to version differences). The lockfiles are
In the first part of this tutorial, you are going to create a project that stores your favourite/commonly used node modules. You’ll then upload this project to a Git repository that you can use locally and share with teammates online. Finally, you’ll learn Yarn as you follow along!
Creating an Offline Cache for Node Modules
Let’s get started by installing Yarn on your system. Mac users:
brew install yarn; Linux users:
apt install yarn or
yum install yarn.
Now, change to your home directory in your terminal:
cd ~. Inside,
mkdir yarn-offline-cache. This is where Yarn will save node modules for future use. Then, run
yarn config set yarn-offline-mirror ./yarn-offline-cache. This is where the
Inside of your home (
~) directory, a
.yarnrc will be created. Inside, it looks like the following:
For every project that you want to use the offline cache in, you must have a copy of this
.yarnrc in your directory. I personally add it to boilerplate projects.
Your First Yarn Project
Now, create a directory called
yarn-boilerplate. Change into it and we’ll get started! First, run
Note: You can name your project anything you want; these options are up to you!
Once this is complete, a
package.json will be created (similar to the
npm init process). It will look like this:
Now, add your favourite dependencies using yarn. To do so, I’ll demonstrate how I add a few things I depend on in my projects. You should add these and/or add your own favourites.
yarn add webpack
The syntax basically starts ‘Hey yarn, add webpack as a dependency of my project’. You can also add multiple projects at once.
yarn add webpack-dev-server babel-core babel-loader babel-preset-es2015
This will install Webpack, the Webpack development server, Babel, the Webpack loader for Babel, and ES2015 support for Babel. You could also add React, Angular, Ember, Aurelia, Backbone, jQuery, … One of the cool things about yarn is that it will install dependencies asynchronously, unlike npm.
Here are a few commonly used Yarn commands:
- Starting a new project:
- Adding a dependency:
yarn add [package],
yarn add [package]@[version], or
yarn add [package]@[tag]
- Upgrading a dependency:
yarn upgrade [package],
yarn upgrade [package]@[version], or
yarn upgrade [package]@[tag]
- Removing a dependency:
yarn remove [package]
- Installing all the dependencies of project:
Yarn has a usage guide for commands. Check it out and bookmark it for future help!
Now, remember the
.yarnrc in our home folder from earlier? Let’s add a copy of it to our home directory. Change back into your home
~ directory and
cp it to your project directory.
Next, you should initialize a Git project in this repository. You can do so by running
git init in your boilerplate’s directory. Then, run
git status to see what is in your project.
You can view what this project looks like on Github.
Now, let’s install our packages in our project. This may seem redundant but by doing so, we’ll install our packages into our offline cache folder, too! Let’s do that now.
package.json, Yarn will take care of installing all of the dependencies for you.
Navigate back to your
~/yarn-offline-cache directory. Run
tree to check out what is in your directory! You’ll notice that every dependency that your project relies on is stored in your offline cache project.
You can view my personal Yarn offline cache’s repository on Github.
Testing Offline Caching
Now, if your internet ever goes down you’ll still be able to install packages in other projects so long as the
.yarnrc is in your project’s folder! Isn’t that awesome?! You can also share your
.yarnrc and offline repository with teammates so that everyone is guaranteed to be on the same versions of each library (which helps resolve versioning conflicts). Awesome, eh?
If you’d like to test this, disconnect your internet connection and create a new project. Add your
.yarnrc over to the project.
yarn add a library in your cache. What are the results? I’ll
yarn add react --offline because I added it earlier to my offline cache. It works! Huzzah!
.yarnrc and offline repositories with co-workers and teammates for other projects to keep your library versions under control. Be sure to check out the Yarn Getting Started Guide if you haven’t already.