How and When to use Yarn on Rails?
Tags: ruby, rails, yarn, assets
Published: 2020-07-14 06:50:28

__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.

```json
{
  "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.
```javascript
//= 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.