Using Yarn Workspaces to Create a Monorepo

So, it's time to get hands-on and start building their mono repo. To build their mono repo, we will work with yarn work spaces. And this is a really convenient feature of yarn to work with node-based mono ripos, because it has some advantages, like delegating and deduplicating dependencies, running packet scripts directly from their repository root, and it also handles symbolic packet dependencies, which in our case is extremely useful, because for example, we will have react packets, depending on foundation and store a book, depending to react and foundation at the same time. Before jumping to the terminal, we need only two dependencies, node and yarn installed on your local machine. If we have those installed, let's up to the terminal. We have an empty git project, and the only dependencies we need is node and yarn. So we can take with node version we are using, so the version 16, and with yarn version, the 1.22. So in this course, we will use the yarn version 3, and to work with yarn version 3, it's really easy, we just run yarn set version and bury. Burries basically the version 3 of yarn, and everything will be done. So if we go to our VS code, you will see that some files are also generated, like the yarn RC file, and we are ready to move on. So next step is to create the workspace, and this is really easy to do with yarn, we just run yarn in need from initialize, and then the W flag or the workspace flag. So now we have the workspace, and we can see the structure. We have read me, basically read me the packages that it will host our actual packages. And now let's go and create our first package, the foundation package. To do this, we will go to package this in foundation. Oops, we don't have an actual foundation folder, so let's go to package this. Create the foundation folder. Go to the foundation folder. So now we are in the slas packages, slas foundation, and to create the package we just run yarn in need. So we initialize the foundation package. And as we discussed, we will have react and storeable packages. So we make the same MKD react and MKD storebook. And we navigate to react, do exactly the same yarn in need, and go to the store book package. But instead of running yarn in need, here we will run yarn in need. And then the P flag, which means that these packets will be private. And this is because we will publish foundation and our design tokens. We will publish react for our component library, but we will not publish as an NPM library or storebook. So we don't need this be public rather than private. And we can see here that we have a private flag equals true when we use the P flag. So that's perfect. And to move forward, we need to somehow make our packets is dependent on each other. So we see that the react packets will be depending on the foundation packets and the storebook packets will be depending on the react and foundation packets. But there is something here that we need to take care of. So if we go to the storebook packets, let's say for example. And we want to add the dependency to the react packets. If we just write dependency and react, how do we ensure that we mean the local react packets rather than the global react packets from the Facebook team? So here comes enhance them the scope operator that we will use. So if we go to the react package of JSON, instead of having our packets named react, we will use new line does ds slas react. And we will do the same for a foundation file and the same for the storebook file. So here if we go back and we write yarn workspace is least, we can see that we have three packages already installed. And to under the dependency, it's extremely easy. We just run yarn and then workspace, we target the storebook workspace here. And then we run the command add and we add two dependencies, the new line ds react and the new line foundation. So if we click run, everything is completed. And you will see here that we don't target any specific version rather than the workspace version and this is basically, this basically means that this is a local dependency. And we will do the same for our react package. We just added the foundation as a dependency and we can validate this here. We have the foundation as a local dependency. And basically this is it. So just to recap, we started our project with yarn and set it the version to yardberry three. And then we created all the packages and added the dependencies in the package. json. And now let's move forward and add some TypeScript and easily the configurations.