DEV Community

Cover image for Let's start with Yarn 2 workspaces
Stepan Vanzuriak
Stepan Vanzuriak

Posted on

Let's start with Yarn 2 workspaces

#tutorial #javascript #yarn

Photo by Paul Hanaoka on Unsplash

A couple of days ago I found it quite difficult to figure out how to use yarn 2 and workspaces and spend hours searching for an explanation. This post is an attempt to fill the gap between docs and real-life example.

Yarn 2 is different package manager then "classic" first version and workspaces were improved with behaviour and commands (more about new features here https://dev.to/arcanis/introducing-yarn-2-4eh1).

What's workspaces?

From docs

The Yarn workspaces aim to make working with monorepos easy, solving one of the main use cases for yarn link in a more declarative way. In short, they allow multiple of your projects to live together in the same repository AND to cross-reference each other - any modification to one's source code being instantly applied to the others.

So it's a mechanism to manage your monorepos, or if simple, if your project structure similar to this you may found this useful:

\project-root
 \folder-a
    package.json
 \folder-b
    package.json
 ...
 package.json
Enter fullscreen mode Exit fullscreen mode

Initialize project

Let's define a new project with yarn 2

$ mkdir hello-yarn-worspaces
$ cd ./hello-yarn-worspaces
Enter fullscreen mode Exit fullscreen mode

Let's init yarn here

$ yarn init -y
Enter fullscreen mode Exit fullscreen mode

Note: Use -y flag to skip questions about package name, version, author, etc.

Now your root package.json file should look like this

{
  "name": "hello-yarn-worspaces",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
Enter fullscreen mode Exit fullscreen mode

Next step is to check if yarn installed in the system, running yarn -v in your terminal app should show system version, if you not sure read install part of docs https://yarnpkg.com/getting-started/install

To set yarn 2 as a package manager for the current project you need run two commands in your project root:

$ yarn policies set-version berry
$ yarn set version berry
Enter fullscreen mode Exit fullscreen mode

Now you ready to define your sub-packages. Lets create package-a folder and package-b folder.

Our structure now looks like this:

\hello-yarn-workspaces
    \package-a
    \package-b
package.json
Enter fullscreen mode Exit fullscreen mode

Let’s run yarn init -y for both folders, let’s look again to our structure

\hello-yarn-worspaces
    \package-a
     package.json
    \package-b
     package.json
package.json
Enter fullscreen mode Exit fullscreen mode

Simple code example

We need two files, one index.js to package-a and another index.js to package-b

package-b/index.js

function b() {
  return "From b. You made it!";
}

module.exports = b;
Enter fullscreen mode Exit fullscreen mode

package-a/index.js

const b = require("package-b");

console.log(b());
Enter fullscreen mode Exit fullscreen mode

Our simple code it’s just idea to visualize linking two packages.

Let's link package-b as dependencies for package-a:

package-a/package.json

{
  "name": "package-a",
  "dependencies": {
    "package-b": "workspace:package-b"
  }
}
Enter fullscreen mode Exit fullscreen mode

After run yarn command into the root folder.

As final we should run package-a/index.js, yarn uses non-classic linking via .pnp.js so to run it we need to replace node ./package-a/index.js command with yarn node ./package-a/index.js (or add “start”: “node index.js” to package-a/package.json)

If everything correct output will be

From b. You made it!
Enter fullscreen mode Exit fullscreen mode

Conclusion

Yarn 2 workspaces great for multipackage repositories, follow this tutorial and you will able create own simple workspace.

Top comments (2)

Collapse
 
jbsulli profile image
Joshua Sullivan •

Thank you! This helped so much. The yarn docs were not very clear about how linking was supposed to be done. I was really confused about workspace: was supposed be used for the dependencies. Thanks again!

Collapse
 
hiepxanh profile image
hiepxanh •

nice but no example