Let's start with Yarn 2 workspaces
Tags: tutorial, javascript, yarn
Published: 2020-07-22 06:18:27

> <span>Photo by <a href="https://unsplash.com/@plhnk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Paul Hanaoka</a> on <a href="https://unsplash.com/s/photos/yarn?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

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](https://dev.to/arcanis/introducing-yarn-2-4eh1)). 

### What's workspaces?

From [docs](https://yarnpkg.com/features/workspaces)

> The Yarn workspaces aim to make working with [monorepos](https://yarnpkg.com/advanced/lexicon#monorepository) 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
```

### Initialize project

Let's define a new project with yarn 2

```bash
$ mkdir hello-yarn-worspaces
$ cd ./hello-yarn-worspaces
```

Let's init yarn here

```bash
$ yarn init -y
```

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

Now your root package.json file should look like this

``` json
{
  "name": "hello-yarn-worspaces",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
```


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](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**:

```bash
$ yarn policies set-version berry
$ yarn set version berry
```

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
```

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
```

### Simple code example

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

`package-b/index.js`

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

module.exports = b;
```

`package-a/index.js`

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

console.log(b());
```

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`

``` json
{
  "name": "package-a",
  "dependencies": {
    "package-b": "workspace:package-b"
  }
}
```

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!
```

### Conclusion

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