How and When to use Yarn on Rails?

Yarn is a package manager similar to NPM, which runs over NodeJS, created and managed by Facebook, to replace NPM, making the package manager faster, once it parallelizes the packages installation.

The advantage of using it with Rails is that you facilitate the management of CSS and Javascript libraries in your project. Its behaviour is similar to Ruby gems, but in a front-end universe.

On Rails, it's common to search for gems that make more comfortable the use of those libraries in our projects, but we become dependent on updates from their developers. Yarn is the right solution for all these problems.

To install Yarn on Mac, simply run.

brew install yarn

Now let's see how to apply it in our projects.

To start, let's create a new Rails project:

rails new rails-yarn
cd rails-yarn/

And now we start Yarn in our project with the following command:

yarn init

Your bash is going to make a bunch of questions about your project. You don't need to answer any of them if you don't want and you can always change it later in your package.json

yarn init v1.5.1
question name (rails-yarn):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author (Maurício Ackerman):
question license (MIT):
question private (true):
success Saved package.json
✨  Done in 8.22s.

Observe that when the command finishes running, a new file package.json gets created in your root directory. This file is responsible for all your project information, as well as its dependencies.

{
  "name": "rails-yarn",
  "private": true,
  "dependencies": {},
  "version": "1.0.0",
  "main": "index.js",
  "author": "Mauricio Ackermann",
  "license": "MIT"
}

And now we can add dependencies to our project:

$ yarn add jquery
yarn add v1.5.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.6.0", while you're on "1.5.1".
info To upgrade, run the following command:
$ curl -o- -L https://yarnpkg.com/install.sh | bash
success Saved 1 new dependency.
info Direct dependencies
└─ jquery@3.3.1
info All dependencies
└─ jquery@3.3.1
✨  Done in 0.78s.

Observe that on the third line, it says: info No lockfile found. and on the 8th line, we have the following output: success Saved lockfile.. Yarn uses a file called yarn.lock to save information about all dependencies versions, similar to what we have on our Ruby Gemfile.lock, which assures consistency between all our ho, avoiding different versions on different environments.

Yarn.lock

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


jquery@^3.3.1:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"

Now that we installed the library let's add it to our project. To do so, we need to edit the file app/assets/javascripts/application.js adding jQuery.

//= require jquery

And it's done! Your project has jQuery set up and running, thanks to Yarn. It's essential to add to your .gitignore the node_modules folder to avoid committing all libraries to your git repository.

When you clone a repo, to install the dependencies, you just need to run:

yarn install

What do you think about this alternative to manage your libraries? Simple and fast, not to mention that it is also a best practice. Leave your comments and thoughts about how Yarn may help your project.

In a future post, I will talk about the Webpack in Rails projects, replacing Sprockets.