Exploring the Monorepo #2: Workspaces (npm, pnpm)
Tags: node, typescript, productivity, monorepo
Published: 2021-06-27 21:48:20

### Table Of Contents
  * [npm](#1)
  * [pnpm](#2)
  * [Conclusion](#3)

Okay so [attempt #1](https://dev.to/jonlauridsen/attempt-1-can-t-we-just-make-project-folders-15nh) didn't quite work, but all the package managers have a feature called [Workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces), which npm describes like this:

> [Workspaces] provides support to managing multiple packages from your local files system from within a singular top-level, root package.

That sure sounds relevant, so let's give it a try!

## npm <a name="1"></a>
The npm documentation is so terse I've honestly no clue how to get anything working 🤷‍♀️. If you know your way around npm workspaces I'm happy to swap stories, but for now I'm giving up on this.

## pnpm <a name="2"></a>
Documentation here is definitely a step up, with more examples to draw inspiration from. Still a bit hard to grasp though, but I also came across this nice ["actual complete guide to typescript monorepos"](https://dev.to/cryogenicplanet/an-actual-complete-guide-to-typescript-monorepos-240l) article by @cryogenicplanet that put some of the details together in an understandable way. Thanks Rahul!

The end-result of _workspacifying_ the product comes out like this:
```
webby
├── apps
│  ├── api/
│  └── web/
├── libs
│  ├── analytics/
│  ├── logging/
│  └── types/
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── tsconfig.json
```

> _ℹ️ This project is [prepared on GitHub1s](https://github1s.com/gaggle/exploring-the-monorepo/tree/attempt-workspaces-pnpm) if you'd like to familiarize yourself with the code._

Each app and lib's `package.json` is scoped to just that piece of code, so [just like before](https://dev.to/jonlauridsen/attempt-1-can-t-we-just-make-project-folders-15nh#1) we have a great immediate overview. The real question is: Does it work?

Well… `apps/web` runs fine:
```
$ cd apps/web
$ pnpm install
Scope: all 6 workspace projects
└─ Done in 3.2s
$ pnpm start
[razzle] > Started on port 3000
```

So just running `pnpm install` in `apps/web` actually resolved all dependencies for the whole repository, which is very nice. And all it takes to configure it are a few lines in the `ppm-workspace.yaml` file, so it's all very easy to get working.

But `apps/api` fails just as it did in the previous article:
```
$ cd ../api
$ pnpm start
[api] TSError: ⨯ Unable to compile TypeScript:
[api] ../../libs/analytics/src/index.ts(8,3): error TS2564: Property 'uninitializedProperty' has no initializer and is not definitely assigned in the constructor.
```

With help from @cryogenicplanet's article I finally looked into [Typescript Project References](https://www.typescriptlang.org/docs/handbook/project-references.html), which is a way to tell Typescript how to deal with multiple code pieces. But the same error occurs with or without references so I’m not sure if they’re the answer and I’ve just done it wrong or if there’s a deeper problem.

## Conclusion <a name="3"></a>
I'm not sure how to proceed from here. The pnpm tool itself seems to work great, what I need to figure out is how to get Typescript to use each package's own tsconfig file.

At this point I think my best bet is to focus on Typescript configuration, rather than dive further into alternative dependency managers like yarn. If you have ideas of how to get Typescript configured to respect a package's tsconfig settings then please leave a comment.