Hasty Treat - How to Setup a PNPM Monorepo

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott

CSF key. Oh, welcome to Syntax.

In this Monday hasty treat, I'm gonna be talking about PMPM And workspaces and mono repos and even Git submodules and a little bit about about how we're doing a mono repo using the following Tech. My name is Scott Zolinski. I'm a full stack developer from Denver, Colorado. And with me, as always, is the Wes, the boss man boss.

Hey. I'm excited to hear what the p in PNPM stands for. Is it performance? I think it's performant, but Same same difference. Yeah. Oh, that was a bit of a joke, but that was today by 2 awesome companies, FreshBooks and LogRocket. I'll tell you about FreshBooks.

Let me tell you. FreshBooks 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 of the check? Yeah. We just got The photo thing, which I love. And our Great. Bank machines recently got like, you just put the money and the checks In, like, in a hole and not in an envelope, and it, like, takes a picture of them.

And, no, it doesn't work very good f. Also, because I just stuffed them in my pocket, and then they're so crumbly. Anyways, back to FreshBooks.

FreshBooks, they send late payment invoice reminders to your clients, so You don't have to go to your client and say, hey. You didn't pay me for this. FreshBooks will send that for you, and it's a 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.comforward/syntax.

Make sure you enter syntax in the how did you hear about us 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, I'd never deposited a check-in the ATM before. You always went to the branch, but I was like, oh, I was gonna do this at the ATM. I'm 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. Yeah. And I must have slipped it into the gap where the machine like, the gap where the 2 machine parts come together instead of instead of the check slot. So there's, like, a big and they have to, like, take apart the ATMs to get it out because I, like, put it in. I was like, I'm so sorry. I think I just put this in the wrong spot. I'm a big idiot. CSF. I Oh, man. I still can't believe I did that. 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 yet? Yeah. Oh, man. Yeah. That's hilarious. They Probably had a there's probably a ticket somewhere with the video of you putting the and, like, kinda being like, oh, no.

Well, here's actually a 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 LogRocket, which would show you That video of me putting my hands on my head and saying, oh, no. Because what LogRocket does is a video session replay for your errors and exceptions in your application.

You're not gonna actually get a a screen cap of 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 LogRocket at logrocket.comforward/syntax.

This is the type of service that you really wanna 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 LogRocket, 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 logrocket.comforward/syntax.

Sign up today and get 14 days for free. Alright.

PMPM.

What is PMPM? I just released a What is Wednesday on PMPM. If you don't know, it's a series I'm doing on YouTube where I Describe something on plain English in 5 minutes or something. It's funny because I did this What is PNPM video on YouTube, and, like, 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 a maybe a little bit further explanation, you could check that out. But PNPM is basically Performant 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, Wes. The console output is much nicer, way more readable.

And, aesthetically,

the NPM looks much better when you install it. 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 vomits 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 you, S, 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. Yeah. And what PNPM does is it basically, when it installs a package, it installs it via a symlink. And a Symlink is just a link where a directory links up to another directory. So anytime you install 1 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 then that way, they're available on your on your machine, and it's just 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 node modules take up a sneaky amount of Space on your computer. Oh, yeah. I have a command that I run every now and then. Yes. Me too. Let me find it because people are gonna tweet us forever. So n p kill will

tell you what size are the folders, and that will allow you it'll say When I tweeted this out, I had 30 gigs of node modules, so which is significant on a 1,000 gig drive. And then there's also

wipe Dash node modules will do that as well. That one's nice because you can say anything older than 60 days old, delete the node modules because that's not an active project that I'm working on. Yeah. That's great because those things, they it adds up. And all of a sudden, you check out your daisy disk or one of those hardware hard drive analyzers, and you're like, holy cow. Where did all this space go? There's There's also really good monorepo 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's 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 me 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 PNPM.

So Why a monorepo? Monorepo, for those of you who don't know, is basically when you have multiple packages, multiple package dot JSONs, multiple projects inside of 1 encompassing folder.

