Yarn Workspaces Tutorial

hey guys so there is a new way to set up your projects and it's known as the mono repo method and projects like Babel j/s and react chests are using this and a lot of projects are starting to adopt it and how it works is instead of separating packages out and two different repos and two basically different folder structures and whatnot you put everything into one so here is Babel and if we click on the packages folder we can see they basically have everything dumped into this one packages folder and that is all their individual projects and then it's all living under the hood of Babel and they're using a tool called a yard workspaces to use this and so we're gonna take a look at how you can actually use yarn workspaces in your own project and to set it up like this now before we get begin some of you are probably wondering why you would ever want to do this this seems like a ton of overhead to maintain over just splitting up the projects but one of the big advantages of this is a you can share dependencies and we'll talk about that in a second and two you can very easily share code between the packages which we're also about to see so let's jump in and start a our own yarn workspace if you will so I have an empty folder right here and this is where I'm going to start my yarn workspace or start my project so what I'm gonna do is I'm going to create a new file in the root directory called package.json so here is gonna be basically the root of the project and I called my project walnut and B can call it whatever you want and here we specify two things first that it's private so you save private is going to be true and in the second is your workspaces so here is an array of workspaces and this is all your folders for all your packages so for us I'm gonna create two packages at first I'm gonna call the first one common and the second one server so I now want to create two folders so I'm gonna make a directory called common I'm gonna make directory called server and there's gonna be my two workspaces and I'm gonna CD into common and I'm gonna do yarn and knit - why to initialize it and I'm gonna do the same thing inside of server so yarn in it so now I have basically two individual projects common and server and I'm just gonna open up common and do index dot JSP rhyme just going to basically create a function export it and then I want to use that function inside of server so I'm just going to be using nodejs and I'm going to be using module dot exports for this because I don't want to set up Babel or whatnot just for the simple thing in here I'm just gonna say console dot log hello from common so now I want to be able to use this function inside of server so I'm going to create a index dot JSP inside of server and what I'm gonna do is I can actually just import from the common folder so I'm gonna say Const function areas will say common function is equal to require and here we specify the name of our the package or the folder in this case it is called common so if I look at package.json the name right there is what's it's gonna have so we're gonna say common and then we can say common function we can just call it and I'm just got lower case this it's just a function and we can call the function so now if I tried to run this right now it would it would break obviously cuz server does not know about common that common exists and to tell it exists we have to add it as a dependency so I'm just gonna say dependencies and I'm gonna say common and in this case it's just 1.0 and now we do a yarn install so in here I'll say you are install and what this will do is it'll link the dependencies you'll notice a yarn lock showed up in the outer directory and if I do an LS so I go back up to my root directory by LS you'll notice there's now a node modules there and if I LS no modules you'll see both common and server inside of there so what's happening is it sets up a symlink so now common is linked to common and service like the server so now i can access this is common function here so if i call if I run node server index on a s we'll see it says hello from common so it was able to successfully use that function over there now they are siblings so what that means is if I make a change over here so for example 12 and I were to rerun this you notice I didn't have to do any kind of recompiling or anything it goes ahead and has the value there I'm so updates pretty much like instantaneously which is pretty cool the other thing that I wanted to go over is a better naming structure so right now in server you'll know I am just saying require common and it's kind of ambiguous where this is coming from so what people will do is they will take the name of their project so for example mine is called walnut and they'll prefix it basically what this project is with that so for example I'm gonna say at walnut slash common so this is a very common naming structure you'll see and basically it's the name of your project at the name of your project slash and then the name of the individual package so this would be at walnut slash common and then over here this would be at walnut slash server I'm and then your dependency you would need to update you want to make sure it's gonna be at walnut slash common so then in your index J s you would say at walnut slash common so now it's very clear that this is coming from basically your own big mono repo and it's one of your packages so now I need to do yarn install again to install the packages and then I'm gonna say node server index J s to run it and it sure enough it works alright the other thing so you saw with a babble that they had all their stuff under a folder called packages and I prefer to do it that way as well so I'm gonna create a folder here called packages and then I'm gonna move common and server inside of it so the only thing we now need to change is in our package a json here we were and the reason why by the way that you put all the packages is so now you have a very easy way to tell yarn where all your work spaces are because all you do is you say packages start and now it's gonna know that everything inside of packages is a workspace so we're gonna say yarns not start yarn install and it'll set everything up it looks like it's good and then packages server and XJS again and Oh can't find the module so I didn't mess something up and I think I just need to go inside of I think I just need to get it to reinstall everything so I'm gonna delete my node modules so remove RF node modules and then do a yarn install and try that again yep and that worked so because we changed the folder structure here I just had to kill node modules and reinstall things but now we can have everything inside of packages and I would say there's one last thing that's kind of cool about yarn workspaces is when I install dependencies they go to the top level so for example I'm gonna go over to my packages saver folder I'm gonna say yarn at graph QL yoga so this is a dependency I'd like to use in my project and what will happen is normally if you weren't using yarn workspaces right if you did an LS you then have a new modules folder here right but you notice it's not here at all so what happens is it actually goes in this root folder and if we do an LS on node modules you'll see there's a bunch of stuff in there now and basically these are all the dependencies that graphical yoga uses so now whenever I'm installing packages we only have one node modules so I might be using graph fuel in this package and in this package and now there's only going to be one graph QL installed in this whole workspace so you will not have a well you'll still have a big node module but you won't won't have a large node module for every single project now you only have one which is very nice and they all share dependencies so yeah that's how iron work spaces work and how you can set one up now this just gives you an idea of the concepts of how they work it doesn't really give you an idea how to actually integrate this in with your for example your own react applique or whatnot so what I'm going to do in tomorrow's video is go over how to add this to a react application and share it for example with a react native so phone to share a function between those two how would it work now it's relatively easy to set up if you're not using it's pretty much the same set up right you can see how you might set this up if you were using your own web pack so what I'm going to be doing is showing you how to do it with create react app and create react native app but yep stay tuned that's what's going to be coming down the pipe for tomorrow you

Channel: Ben Awad

Views: 39,692

Rating: 4.9410524 out of 5

Keywords: yarn, Yarn Workspaces, Yarn Workspaces Tutorial, monorepo, monorepo using yarn workspaces

Id: G8KXFWftCg0

Length: 11min 1sec (661 seconds)

Published: Wed Jun 06 2018