Use yarn to create a new project and manage dependencies.

webGuildYarnLab.md

WebGuild: Yarn Lab

The yarn lab incorporates a few steps:

1. Install yarn
2. Create a new project with yarn
3. Installing/reinstall/syncing project dependencies
4. Add/remove/update some dependencies

Questions? If you have any questions, ping #webguild.

0. Setup

Before you get started, familiarize yourself a bit with the yarn Documentation.

Create a new directory and use yarn init just like you would npm init to create a new node.js project:

$ mkdir my_yarn_project
$ cd my_yarn_project

Also, we're going to want to track the changes to our project throughout the lab. Initialize a git repo and add your first commit (.gitignore)

my_yarn_project$ git init
my_yarn_project$ echo "node_modules" >> .gitignore
my_yarn_project$ git add -A; git commit -am "Initial commit"

Congratulations! You're ready to start the lab.

1. Install yarn

Once you're ready, go ahead and install yarn:

$ npm i -g yarn@^0.22

When that completes, verify yarn was installed successfully:

$ yarn --version
0.22.0

2. Create a new project with yarn

Use yarn init just like you would npm init to create a new node.js project:

my_yarn_project$ yarn init
# Follow prompts

yarn init will create a basic package.json manifest file that will contain all your dependency versions. Verify it was successfully:

my_yarn_project$ ls
package.json

Note: Use git status to verify package.json was created, and add it to your repo:

3. Installing/reinstall/syncing project dependencies

New projects are so minimalist. At Pinterest, usually you'll be working with existing projects. Go ahead and add the following to your newly minted package.json's "dependencies" entry:

  "dependencies": {
    "gestalt": "0.18.0",
    "react": "^15.4.1",
    "react-bash": "^1.4.3",
    "react-dnd": "^2.1.4",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^15.4.1",
    "react-modal": "^1.2.0",
    "react-motion": "^0.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^2.7.0",
    "react-scroll": "^1.0.17",
    "react-slick": "^0.12.2",
    "react-sparklines": "^1.4.2",
    "react-sticky-position": "^2.0.0"
  }

And install them:

my_yarn_project$ yarn

That's it! Verify your modules installed correctly:

my_yarn_project$ node
> require('react').version
'15.4.2'

A couple things of note:

1. yarn uses yarn.lock to track the dependency tree installed into node_modules.
2. yarn will always keep yarn.lock in sync with package.json.
3. yarn.lock will be overwritten if a relevant entry (e.g., to "dependencies" changes in package.json)

Go ahead and confirm this by cating the contents of yarn.lock:

my_yarn_project$ cat yarn.lock

Add/remove/update some dependencies

Remove

Now let's add a dependency or two. I was never really a fan of react-sticky-position, so let's go ahead and remove it:

yarn remove react-sticky-position

When you use yarn to add or remove modules, yarn will modify both package.json and yarn.lock as needed. Go ahead and commit your changes:

$ git status
On branch master

Latest commit question

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	package.json
	yarn.lock
	
$ git commit -am "Removing react-sticky-position"

Add/update

Repeat the above with yarn add [email protected] then again with yarn upgrade to interactively update lodash to the latest version.