And a monorepo is largely seen as the idea of being able to control those or, you know, manage them all from 1 central parent repo, a 1 central parent 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 LevelUp more and more. We can't open source our entire application, but we can open source little things about it. And then that's that's, like, 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 neat packages like the Svelte admin tool that I built. Svelte toy It's, like, something that we use all the time, and it's like, man, other people should have this. I'm currently working on open sourcing our 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 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 monorepo, 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 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. Oh, it's nice. Yeah. It's it's super duper nice because, like, all you have to worry about is The thing I'm installing, does it 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 PNPM? We got both of those 2 things down. How do you do a mono repo in PNPM? And it's through the use of something called spaces. Now workspaces are not exclusive to npm. This is a feature that exists both in Yarn, npm, and npm, 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 PNPM specifically, not the other one. So with PNPM 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 pnpm hyphen workspace dot YAML.

And in this file, it is tiny. You just specify a directory and then its 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 asterisk. That's it. That's the entire file. That's awesome. Yeah. That tells PNPM, hey. All of your packages, they're in this 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 packages directory. And inside of that, there are sometimes

5, 10, a 100 different packages. And The benefit to that is that everything is in a single Git repo. Mhmm. You can release everything all at once. It's it just makes things Couple years ago, people were sort of against this whole, like, 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 fetcher that you're saying, it's really frustrating to have that in Separate Git repos and separate npm published. Super frustrating. Yeah.

So much simpler when it's all in a single Git repo, and you have tooling like PNPM

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 2 projects is kind of a pain. Sharing code in general between projects when that when you don't have a setup like this is a pain. So how does this all work in practice? You've defined your NPM workspace file. You have your packages inside of a package folder.

Well, what'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 PNPM 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 my package for my UI dev is named at level up That's UI.

I have a a script in the root of my package dot JSON named uicolon dev. The colon's nothing. It's just a Formality, and the the script ends up being PNPM recursive run dev hyphen 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. Tuts. U I, 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 PNPM command, which is a PNPM dev, and that runs dev on all of the packages in my UI Or in my my packages folder, which is the entire project.

So that becomes really nice when you wanna 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, you know, have, like, 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 p n p m, recursive, f. E x e c hyphen hyphen, and then you can run whatever the heck you wanna 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 ins Our PNPM install will, you know, recursively install all of your your node modules and everything. Is there any Windows support for that As well as is that just, a Mac command, or you haven't had to test it? Man, yeah. Windows subsystem Linux is not something that Or even just Windows in general, the command line is some it's something that honestly scares me. I don't know too much about it. Oh, yeah. You know, I've just been in this Unix world for so long here that Anytime I,

I have a a course with one of these clean or, like, any any sort of custom command Oh, yeah. It's always, like, Such a chore to get it to work on Windows. Everyone's always, like, yeah, just use Windows subsystem Linux. I don't know, and the answer to that 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 a refund when it doesn't work. So I just have to make make sure it still works on just regular and Windows terminal, which is frustrating, but I bet you could get that working. That's you're not doing anything too crazy here. Yeah. I mean, again, you can run the command. Man, I honestly have not I would love to hear from some Windows people as how this how this all works. I honestly just do not know too much, or I just need to educate myself. It's safe to say, if you're using A monorepo, you probably also know about Windows subsystem Linux. That's a pretty safe assumption, I'd say. Right.

So it's interesting.

Now we mentioned that this is, like, a good way to keep all of your packages in 1 repo, but we have kind of a unique need where, like, our root and main repo Kinda 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 or some of our packages, but have much of it be private and then in the mono repo. So that's where we reached for submodules.

