 Hey, we're live. I think everything's working Yep, yep, everything's working How are you doing it's been well over a week and Yeah, this this week was just Rough for me We had our our company retreat. I was coming back ahead I was just starting to get back into the flow of things after coming back from the conference and Yeah, man, I was just I was just bombed I failed to to stream almost every day and I Didn't even get an episode of react podcast. I was just wiped. I mean I just wiped from From like the conference thing going on and then having made some friends in town. It was just nuts Anyway, that doesn't have anything to do with what we're talking about today, but that is why I failed Distraming thing this week. Anyway So I had asked what people wanted to see for me kind of in the coming weeks and whatnot and the The idea was that people want the majority of people wanted to see some like real-life work Not just a kind of, you know new stuff and theoretical stuff But that for streaming I would do a little bit more of the the nitty-gritty real-world stuff So, um, yeah, so I thought what the heck we'll give it a try see what happens So today I kind of have like a unique opportunity to start kind of a small set of components and I thought that I would go ahead and just show you Or I may not show you I'm gonna be figuring it out because I haven't actually set up a monoripo in a Year maybe So I just thought we'd go through the tooling. I use learner for all this stuff I don't know if there's something else if there is Feel free to let me know about it Yeah, so this is what we are going to do Today is talk about learn and figure it out together. I've also only ever set it up with yarn and I like yarn yarn school But I think I'm gonna try to set this one up with npm I've been doing a lot more with npm because it had support for two-factor off Right away and there was that big scare About components or npm security and whatnot So I'm gonna be Using npm. It's possible that I might go back to yarn But I just didn't want to start with too many things. So we're just gonna use npm and learn Okay, let's see where we at right now Okay, so the first thing that we want to do is learn a the learn docs are at github.com slash learn a slash learn a and Go to learn a js.io for the actual like page Page about learn a with kind of like more like high-level documentation, which is great This is probably where we'll live most of the day today Or for the next 45 minutes or so So I have Let's see. I just set up an org for this project now the reason I did that. Oh, I'm gonna log in with Log in this is amazing by the way This whole one time. Oh shoot. I don't know if that was a bad idea. It'll expire in like 30 seconds Anyway, yeah, this one password integration amazing So yeah, so I have let's see. So where is this org that I set up? Okay, so use create or I haven't actually done anything on this yet. So This one right here Okay, so we set up this work and I want to set up a project for it Now I haven't I haven't done anything yet. So you're getting the the fresh you fresh But that is where we're going to publish everything. Everything's gonna have that at consent Scope and then each of the little packages are gonna be available at the package name But I wanted to have like a consistent named scope for that So we're gonna make a new project. I'll put that on the planning center org Consent And this would be like some component. I don't know Some CSS based Components I don't know. They're gonna be CSS. They're also gonna come up with a react component wrapper around them for consuming them in a react Environment so you have to don't have to string up all the the long class names So that's it. That's I just put that for now. Who cares I'm gonna initialize this with a get ignore for node and With MIT license just got the okay to start doing that which is awesome. Thank you planning center So we're gonna create this repository Cool awesome. We're repository. It's got to get ignore I'm gonna navigate to where I keep all the planning center business and We're gonna clone this already exists. Oh, yeah I'd kind of started a little bit yesterday, but got got nowhere before the a day ended So I decided to do is a stream today So we'll do Let's see kid Where am I get clone? Okay Now we get into that All right, so what do we have so far? We don't have a lot of anything. We just have these three files Perfect Um, yeah, so we got that. Okay, cool. What's the next step? Okay, so got the next step or we got that now we need to kind of initialize it as a learn a project effectively the way learn a works is that it allows you to kind of have control over Over managing and publishing a bunch of different packages, but in one repository so that's That's the goal is we're gonna basically have a folder of packages or modules or whatever we want to call it I'll just stick with the default whatever that ends up being and And in there are gonna be a bunch of node modules That will get published to like different packages even though they're in one repository Now the benefit of this is is that it can be really cumbersome to have a bunch of projects kind of all managed independently and This helps us with that so Again, I haven't set this up in a long time probably on a really old version like, you know Definitely before too maybe even in the ones I'm sorry very shameful So yeah, so let's let's see so let's get started. So this is about just kind of talks about who's using it and why Feel free to peruse that but I just want to get started. So Here's the getting started section We recommend using it in so to okay, so use 3.0 perfect Let's start by installing learn is a dev dependency of your project on npm. Okay. I like that Okay, so we navigate to our repository great. I'm already there Now we NPX Lerna in it NPX is great Basically allows you to not have to install Lerna as a global which is great for things that this is great for things That create react app things that you run not very often But you always end up having to update them before running them NPX is great because it basically just pulls whatever the latest version is runs it and then cleans up after itself So I love this command. It's great So we can see Here, so we're just gonna say NPX Lerna in it Now I want to make sure yeah, we're supposed to be inside of our repository when we do this Cool real fast See what changed Okay, so now we have a See so now we have a Lerna dot JSON file That has a property called packages with an array that shows the where the packages can be found So it doesn't just have to be one directory. You could have multiple directories of packages Which is cool And then the version now I actually I think I want to version these independently Let me see what changed in package JSON first Hey, King Daru did I get that right? Welcome. Thanks for checking in Let's see what changed in package JSON. Nothing. Oh, it's new Okay, so we have a package JSON now. It's called Name root private true dev dependencies. I'm realizing that I probably should have done in NPM in it in this project That's fine, I can always run it again later Okay, so the thing that I want to do is I want to make sure that these are versioned separately And I know that there's a flag for that. So that's gonna be here independent mode and I think This command is I didn't potent Which means that I can run it again Is it independent I can never spell this word right even though it's super simple because it's all ease I always get it wrong Independent Okay Yeah, cool, so now versioning is independent so each package inside of packages is going to have its own version Now I've actually had trouble with this in the past. So I'm hoping that it's better this time but theoretically I can I can only publish Updates to the packages that changed instead of having one master version for all of the packages that are included This is I think it in practice. This is severely more complicated But I think that it allows on the consuming side. It can be really nice when you only depend on a couple of packages you don't have to The numbers mean something to you at that point because you can see like did this particular package change in a breaking way or or not So this is this is I Don't know it's it's a trade-off I think it depends on your goals. I know for this project in particular People are going to be kind of picking and choosing which of these they're using so I'm gonna stick with independent Let's see. Okay, cool. So Now, how do we So learn a repo Awesome, thanks Byron. Yeah, I'm I hope that it's useful to you But yeah, this is a this is a fun. This is a fun topic I I had varying degrees of success with setting up and using a mono repo architecture for code. Um, but The more people that do it the more Feedback I can get and learn better myself. So We're all learning today. Um, let's see So we also noticed that we have this new directory called packages. Um, so Uh, let's see. I'll ask see if there's anything in Package packages nothing in packages. Okay, cool. Uh, so how do we get something in packages? Actually, I'm gonna Get and Just gonna commit where we're at Someone told me once If you ask yourself, should I commit or not do it? Um, let's see. So, um, Okay, so they talk about fixed mode independent mode already made that decision uh core concepts Okay I'm sure all this stuff will become important very soon But really I just want to get I want to add my first package list of globs which are Leaf packages versus the root package which is intended to manage the dev dependencies and scripts for the entire repo Okay, so this is this is important. So, uh As far as I understand this You want your dev dependencies to all be in that root Level package. So, um, if you so in my case, I'm going to be including react in react dom In all of the packages that are included here. So I want to include that in my root dev dependencies Not in not managed independently in every package So, um, that is important. We will kind of bump around the edges of that um, but defaults uh learn initially Yeah, initializes the packages list as packages star But you can also use another directory such as modules star or package one package two. Okay, gotcha Um, for example, nice. I have a nice little tree for us here. So, uh packages, um Okay, so foo package bar package each with their individual package json perfect Um, and then I think this is just a more Complex structure if you were to do these nested Um, okay, cool. So common dev dependencies Can be pulled into the root of lerna. This is a few benefits all packages use the same version of a given dependency Yes, please Um, can keep dependencies at the root up to date with an automated tool such as greenkeeper excellent Um dependency installation time is reduced less storage is needed. Yes. Yes. Yes Hey, no that dev dependencies providing binaries. Okay, I'm not gonna deal with that right now Um, for example, yes. Okay. Yep. Yep. Yep. Yep get hosted dependencies not worried about that readme badge Uh Sure, why not? I like stuff like this Okay, um wizard Oh interesting person For some guidance for cli in case you're about to start using lerna or just team you might like learn a wizard Lead you through a series of well-defined steps. Okay. Let's let's check it out Now there's a lot of like Like this stuff like the sim linking the packages and whatever like the related packages if I were to have Create a package that depends on another package that I have There's a lot of stuff that lerna does for me that I truly honestly do not understand yet. Um, so We're gonna we're gonna figure it out Getting started. Okay. I'm not Sure that I want to go down this road Yet I'd like to fail fail first If that makes sense Okay, so they have a bunch of commands and these are actually great. Um, they're all kind of They all have their individual readme's in these. Um, the this commands folder, which is which is terrific Um, unfortunately on this side of things, um, there's not like kind of hints as to what they should do So I think those exist a little bit more On this side of things. Sorry for all the scrolling. Okay, so learn it in it. We already did that um Learn a bootstrap bootstrap the package in the current learner packages in the current learner repo installing all their dependencies and linking any cross dependencies This command is crucial as it allows you to use your package. Okay Publish we're not in publish yet learn to change. We don't have anything to I'm diff. Okay. I'm wondering if there's like a learner like a learner new. Is there a way to set up like a new package? Yes, maybe add So maybe learn a bootstrap and learn a add Uh, learn a Oh learn to create that's That seems promising Create a new learner manage pop package. Excellent Documentation is a little shy, but uh create a new learner manage package Uh, let's see name package name include including scope awesome Which must be locally unique and publicly available. No problem a custom package location Defaulting to first configured package location Access when using a scope set publish config dot access value um I'm wondering if I can set I'm wondering if I can set the scope and access um at a higher level I won't worry about that now, but It is a it is a question in my mind because I'd like to not have to think about this every time So let's do let's run this command see what happens um Let's see the first thing that we're working on as a team is um an avatar Uh, because it's the simplest thing with the fewest amount of of constraints and moving parts. So Um, let's see npm run learner Is it installed right for me? Yes. Okay, cool So npm run learner create avatar missing script learner Maybe you have to run the global Oh, right Okay, cool. I guess we'll run it as a global for now, but I'd like to use that as in the internal script um I'm trying installing things and see learner as a dev dependency So much time. Okay. I guess I always forget how to do this um Setting on all this stuff up. It's like I interact with it so infrequently Um That I always forget everything I'm just going to use the global for now. I don't want to deal with that. So learner create Actually, I'm going to add these questions as they come up to my tattoos Questions Can I use a global scope in the project route and I use a global Public Private project route Uh, what was my other question? Uh, oh, yeah, I know that I can because I do it in my other projects. I just don't remember how I have it set up um Okay, uh, cool. Perfect. Um lurva lurva learner create avatar Uh package name. Oh, yep. I need to add my scope Oh did all that anyway I think it says with the scope right Package name including scope which must be locally. Yep. Okay entry point. Oh, yeah, I guess it already scaffolded that so sure Yeah, lib avatar Um Yep, that's a repository Yes, looks good Okay, so let's see what it made for us um, okay, so in packages it made This little this little doodad avatar um a folder Okay, so those are my questions those are package json. Uh, we have tests avatar.test.js Okay, pod perfect Um the jase uh what package json for this package very nice. Um it Uh Repository wise it connects to the the get root so that's awesome and um, yeah issues again at the get root perfect. Um read me excellent to do description Great, so let's see if I go to See what scripts I have available Uh package json. So if I go to Uh go into this directory Oh packages avatar Um, I go npm run test Nope Here run test from root. Oh, okay. I guess I'm gonna just do npm test Here are no tests specified. Okay So what do we what's our problem here avatar test? Run tests from root exit. So I'm assuming That error is here I'm thinking that maybe I need to learn a Learn a run test run tests from root Interesting. Let's see what we can find Testing across repositories gets complicated really fast. Okay problem explanation. Get it Um, let's see learn a diff exec run. Okay. So what's the difference between exec And run learn an exec command Okay Learn a run script Okay So should be able to do Runs npm run script in all packages that have it Learn a run test. Okay, so I have test, but it's going to say So I don't actually run this test. I think maybe I'm assuming too much of all this. Um I'm assuming Yeah, I think I'm assuming too much of all this because I don't even Let's see. Can we We Act go to that directly packages Avatar Yeah, okay. Cool. So we don't even have like we don't even have an environment set up for this So That is something that we'll have to figure out on a no bail test Okay, cool. That's fine What we do, um Okay, so we don't have anything Kind of set up for us by default. Uh, that's fine a little misleading but fine Um, okay, cool. So It's just it's just demonstrating The structure of a project Okay I like that Um I'm curious if you can Yeah, okay, so we have our project Let's come at what we got that package Avatar Probably go for another 10 or 15 minutes. Um, I'd like to Oh shoot, you know what I didn't do I didn't set the when I created this I did not set the Close some of these I'm getting confused now. Um, I did not set the private Um, oh my gosh, okay. There just learn to create. Um, I didn't set that that access flag So I'm gonna have to do that. I'm see choices public restricted or public Um Oh defaults the public. Okay, cool. Perfect. Um, okay Let's try publishing. Uh, obviously that's not much to publish but it will be eventually Uh, learn to publish I'm already streaming. I'm not sure. I must have got my calendar wrong Um, okay, so select a new version Of consent avatar. Okay, cool. So, uh, this I'm gonna Do this as a We should do a pre major Yes, alpha zero, I like that Eventually it'll be 1.0 Yeah, we're working towards a 1.0 And uh, right now it but it's not that so we'll do pretty major. Uh, are you sure we want to publish this package? Yes, I am sure I want to publish this package waiting waiting excellent cool, so So we have success. Um Again, this doesn't do anything yet, but it will. Um, so consent avatar. So we have, um I don't know what it's doing. So we can do npm info at consent slash avatar We should be able to see all the information So license to mit no dependencies. There's only one version and all the checksum stuff maintainers yadda yadda um And the disc tags so I want to let's see. So Yeah, so now there is some cool stuff that learner does for us. I want to go back to the github page Um, so we see that's maintained by learner Oh Uh, great. So that worked. Um, again, so we can see this visually. We have our avatar package and all this stuff. That's great. Um Did a lot of nice work for us Now what uh, what was I going to show you? Oh what I wanted to show you was the tags So now as you can see there is a it tagged This um, this can this publish, right? So I didn't add that tag Learned it for me. Um, so this is this is really great stuff. Um, see, I don't know if I can See it. Yeah publishing tags. So once you kind of accept the version that you want, it's going to publish these tags Um for you and then commit them into your repository, um, which is which is so great because each of these tags, um are Like effectively releases so You can then um, let's see in releases if you wanted to go in here and further Kind of clarify what happened in there on github. Um, you can totally do that. So we can say draft new release and we can pick, um Let's see. We can pick a tag. I think Can't remember how this works Oh tag version I think I might have the copy and paste that in which is kind of weird. Um Yeah, whatever. Anyway, you can do that all here. I can put the tag in here I can say here's all the things that changed. Um, let's just grab that tag and do it Oh, here we go tags It tag. Oh, cool. You can edit the tag right here. Nice. Um Releases let's go to here. I think I can attach it to a tag Yep existing tag um Actually, not yet. This is a pre-release What was this release Cool. So now I have notes on that tag which are really great. Um, so people on my team can go to that releases And see all of the all the stuff Um associated with that not have to like bury through code. Um So I guess the last thing I want to show you is if you go to npmjs.org and we look for this package through our org scope and Avatar we can see that it is all there with the readme all the the correct links attached. Um, so Uh, yeah, so honestly, we did we did a lot of good work in a half hour. I think Um, that's probably all I'm going to cover today Unless I unless you have questions real quick. I really just wanted to show us getting it working. Um, particularly with org scoping and all that kind of stuff Um, I think I think what I'll do is just do one I'm gonna do one more addition real quick And in here Um, I'm gonna add Because these are primarily going to be there's going to be a component Uh consumer of a css api So for the um, I'm gonna add that css file real quick See in package json Files, okay, so we're using the lib directory. So anything to put in lib is going to go up there, which is great. Um avatar.css Um, how did this work? I think it was just like avatar Man, I can never remember Box sizing. Whoops. What was border box? Um And border radius This was like the simplest implementation. I can think of Um for our like just rounded circle avatars um So yeah, let's add that Add avatars.css to avatar package And then we're going to learn a Actually, let's run learn a diff So there's a bunch of commands here So you can do like learn ls that'll tell you which packages you have so it only found um avatar content It's all the only package we have um, you can do learn a diff to see which packages changed And what changed So, uh, we have a new css file perfect. That's exactly what we want. Um, that's committed in We can push that up And um, let's publish Okay, so it's going to ask us which version we want again again. It will show you Which one it's asking for which? Which libraries is going to increment? So we're gonna do Um It's kind of weird. I I expected this that that Final number to increment here, but um Okay, so we're just going to a custom pre-release Okay, so it incremented it here for us Awesome, so it's going to go from 1.0.0-alpha.0 to 1.0.0-alpha.1 Uh, you should want to publish this package. Yes, I am sure Doing all the business and avatar Okay, cool. So, um One the one way that I love navigating the actual stuff that gets published is through unpackage. Um, so if you Uh put a slash On the end of whatever if you do If you just navigate to the package like this it's going to Grab the most recent version and it's going to do whatever the default is However, uh, if you do a slash It'll give you a direct review and you can actually pick from the different versions. So this is great So we can see that Um in version one if we go into lib There's just avatar j s but if we go to version one We can see that that css file. Um, also got published Um, so yeah, there's not a lot of magic to this. Um, one thing that I forgot to do is that there is also a style So this is directories main. Um, there's a style attribute that you can use Um for style sheets Um, so I will add that in Uh link Style Comey. Okay, cool. Um, I think that's probably enough for today. We uh, we got our one package Package running. Um, we'll probably do package linking. Um tomorrow Or actually I'll probably set up a component tomorrow and we'll do the root The the the root uh, the root dev dependencies is the thing that I'll try to tackle tomorrow Make sure that those all link up properly. Um, so anyway, that's it. I hope that this was helpful We covered the kind of just just learn a basics the um, kind of setting up a project that uses an org scope And um, kind of like how to navigate it and look at it and all that kind of stuff. We've got one going So i'm feeling pretty good about this. Um, this is awesome. So thanks for tuning in. Uh, tomorrow we'll do more with uh, with learning