Repo Walkthrough & Yarn Workspaces

[00:00:00]
>> When looking at the read me, you're gonna wanna make sure that you follow the instructions to install volta, which helps manage your node and your yarn versions, so you get the correct version for this project. Make sure you're using Visual Studio code as well if you wanna see what I see on the screen, a little bit less important to use VS.code.

[00:00:22]
For this course, compared to say, a TypeScript course, but it does offer some benefits in this case. So, if you check out your project, you should see something similar to what I'm seeing on the screen. There's not much here, There's a notes folder. So this contains a markdown files that represent each step of the project that we're going to take today.

[00:00:50]
And then there's this folder called course files. And that includes some of the source code for example that you're going to be working with today. Because I don't want you to be spending time writing code. A lot of the work that we're going to be doing today, has to do with configuring our project and setting up some build scripts and things like that.

[00:01:09]
So I want your time, focused as much as possible on the meaningful stuff that has to do with working with a mono repo. The first thing we're gonna have to do today is take our package json at the root of our project. And this is basically what you get out of the box if you just run yarn in net.

[00:01:32]
In fact, if you follow the instructions in step one The workshop project. I start even earlier than what you see here. I will start with it, basically an empty project and go through the process of creating this file, but it's kind of boring. So I decided to give you the starting point.

[00:01:52]
The first thing we're going to do is add a new property here. And let's call it workspaces, actually, I'm not gonna say let's call it workspaces, because that implies that other things would be appropriate here, it must be workspaces. And we're gonna say packages star, right? So it's an array and We can put one or more values in this array.

[00:02:19]
Now what we're telling yarn here is that number one, we want to use this feature called the yarn workspaces. And number two, any subfolders found within the packages folder, which I can create now. Any sub folders within packages should be regarded as packages that are part of this workspace.

[00:02:47]
That's where yarn can look to find them. Now you could, if you want to have a bunch of things in the root of your project, you could say Library a, Something like this, or you could just press a bunch of things. I kind of like this wild card approach because that's what's gonna let us add additional packages here without having to touch this file, right?

[00:03:14]
As long as we establish the convention Darren's just going to find things as we drop new folders into this, this packages folder. So we save this just to save ourselves a little bit of work.Now if you go into this course Files folder, which is where we're going to get a lot of the things that will become part of our project.

[00:03:35]
Look in a folder number one. And you'll see that within this yarn workspaces folder, we have something called types. And that has a source and a test folder. It's got its own package JSON and a Ts config, which is our Type Script configuration. So I want you to grab types.

[00:03:57]
Or if you could do the command line version of this, but we effectively just wanna move it into this packages folder, just like this. So you get packages types, and then the rest of this code here. Now I want us to look at what's going on here. So we have a pretty small and thin package JSON.

[00:04:32]
We have a Ts config, If you've seen these before, this kind of looks like a very typical one with sort of the strictness you know, cranked up to 11. And then we've got some source code and some tests. Nothing too fancy here. Now I do want to talk a little bit about this, naming convention.

[00:04:56]
So if I call my, if I call this package, at flack slash types, I'm using what is called a scope for my package, meaning when I publish these to NPM, they're all going to be sort of owned by a single org. And this is a common convention that's used for library style mana repos.

[00:05:21]
Because it allows you to sort of have a group of published artifacts that are associated with the single repository. So the naming convention makes it easy for users of this library to understand that these are all parts of a whole. Let's just make sure that things work here.

[00:05:41]
And we're gonna remember all we have here is yarn, we haven't really installed any dependencies. We can run yarn, just to make sure that everything's wired up the way it should. Should be. So we've saved our lock file. I wonder what happened to the lock file. We brought in TypeScript, but this is like, that's the whole lock file.

[00:06:04]
Just have this one, one dependency. What this does prove though, is that this TypeScript dependency, which is not present In our root level package JSON, it's not here, right version 403, which resolved to exactly 403 because that's the latest release as of today. So this inner package JSON.

[00:06:30]
It is found by yarn and when you run yarn install You get it just like you would get anything else. So let's go into that package and try to build it. So I see a dist folder here and I see some JavaScript that got spit out as part of the build process.

[00:06:55]
So we have in fact finished our first step here. And what we can see already is that yarn workspaces allows multiple little sub projects to work like when you're executing code when you're saying yarn build. From within the right sub folder, things work exactly as you would expect.

[00:07:17]
This already has a lot of value, right? And because of how nodes require resolve method works, which by the way if you're interested, there's a great There's a great page that like in the anode documentation, it's called all together now I think, Yeah, all together. So this is worth a read if you don't understand how like importing modules works.

[00:07:48]
It's worth a read there's a great Great page here in the Node JS official docs that helps you understand exactly how this works. And it will help you make sense of why this works and why having a node modules folder at the root of your project is sufficient in order to help you understand why this, The sub project concept it works and it would work even before yarn spaces was loud