I know A lot of people don't like submodules for some reason. And me, personally, I've just kinda stayed away from them because of, I guess, FUD on the Internet where people just say sub module's bad, so, like, okay. Yeah. Yeah. And so I found this really great post from Paige Nearing House, who has you know what, Paige? Always ask the best questions in our potluck. Yeah. And it was, like, I was so thrilled to have this blog post because it's fantastic. I'll link it up here. Ends for March 2021 about Git submodules, and it really gives the rundown about submodules. And it it made me be not scared about submodules. And so we use submodules 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 submodule inside of our packages folder. And before we build in our deploy, We just basically run a simple command that fetches all of the submodules so that flow ends up being, You know, you go to host this thing, right, or you go to start this repo up for the 1st time. You clone the repo, then you pull the files, Then you pull all of the submodules, 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 submodules is that that flow of pushing up to the modules themselves, which Versus Code kinda just does that for us, the visual tools there. In fact, I actually recently set up, like, auto syncing in Versus 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 submodule update hyphen hyphen recursive hyphen hyphen remote, and that's going to pull in all of your submodules, then we run PNPM install, PNPM UI build. That's it.

And I should say, Wes, Many of the modern hosts, they don't have PNPM support directly, so we were using n p x p NPM to do it.

That's beautiful. It was beautiful, and it worked. However, I tweeted out about to render.com and said, hey. Is there any chance you guys end up PMPM? And render.com responded back with check mark in 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 account for doing that, and it's awesome. It works really nice. That's awesome. N p x is something that we we should do a little hasty on, like, the benefits of of n p x. It allows you just to npm install and run something in one go, and that's a really interesting A use case for that type of thing. Yeah. Do you know I think PNPM even has their own what what is the yarn version of that? Because the n o n p x. So there's n p x. 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 PNPM has their own, but I I almost always use n p NPX. I don't know why. Yeah. I don't know. That's a whole another question is, n. Why did you use PNPM

over Yarn in this situation?

I tried it, and it was fast. Yeah. It's really what it comes down to. Just worked good. It just worked good. You know what? I looked at the workspace, the workspace docs for Yarn and the work Space Docs for PNPM, and I like the way that the PNPM just doc spoke to me for some reason. I I wish there was, like, a more scientific answer. I'm laughing because it's I'm, like, embarrassed at how nonscientific or just, like, whatever my it was just whatever. I just liked it more. It just cut the vibe right. But, I mean, honestly, that's really what it was. I tried it. It worked the 1st time. It was fast, and I said, oh, yeah. I like that. It's nice. Yeah. Awesome. Well, that's really interesting to hear that. I've always thought that setting up a monorepo

is a lot more tricky, but it seems like put your packages in a folder, Set up a couple scripts the 1st time you do it, and you're off and running. Yeah. Do you have any anything to publish these 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 I find it. Is npm publish hyphen hyphen access public from the root of that one? I actually don't have those commands in my mono repo yet, which I should. I should have it be, like, publish this, publish that. What I'd really like to rather have is, like, a GitHub action to Yeah. You know, update the versions and Do a change log, something like that. I just haven't done that yet.

Yeah. That's that's a whole another level of being on Rails. We have a pretty great GitHub action set up or level up to do our automated deploys and testing, so it won't be that tough by just having at the time. Yeah. Totally. Totally.

Cool. Alright. Well, anything else to add? Yeah. No. It's it's a lot easier than you might expect. And like you mentioned, you know, I always thought in many times that it is More difficult to set up a monorepo.

Like, I mean, if you go to some of these monorepo providers that are like, we're the monorepo, and I'm not gonna name names here. But before the monorepo, you know, setup and then the documentation's, like, you know, pages and pages long, and you're just like, oh, I don't wanna deal with this, I found this to be a very, very simple alternative, and it does everything I need it to be. We're not on a team of, you know, a 1000 people here, so it doesn't need to be That intense. I think for most monorepo use cases, this thing really kicks butt for how easy it is. Workspaces, who knew? So if you're on Yarn, NPM, or PNPM.

I found the workspaces for NPM, of course, to be a little obtuse, but, of course, but, yeah, that 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 wanna craft an easy monorepo with PNPM, give it a try. Awesome. Thanks for tuning in, and I'll catch you on Wednesday. Peace.

Peace.

Head on over to syntaxdot CSF. 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.