Monday Monday open wide dev fans get ready to stuff your face with JavaScript CSS node module barbecue tip get workflows Break dancing soft skill web development the hasty s the carasius the tasty web development treats coming in hot Here is where's Barracuda boss and Scott El Toro local Ooh Welcome to syntax in this Monday history treat I'm gonna be talking about pnpm and Workspaces and mono repos and even get some modules and a little bit about how we're doing a mono repo using the following attack My name is got two laser Developer from Denver, Colorado and with me as always is the West the boss man boss. Hey, I'm excited to hear what the P NPM stands for is it performance. I think it's performance but same difference. Yeah.
I was a bit of a joke But that was good We are sponsored today by two awesome companies fresh books and log rocket I'll tell you about fresh books. Let me tell you fresh books is the cloud accounting solution for your small business It helps you get paid much faster than usual Why does it help you get paid much faster than usual because you log in you can use it to track your hours You can create an invoice, you send that off to your user or your client, your clients love it, because they can pay by credit card on there or you can add notes on sending them, I still get paid by checks a lot, which is funny to people outside of, maybe even outside of Canada, we still do a lot of checks here in Canada, you get them in the mail and you go deposit them. You do the photo that check, yeah. We just got the photo thing, which I love, in our bank machines recently got, you just put the money and the checks in a hole, and not in an envelope, and it takes a picture of them, and no, it doesn't work very good.
I also because I just stuffed them in my pocket and then they're so crumply. Anyways, back to FreshBooks. FreshBooks, they send late payment invoice reminders to your client, so you don't have to go to your client, say, hey, you didn't pay me for this, FreshBooks will send that for you, and it's a little less awkward that way. So if you have a small business, you're a freelancer, you're sending invoices out and managing your spends.
Check it out, freshbooks.com, board slash syntax, make sure you enter syntax in the how did you hear about a section when signing up, because that keeps FreshBooks from coming back. Thank you, FreshBooks for sponsoring. Real quick on the topic of checks, one time when I was in college, I got a check, and I never deposited a check in the ATM, before you always went to the branch, but I was like, how much of the ATM, right here, and I did all the stuff to do it at the ATM, and the little slot opens up to stick, the envelope in the check in, and I must have slipped it into the gap where the machine, like the gap where the two machine parts come together instead of the check slot. So there's nothing, and they had to take apart the ATM to get it out, because I was like, I'm so sorry, I think I just put this in the wrong spot, I'm a big idiot.
I look heavily by the bed. I would love to be in a room where they test, there's a certain kind of testing where you have to sit around and figure out what are possible ways people could do this wrong. How could you goof this up? Yeah.
Oh man, that's hilarious. They probably had a ticket somewhere with a video of you putting the- And like, kind of being like, oh no. Well, here's actually a good segue into our next sponsor. If you had a system that was designed like that, and somebody was using it incorrectly, that might show up on your error network, error logs or network logs or anything, and that might show up in your log rocket, which would show you that video of me putting my hands on my hand and saying, oh no, because what Log Rocket does is a video session replay for your errors and exceptions in your application.
You're not gonna actually get a screen cap with the user saying, oh no, but you will get the mouse cursor activity as they're contemplating what to do next as the whole thing doesn't work. So you're gonna want to check out log rocket at log rocket.com forward slash syntax. This is the type of service that you really want to watch their video on because it's so cool. How many error and exception times you get an error coming in and you have no idea how to solve this thing.
And with Log Rocket, it gives you a video replay along with your console, your network logs, even your Redux stores, if you got them, all sorts of cool stuff to be able to see and solve issues fast. So check it out at log rocket.com forward slash syntax. I'm gonna get 14 days for free. All right, PNPM, what is PNPM?
I just really say what is Wednesday on PMPM? If you don't know what sort of a series I'm doing on YouTube where I describe something on plain English and five minutes or something. It's funny because I did this, PNPM video on YouTube. And the criticisms that people often have about these, what is videos is that they're just like, you didn't show me how to use the thing.
I'm like, yeah, I'm just telling you what it is. That's the point here. So that is the series. So if you want a maybe a little bit further explanation, you can check that out.
But PNPM is basically performance NPM and it manages to be performant in a number of ways. The installation process is faster. In my experience, it's much faster. And even like the little things, like we were talking about like the console output West.
The console output is much nicer, way more readable. And it's that ugly, PNPM looks much better when you're installing, like that even matters. It does though, like especially if you're, you're doing a course, people get really scared with all the stuff that NPM performance onto the screen. And it's gotten a lot better in recent versions of NPM, but it's still far from being decent.
Yeah, totally. It's a nice little thing there. But either way, it's performant NPM. And how does it become more performant?
Well, the big one is that it stores your node modules in a singular location. So I don't know about US, but I have a command that removes all node modules from a given directory so that I can periodically purge node modules from all of my projects. And what PNPM does is it basically when it installs a package, it installs it via a SimLink. And a SimLink is just a link where a directory links up to another directory.
So anytime you install one package on your machine, PNPM is putting it in one singular location on your machine rather than within the project itself. So that way it's not always having to go off and fetch things, but it's also not having to fetch redundant things. It's fetching the same things and putting them in the same location. And that way they're available on your machine.
And it's just sim linking to them. It's also, if you have multiple projects using the same module, it's gonna save you a ton of disk space, which to me, that was a big one, because no modules take up a sneaky amount of space on your computer. Oh yeah, I have a command that I run every now and then. Yeah, let me find it, because people are gonna tweet us forever.
So NP kill will tell you what size are the folders and that will allow you. It'll say when I tweeted this, that I had 30 gigs of node modules, which is significant on a 1000 gig drive. And then there's also wipe dash node modules. We'll do that as well.
That one's nice because you can say anything older than 60 days old delete the node modules. That's not an active project that I'm working on. Yeah, that's great. Because those things, it adds up.
And then you check out your Daisy disk or one of those hardware, hard drive analyzers and Coli Cow. Where did all this space go? There's also a really good model repo support, which is what we're gonna be talking about. And then it's strict by default.
What it means is that it allows you or it creates a non flat node modules so that it nests the projects inside of them. That way code has no access to arbitrary packages. As in, like your dependencies are truly your dependencies. Now, I had some issues with GraphQL being a baby and GraphQL was telling you that there was multiple versions loaded.
So I unfortunately could- I've been there so many times. I've been there several times in the past month and it is driving me nuts. So like many of the solutions to that were to use the shamefully hoist option in PMPM, which hoists all of your, so you don't get that flat or you don't get that non flat node modules, which I don't know, whatever, either way. As long as that error doesn't pop up, I'm a happy camper.
That's really what it comes down to. Okay, so that's the rundown on PMPM. So why mono repo? Mono repo for those of you who don't know is basically when you have multiple packages, multiple package.json's multiple projects inside of one encompassing folder.
And mono repo is largely seen as the idea of being able to control those or manage them all from one central parent repo, a one central parent's repository that contains all of your projects. And that parent usually has its own package.json and its own commands and things like that that it can manage. So why have a mono repo? It makes working on custom forks easier because if you have a mono repo with a packages folder, you can just fork a project, toss it in your packages folder and then have your own fork of that project right there.
It also makes having your own custom packages easier. In fact, we've been doing this on Level Up more and more. We can't open source our entire application, but we can open source little things about it. And then that's nice to be able to put that stuff out there, but it also can lead people back to Level Up tutorials, but they can also take advantage of some of these new packages like the Svelte Admin tool that I built, Svelte Toy, is like something that we use all the time.
It's like, man, other people should have this. I'm currently working on open sourcing our GraphQL fetcher, which is pretty neat as well. So it allows you to not only open source packages, but have packages, custom packages, just basically keep things organized. It also allows different projects to share code really easily.
It makes it really nice if you have several UIs that are all utilizing the same UI components, you can just import from the package. And what's neat about this is that using this specifically when you npm install something, if that package exists in your packages folder, in your mono repo, it doesn't go off to npm to try to install this package, it uses the local one. Meaning you don't have to deal with npm link or any of that stuff that you would have had to do to link up a local package in the past. It just takes care of it.
That's nice. Yeah, it's super, super nice because like all you have to worry about is the thing I'm installing doesn't have the same package name as the thing, you know, that's in my packages folder. So how do you do a mono repo in PMPM? We got both of those two things down.
How do you do a mono repo in PMPM? And it's sort of used in something called workspaces. Now workspaces are not exclusive to PMPM. This is a feature that exists both in yarn, npm and PMPM, most recently added to npm.
Yarn and PMPM have had them for longer. And this is a feature that'll basically allows you to describe a mono repo structure. Now everyone has a different syntax for this. So this is the syntax for PMPM specifically, not the other one.
So with PMPM specifically, you end up creating at the root, the parent folder of all of this stuff. You end up creating a yaml file, which is the PMPM-workspace.yaml. And in this file, it is tiny. You just specify a directory and then it's path.
You say, hey, I have packages. And inside of my, or I have packages and my packages directory is a glob pattern. So mine is just packages forward slash asterisk. That's it.
That's the entire file. That's awesome. Yeah, that tells PMPM, hey, all your packages, they're in that folder, which is great. And that's pretty much it.
Yeah. Especially like if you look at Keystone or Gatsby or pretty much any large open source project right now, you'll see that they have a package directory. And inside of that, there's sometimes five, 10, 100 different packages. And the benefit to that is that everything is in a single Git repo.
You can release everything all at once. It just makes things, a couple of years ago, people were sort of against this whole monorepo put everything in a single repo. But honestly, as you start to chunk things into separate packages, like your video player and your authentication and your GraphQL that you're saying, it's really frustrating to have that in separate Git repos and separate NPM publishers. Super frustrating.
Oh, so much simpler when it's all in a single Git repo. And you have tooling like PMPM to manage all of it. Yeah. And we even share some utilities that are like based JavaScript utilities between our UI and our API.
And it's like sharing code between those types of two projects is kind of a pain. Sharing code in general between projects when you don't have a setup like this as a pain. So how does this all work in practice? You've defined your PMPM workspace file.
You have your packages inside of a package folder. What it's now neat is that you can control basically any of your packages from that root folder. So all commands you can run from the root and you can then essentially execute commands or scripts in your sub packages from your root. And PMPM does this in a really interesting way.
You filter out the packages that you want to run on. So if I wanted to run my UI dev and my package for my UI dev is named at level of touch UI. I have a script in the root of my package.json named UI colon dev. The colon's nothing, it's just a formality.
And the script ends up being PMPM recursive run dev hyphen-filter and then the name of the package. So you're saying, hey, run dev on all of the packages that fit this filter. This filter is at level of touch UI. So it's only that one.
And so therefore it's going to go off and run dev on that one. Now you can have multiple packages in here. So if I want to run dev on both my API and my UI, I have a PMPM command, which is a PMPM dev. And that runs dev on all of the packages in my UI or in my packages folder, which is the entire project.
So that becomes really nice when you want to orchestrate a bunch of stuff. If you want to run a bunch of things at once, this allows you to run this all at once. There's also, you can have a clean script that will then recursively remove all node modules because you can run that recursive execute and run shell commands from this. So PMPM recursive exec hyphen- and then you can run whatever the heck you want to run as your shell commands on everything, whether that is a remove the node modules from all of them and clean it, maybe remove the lock file for some reason, if you need to remove that, you could build your whole API.
You could npm install, recursively install all of your node modules and everything. Is there any window support for that as well? Is that just a Mac command? Or you haven't had to test it?
Man, Windows Subsystem Linux is not something that, or even just Windows in general, the command line. It's something that honestly scares me. I don't know too much about it. I've just been in this Unix world for so long here.
Anytime I have a course with one of these clean or any sort of custom command, it's always like such a chore to get it to work on Windows. Everyone's always like, just use Windows Subsystem Linux. And the answer is obviously, but I want my course. Like I don't want somebody who's using Windows and doesn't know what WSL is.
What happens is they rage quit it and they want to refund Windows. It doesn't work. So I always have to make sure it still works on just regular Windows terminal, which is frustrating. But I bet you could get that working.
You're not doing anything too crazy here. Yeah, I mean, again, and you can run the command. I honestly have an, I would love to hear from someone who knows how this all works. I honestly just do not know too much.
I need to educate myself. It's safe to say, if you're using a mono repo, you probably also know about Windows Subsystem Linux. That's a pretty safe assumption, I'd say. Right.
Yeah. So it's interesting. Now, we mentioned that this is like a good way to keep all of your packages in one repo. But we have a kind of a unique need.
We're like, our root in a main repo. Kind of needs to be private, right? We have our API and stuff in there. And so we were like, well, how do we open source and have public repos for some of our packages, but have much of a be private and then in the mono repo?
So that's where we reached for sub modules. I know a lot of people don't like sub modules for some reason. And me personally, I've just kind of stayed away from them because of, I guess, flood on the internet, where people just say sub modules bad. So like, okay.
Yeah. And so I found this really great post from Paige, nearing house, who as, you know, Paige, I always ask the best questions in our potluck. And it was like, I was so thrilled to have this blog post because it's fantastic. I'll link it up here.
And from March 2021 about get sub modules, and it really gives a rundown about sub modules. And it made me be not scared about sub modules. And so we use sub modules now, and we have our public packages, are their own repos. They exist outside of our mono repo.
And then to use them, we just have a sub module inside of our packages folder. And before we build in our deploy, we just basically run a simple command that fetches all of the sub modules. So the flow ends up being, you know, you go to host this thing, right? Or you go to start this repo up for the first time.
You clone the repo, then you pull the files, then you pull all of the sub modules, and then you run npm install, whatever. And it just functions like a normal mono repo after that. So the only barrier to working with these sub modules is that flow of pushing up to the modules themselves, which VS Code kind of just does that for us. The visual tools there.
In fact, I actually recently set up like auto syncing into VS Code, which whenever you commit it auto pushes to the current branch, that's been nice. That's been really nice. I don't even have to think about it. I always forget to push to the branch sometimes.
So either way, if you were setting up this project from side, you do get sub module update hyphen, hyphen recursive, hyphen, hyphen remote, and that's going to pull in all of your sub modules. Then we run pmpm install, pmpm UI build, that's it. And I should say Wes, many of the modern hosts, they don't have PMPM support directly. So we were using NPXP, NPM to do it.
Ha ha ha, that's beautiful. It was beautiful and it worked. However, I tweeted out about to render.com and said, hey, is the ancient guys NPMPM? And render.com responded back with checkbox 24 hours.
Wink, I mean, not exactly, but basically. And they had it. Now render.com, I think is the only one of these, these kind of modern hosts that have it. So I'm pretty psyched about that.
And now I just use PMPM. So thank you, render.com for doing that. And it's awesome. It works really nice.
That's awesome. NPX is something that we should do a little hasty on like the benefits of NPX. It allows you just to NPM install and run something in one go. And that's a really interesting use case for that type of thing.
Yeah. Do you know, I think PMPM even has their own, what is the yarn version of that? Because they know NPX. So there's NPX.
I don't know what the yarn version of it is. Because there is something. I think it's like yarn run script or something. Yeah.
And PMPM has their own. But I almost always use NPX. I don't know why. Yeah, I don't know.
That's a whole other question is, why did you use PMPM over yarn in this situation? I tried it in this fast. Yeah. That's really what it comes down to.
Just worked good. It just worked good. You know what? I looked at the workspace, the workspace stocks for yarn and the workspace stocks for PMPM.
And I like the way that the PMPM just docked spoke to me for some reason. I wish there was a more scientific answer. I'm laughing because it's I'm looking bare as to how it non-scientific or just like whatever. My own is just whatever.
I just liked it more. Just cut the vibe right. But I mean, honestly, that's really what I was. I tried it.
It worked the first time. It was fast. And I said, oh, yeah. I like this.
Nice. Yeah. Awesome. Well, that's really interesting to hear that.
I've always thought that setting up on Monoripo is a lot more tricky. But it seems like put your packages in a folder, set up a couple of scripts the first time you do it. And you're off and running. Yeah.
Do you have anything to publish these to NPM? Or you don't publish your stuff to NPM? So to publish to NPM, it's a really simple command. But it's one that I always have to hit my up button until I find it.
Is NPM publish, I can access public from the root of that one? I actually don't have those commands in my Monoripo yet, which I should have it be published this, published that. What I'd really like to rather have is like a GitHub action to update the versions and do a change log, something like that. I just haven't done that yet.
Yeah, that's a whole other level of being on rails. We have a pretty great GitHub action set up for level up to do automated deploys and testing. So it won't be that tough. I just haven't had the time.
Yeah, totally, totally. Cool. All right. Well, anything else that?
Yeah, no, it's a lot easier than you might expect. And like you mentioned, I always thought in many times that it is more difficult to set up a Monoripo. I mean, if you go to some of these Monoripo providers that are like, we're the Monoripo, I'm not going to name names here. But if we're the Monoripo set up, and then the documentation's like pages and pages long, and you're just like, oh, I don't want to deal with this, I found this to be a very, very simple alternative.
And it does everything I need to be. We're not on a team of 1,000 people here. So it doesn't need to be that intense. I think for most Monoripo use cases, this thing really kicks butt for how easy it is.
Workspaces. Who knows? So if you're on Yarn NPM or PMPM, I found the workspaces for NPM, of course, to be a little obtuse. But of course, but yeah, that's just the way it is.
So that's all I got here. I hope you found this interesting. And I hope if you want to craft an easy Monoripo with PMPM, give it a try. Awesome.
Thanks for tuning in. I'll catch you on Wednesday. Peace. Peace.
Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player, or drop a review if you like this show.