Monorepos! Workspaces, pnpm, turborepo + more!

Welcome to Syntax, the podcast with the tastiest web development treats rid. Out there today, we've got a really good episode for you on mono repos and a whole bunch of the tools that rid around running a monorepo. We'll talk about what a monorepo is.

Let let's do a little sneak peek of what it is. It's running multiple Projects or multiple things in 1 single Git repo and and being able to automate starting and updating dependencies, all that good stuff. Today, we are rid. Sponsored by 3 awesome companies. We got a brand new sponsor today, Content by Ginteco, which handles all of your content management.

Rid. We've got Log, Rocket, JavaScript session replay, and FreshBooks Cloud Accounting. We'll talk about all of them partway through the episode. How you doing today, mister Scott Talinski? Oh, I am all over the place.

I thought We're we're just just, it was one of those nights where, like, all sorts of things, You know, having the dogs gotta get up in the middle of the night and all sorts of weird and wacky things. The next thing you know, it's the morning and you're trying to rid Get your brain moving. It's it's been a rough one for me today, but, yeah, I did alright other than that. Alright. We've we just had our 1st major snowstorm of,

rid of the winter.

So the kids are it's funny. The kids have been home from school for all of Christmas, And then they were home because of COVID.

And finally, they're going back. Everyone's so happy. And the 1st day, they're going back, snow day.

Rid. But they're super happy about it.

So, so we're we're we're stoked that they can play in it. Rid alright. Well, let's get into it. Maybe we should just start off with our own, experiences with monorepos ourselves. So, rid. Specifically, I have never really dipped into building a monorepo myself until lately. I I had worked on a couple open source projects. Rid. The Keystone JS is a huge monorepo.

But what is popular is like like, for example, I have my, like, Boss Monster, which is my my course platform.

Rid. And inside of that, there's there's many things. There's the the video player, which is its own React package that I've created, and rid. There's also, the I have a an entire admin dashboard, which is, Next. Js. And then I have the entire server rendered marketing websites for everything.

And then we have the dashboard. And there's just a whole bunch of different, like, pieces, and, a lot of them are separate applications.

Rid And in order to, have them all in a single git repo, you can use what's called a monorepo. And it used to be popular just to have, like, multiple repos, but it became a bit of a pain in the butt to have to manage content amongst multiple repos. Because, like, if you're changing one thing and you need to change something in the in another package, rid it's really nice to be able to just have 1 thing open and dip into all those packages and just publish a new version for everything that you You have touch. So to give you another example, ours is very similar to yours in that we have,

essentially several packages that are consumed by both API and the user interface. So the we have the UI, which is a SvelteKit site. We have the API, which is They Fastify API node node server.

Then we have, a shared code folder, which doesn't even contain any node modules. Just shared code, between the server and the client or any packages you might have. Is that just like like helper functions and handy stuff? Date functions, Formatting things, the things that we use all the time for both, some of our environment stuff. Then I also have created a handful of open source packages for felt. So I have a side menu, an element query package.

I modified a I forked one of the data data tables rid just to have it work with SvelteKit and server side rendering and, Svelte toy, which is my thing for modifying global state really easily. And then I have an admin UI project, which is a React site actually.

Just a straight up React site.

That's our old interface, but I still use some of the admin tools on it. So I keep it around just while I'm porting that stuff over still. And then we have other packages. I have an auto form package in Gquery, which is our GraphQL client that I made. And so We're using this not only to share code between, but we have some several full on projects. And then we have some open source Libraries that are actually since our our main mono repo is a private repo, those nested Shared open source packages are all being brought in via submodules.

Git submodules, which is where you have another git repo kind of referenced inside of a repo. Many people seem to hate that technique. But me personally, it's been working out just fine, I think. So

Yeah. I would check trying to think like that Makes sense, I think. Because, like, you want those to be open source. Right? You want those to be readily available on on GitHub. And if that's the case, then If it's not a 100% open source or a 100% closed source, it's somewhere in between, then you have to do something like that. Right? Right. And that's the toughest When I was looking for mono repo solutions,

I was like, it's not like a use case that comes up that often where you're like, Alright. I need the main thing to be private, but some of them to be some of them to be public.

So how else would you do that? And and there's not a lot of good ways of mixing public and private repos with many of these things other than by using sub modules. So If anybody has, like, the most ideal flow for that, hit me up. But I I do think the submodules one is working really well for that for us. Yeah. Rid. Yeah. The, monorepo has been really handy, because previously what I had done for some of my,

workflows is that rid If if I needed something to be fixed like, let's say I was the big one for me is my ESLint.

If I'm working on my course platform And I find, ah, there's something different in my ESLint that's that's getting in my way. I need to update the ESLint.

What I would do is rid You can either use, like, npm link and, like, link it to your local version so that you can work on your local version at the same time.

Rid. Or what you can do is you can just fix it, publish a new version Mhmm. And then update npm install. And, like, that's not a very good workflow, especially when like like Like, for example, in Keystone JS, the entire CMS, every single one of their not every single one, but a lot of their, like, fields, like a image upload field or, a date picker field. All of these can be their own package. And then, like like, let's say you have to rid change something across 11 different packages.

That's a big pain to do. So what's better is you could just have folders and you have, like, a packages folder and you can rid. Make those changes and in real time you can see what they're what they look like. And then when you're ready, you can run a script that will publish all of them, rid 2 to 10 PM for you. Totally. Yeah. I mean, that's,

the the best way to describe it. So in reality, like, You've kind of been saying that a monorepo is to have multiple packages in 1 repo and to be able to manage those and orchestrate them. And they are useful specifically for the reasons that we've kind of largely talked about here, where you're sharing code across packages.

Rid they they can become really helpful with larger teams because larger teams can both make all of their code available, but at the same time, keep it all all separated in a controlled manner old banner where you're submitting pull requests to single packages.

You're you have your own your own packages that are all kind of referenced throughout the project. But, again, it's keeping everything sort of separate.

And overall, just organization orchestration.

Right? Like you you've mentioned, trying to install things across many packages, trying to versions. Try to keep things connected.

Trying to run one thing that relies on another thing that might rely on another thing. All of those those And if workflows are benefited from monorepos.

So if you're just a solo dev working on a single project that's a create react app site or something, A monorepo for you is is not going to be a great idea. But if you're working in a team or you're doing open source work where you have a lot of packages available or You just like splitting up your code into a lot of smaller packages and actual smaller entirely different projects, essentially, then Then a monorepo might be something that makes more sense to you. And I've I've heard that, like, Facebook and Google and these big companies, they'll, Like, Google will store, like, every line of code that it's ever written

in a single repo. Like, it's it's massive. And they've had to, like, they've had to, Like, make their own version control system or fork git or, what was the one that everybody used before git? That WordPress was SVN subversion.

I don't know what they're on these days. It'd be kind of interesting to talk to somebody who works at Google being like like, what happens if you need to, like, make a change to Google Docs? Like, what does that look like?

Rid. I would love to know what the how how that monorepo feels to use. I mean, I'm I'm sure it's not terrible because, you know, rid It's it's used by such a large organization or else they wouldn't do it that way. But, yeah, it's it's a very interesting topic to me. And specifically, now that I've done a little More with monorepos. I definitely understand the appeal even though I'm only on a small team of people, not a giant team. Yeah. Like, I

I've heard people talk about forever. I'm still pretty new to this. I think Scott's probably used I'm only, what, a couple weeks in. You've used yours for how long have you had him on a repo running?

You know, it's it's been a long time.

It it's been a long time, but my current iteration of it, the PNPM workspaces one, Has only been maybe 3 or 4 months, so really not that long. But, this to me feels the most classically monorepo of anything I've done. Because before, I I was unknowingly kind of writing my own orchestration monorepo manager tool just out of, like, note scripts. And and then at some point, I was like, rid. And I'm I'm just totally reinventing the wheel here. Somebody's already done all this better. So Oh, well, let's get into that then. So with, rid. Like, model repos can be used across, like like, any coding language, but, obviously, we're we're JavaScript devs here, and we're using NPM or a related tool.

Rid. So the the idea is that you create what's called a workspace. Right? And I think Yarn was initially the 1st person that pioneered this whole rid. That's why a lot of people moved, initially to Yarn.

And npm, as of npm 7, also released workspaces, rid themselves. So the way that it works is that in your in the root of your repo, you have a package JSON.

And in that file or in a separate File, if you're using PNPM, we'll talk about that in just a sec. You define where all of your packages, actually are. So, npm 7 rolled it out. I tried for freaking forever to get mine to work, and I kept getting rid the the third of the hairy thing is is that dependencies are really complicated because you've got your main package. Json.

Rid. Often you have stuff that is shared in that main package, Jason, and then you'll have, like like, you'll have tooling in your main packages. And I Specifically have my tooling in my, like, my ESLint

in my main package. JSON. Is that where you put yours as well? Yeah. Yeah. Although it's funny. At some point, I think Styleint has rid working for me since moving to this mono repo. I I need to figure that out. But yeah. I do. I do. And and sometimes when you create new projects, it's like creating, Other like, if I create a new SvelteKit package, it's gonna want to create a new, Prettier RC file and a new all these, Yes. Lint RC files. I have to always remember that I already have a default one. I don't need to keep creating these. Definitely takes a little bit of a mind shift. Yeah. Rid. So you you that that's your main one. And then you have, like, a packages folder or something a folder. And in that folder, you have another folder for every single one of your other

rid. Mini repos? What do you even call that? It's, obviously, it's a monorepo, and and each of your items in your workspace are in that folder.

Rid. And, npm 7 rolled out workspaces.

I it was working for me for a while, and then I just rid Started getting into this, like, weird space where, like, if you npm install in your main repo, then it also installs rid in all of the child workspaces as well and tries to use NPM link behind the scenes, to link towards each other. And it just was such a pain in the butt.

Rid. I I had people from MPM trying to help me, and finally, I just gave up on it. I said, Scott's always talking about PMPM. Mhmm. Like, it's ready. Let me try it. And it I just PM PM, I made a workspace file. Took 2 seconds.

Boom. Worked flawlessly.

Has been for a week and a half. So that is why people remember rid Remember we were talking about PMPM with Scott, and I was like, like, why do you use that? Yeah. This is why. It's it just works. Yeah. It it's I I only switched

To PNPM because of how smoothly the workspaces onboarding went. I know that at the time, NPM had just gotten to workspaces.

Yarn and had workspaces for a little bit, but the p n p m one just seemed a little bit more effortless in terms of the workspaces file and all of that you needed to Setup just felt way smaller and way less work. Sometimes I I pick things based on how much work it will require me to do.

Rid. What is the config file for this look like? Alright. This config file is only 10 lines. I guess this is the one.

Ridiculous. Specifically, the, rid I was I was really enjoying that. I had set this whole thing up for npm workspaces, and moving over to npm was just Creating 1 more file with literally 3 lines in it.

And I was like, this is great that we have, like, somewhat of a standard in that I don't have to, like, rid. Change the code in any way. It was just a little bit of configuring. Specifically, the problem that I was I know people are gonna be like, well, what was the issue with npm? Because, like, I know people don't like npm, and they're like, use Yarn Revver. And I've always been like, I just wanna stick with npm. Like, yeah. My courses are 9 PM. I don't want The whole yarn changing on me, and then my courses are out today. I just want npm. So I always try to make it work with npm, but there was, like, this, like, You know the frustrating error of cannot find package, whatever, and it's not been installed. I'm like, I freaking installed it. I could see it. Rid It's in the folder. It's in the folder.

Yeah. And finally, I threw my hands up in the air and moved over PNPM, and it's been great. And it also does rid You've you've said this before, but it also puts like like, let's say you install, like, React or Lodash.

Rid it puts it tries to install them globally on your computer so that if you've used React in, like, 15 projects, it only installs them once. So you don't have Forty gigs of node modules, which is an excellent idea. Yeah. It's great.

I you know, the I actually went to PMPM first After after that the dreaded, like, you have multiple versions of GraphQL in your project. And I was just like, no, I don't. Where are they? And then you're, like, having to nest through nested, nested, just, like, trying to find this thing. It's like, come on. Yeah. Yeah. The rid Freaking NPM ecosystem is amazing in that,

like, literally everything you can install and you can just this whole ecosystem is is beautiful. But also, like, rid. When it doesn't work, man?

It's beautiful, but it's also a train wreck at the same time. Yeah.

Let's talk about yarn really quickly. Yarn one workspaces rid is what a lot of people are telling me to use.

Yarn 2, I guess, also has them.

It doesn't seem like a whole lot of people have moved to that. I I just have I did not get into yarn at all.

So it's probably worth checking that out. Specifically, you have a large team, but PMPM worked great for me without

It was, like, 5 minutes of work, so I was really happy. Yeah. And I I know I used Yarn for maybe a little bit when it first came out, but then once NPM's got a bunch of performance improvements.

And then there were the workspaces thing was enticing, but, yeah, now that NPM is really very similar, it's kinda hard to choose Yarn for me.

You know, it's also an easy decision is checking out one of our new sponsors today is Content by Kentico.

Wes, do you wanna talk about rid Kontent by Kentico. Yes. We got a new sponsor, Kontent with a k by Kentico. It's a headless CMS, which is pretty cool. They have live editing, rid. So your nontechnical users can use it, and they have like, if you, the developer, what do you care about that? Well, they got a REST API, A GraphQL API if you want to use that.

They have all kinds of tools that make it really easy to work with, JavaScript or .net Alright. And for any other language that you possibly will want, they have lots of, good integrations with, Next. Js, Gatsby, Nuxt, Gridsum, PHC, Blazer. You name it, they'll integrate with it.

They have live editing for Jamstack and other apps, which is really, really cool.

Rid. It's just really sweet. So you want to check it out for your next project. Go to content.ai.k0ntent ai/syntax, and that gives you an extended free trial. Normal free trial is 1 month. This is gonna give you 3 months, so check them out. Thank you Content by Kentico for sponsoring. It's by Kentico.

Cool.

Alright.

Let's move into, let's talk a little bit about, like the the the process of working with You have a package. Json in your file. All these node modules, what do you do with them? What's the process for managing all of these different Libraries. Because we're all using thousands of libraries in every project. So Yeah. Really, what it comes down to is each of your packages End up having their own package dot JSON that manages their own packages, essentially their own versions of this. But You can manage the install process across all of those from the root repo or even I don't I'm gonna be speaking a little bit just straight from how I manage PNPM workspaces. Okay? So I I know a lot of these tools that we're gonna be mentioning later on have, Their own ways of doing these things, their own way of working in your repo. But for me, I'm able to remove every node module With a PNPM clean command that just removes all the known modules. Then I can do PNPM install from the root, and it's going to reinstall known modules through my entire stack. So every single package that I have is then going to get their packages installed.

And those are all going to be shared across that That root repo in terms of versions, and it's all gonna be done via Simulink. So for me, personally, it's it's pretty easy to Quickly install and manage all of our our dependencies across anything just with a simple PNPM install command, just like you would do from any given individual project.

Rid Yeah. I absolutely love that because, with npm, I spend a lot of my time deleting node modules and deleting the package dot lock And then doing a re npm install, and everything will work after that.

And that p npm clean command is great. And rid MPM does this as well, is that it will walk through every single one of your dependency folders. So I don't know if we we made this clear or not, but Every single one of your workspaces has its own package dot JSON file, meaning that, like, my video player We'll have any like, the Vimeo, JavaScript API is a dependency of that. But then, my API has, rid a dependency of Express. You know? Like, they all have their own, dependencies.

And then when you run npm install from the root, It will walk through each of those and install everything that is needed, between all of them.

Totally.

Rid. Let's talk about, uninstalling things. Each of Yarn, NPM, PNPM have their own, way to rid. Install and uninstall.

They all have flags where you can install something in a specific workspace.

Or what I found easier is just CD into the actual directory and and running PNPM install or NPM install. The the one issue I have is that I can't get past Running npm run dev instead of p n p m dev.

And there's a couple of people that have scripts that will Overwrite

that and check which one you're in, and I haven't implemented any of those just yet. But there are there are solutions for that. Yeah. I'm fully used to it by now. Rid does does it just feels normal to me. It it's funny. I find myself doing PNPM for every like, projects that I I have, like, the opposite problem of that, where I'm in using PNPM in projects that don't use PNPM. Oh, yeah. Yeah.

So, okay. So we we talked a little bit about that you you would do this to reference and share code. But, like, how exactly do you do that? Now, again, this is speaking from a PMPM perspective.

But a p m p in perspective, that's nice little alliteration going on.

You know, the way that we do it is that You have your dependency, your normal dependency in your package dot JSON.

But when you install a package, Let's say I have a package named at leveluptuds hello, and I do a p n p m install at leveluptuds hello.

Inside of this this mono repo, add another package. What it's actually going to do is look inside of my own workspace and see If that package exists. And if it does, it's going to essentially just similar link to that folder, And the package dot JSON will be prefixed with the word workspace in your dependency line. So it will say at level up tots forward slash hello. And then for the version number, it'll say workspace colon then the version number. And that's how you know that it's actually looking inside of your workspace for that package.

No more having to deal with NPM link. Let me tell you, NPM link has got to be one of the most mysteriously, Like, I have no idea if NPM link ever works. When when I run-in, I'm like, I don't know. Just I can't tell where it loads code from.

This I get a nice visual. I can pause through the repo. I know that if I make a change to the workspace file, that it's automatically going to be Available to me in whatever project I'm currently working on. So to keep this going on with the PNPM thing, again, This is my experience with PNPM is that by default, you're often running commands from the root. Like I said, like, PNPM install is going to install things for every workspace, Every package in your workspace where if you want to run from one thing, you have a couple of options. Now I'm wondering which of these you primarily do, Wes. But you can CD into your package like CD packages UI, and then do p n p m blah blah blah inside of that.

Or you can use the filter command from or the filter flag, I should say, from the root. So p npm install, this thing hyphen hyphen filter, then the package name that you want to reference. So if I want to install 1 thing to only at level up tod's hello, I would use hyphen hyphen filter at level up tod's hello to say, okay.

Only install this or only do this task to this 1 repo. You're filtering that way. And then what I've done from there is I've created a ton of Scripts inside of that root package dot JSON that has the filter already baked in. So let's say if I just want to run the UI development.

I'm running just PNPM UI colon dev. And what that does is that runs a node script that just says PNPM, dev

Hyphen hyphen filter at level up tuds forward slash ui or whatever the package name is. Oh. Yeah. So you can use that UI colon in front of the dev command, and that will

Yeah. But the run the colon is is just a formality. Like, you don't Oh, okay. Yeah. There's nothing magic about the colon. It's just like how they did it. So then I'm like, alright. That's how they do that's how I'll do it. Runs okay. Because Yeah. I've been using

Turborepo for that.

Oh. But I'm I'm curious if that's there's there's some of the the some of these tools overlap responsibilities.

Yeah. And I'm not sure Which one I should be using for what? So I I was just that I've been CD ing into the directory, mostly Because I can't remember what the thing to type into the, in like, the dash dash filter Yeah. Because it is different For npm, I think it's dash w or dashdashw or dashdashworkspace or something like that. Mhmm.

And, Now it's oh, I see. I see what you're doing here. So we'll put an example in the notes here. I was on misunderstanding what Scott was doing. So he just makes his own script. Yeah. Sorry. It's it's hard to say these things. This is like code, these commands. You say it on the audio. Yeah. It's definitely hard to Yeah. Yeah. So I have a question here, rid. And I couldn't I couldn't find a great answer to my, like, 5 minutes of googling for this. So if you have like, let's say you have 2 packages that both need React rid. Or both needs Svelte.

What do you do? Do you install the dependency of Svelte in both of those packages? Or what I've also heard is people just have a 3rd are another package that simply just imports the shared dependencies and then immediately exports it, which seems a bit odd to me. That seems a bit odd to me too. Yeah.

I I understand why, but, you know, yeah, I do the the the former.

So, yeah, I don't I don't know. That seems that seems a little intense to me to Just install it. So rid. If you have an update to Svelte, then you just have to make sure that you are updating Svelte in multiple packages and making sure that you're on the same

Version Yeah. For each of those? You wanna know how I do it? I mean, beside yeah. Doing it visually, I'll post the command in here. Basically, So PNPM has their own, like, visual updater.

So I have in my root repo, I just have an update script. So the script is named update. So I type p npm update. And what that runs is p npm recursive up hyphen l Hyphen, capital l, hyphen I, which will give you the latest versions of all of all of the packages, in in a visual way where I can say, Install this 1. Install this 1. Install this 1 for all of my repos.

So that way I can do all of the Svelte updates at once, Make them all the same version. Hit enter. Okay. And it's going to update across all of the packages. Beautiful.

Yeah. I can I can see see that? Like, both of those are are kinda tricky because you you do need to put a little bit of, remembering it. I think that's better than having to, Like, literally, what some people would do is they would have, like, a shared package.

And in that shared package, they would install React and then they would import react and then just export it right away from that file. And then then you have to, like, import react from shared. Rid. And then, like, that's probably a pain in the butt for types and all of that. So I think I like that that version that you have much better. Yeah. It all seems like All seems like a lot. And maybe that's why there's tools that exist to, you know, help with this. Yeah. Yeah. Absolutely. We have, actually, rid You're by listening to it. The show on Monday was about updating.

So I'm glad that we talked about this now because we are about to record After this, a show on just how you update your projects when there's lots of dependencies and

many versions of them. Toads. Well, if you're managing many different versions of different libraries, you're bound to make a mistake somewhere because let's let's face it. This stuff's intense.

And, that could really lead you to have some bugs in your application.

And then you might like a sponsor to help you solve one of these bugs. In fact, I just hit a bug Today this is I was just chatting with Wes, today. So this is a good good use case for LogRocket here because LogRocket definitely would have come into play, Had I not gotten 800 emails about it this morning? Oh, I I pushed an update to the site, and it it I I updated the Sveltekit version, which removed at a breaking API rid change, and then, therefore, I pushed a breaking API change with it. For some reason, not been not finding it. I don't know how I didn't find it before it went live. But seriously, within 24 hours, I had a 1000000000 people trying to reset their password all at the same time on the site for some reason, and all of those people had trouble with that. So Because of that, it would have thrown an error exception in there. I'm sure if I log into my LogRocket right now, I would have seen Various session replays. That's right. A video replay of someone trying to go to the password reset page and seeing the exact error that I have seen already.

And that error caused by an API change has caused my site to break. So if you would like to have visibility as actual video Scrubable session replay with console logs, network requests, all that and more.

You'll wanna check out LogRocket. It's really truly a next level service. Logrocket.comforward/syntax, and you'll get 14 days for free. And you'll be able to see the error messages, see the bugs, And hopefully not have to get a bunch of emails from people, who had an issue. So that'd be great. So check it out logrocket.comforward/syntax.

Thank you so much for LogRockets for sponsoring.

Alright. Let's talk about some of these tools that are also handy with, monorepos because what ends up happening is that, like, Let's say you want to run npm run dev, and that will start up your your GraphQL server. That will start parcel to rid. You watch your CSS for any changes. You want to bundle your your JavaScript and, you've got a whole lot going on there. And, sometimes what happens is that you Open up several tabs in your your, your terminal and you run npm run dev in a couple of these.

There are some tools out there And that's not all they do, but there's there's sort of this growing, area of tools that will make this much easier for you. Rid. Probably the the most popular one lately that we've heard a lot about is Turborepo.

It's it's built by Jared Palmer, rid. And was recently acquired by Vercel, which is pretty cool.

So we'll talk about turbo repo. There's also NX. There is Lerna, which does not have a 100% overlap but is kind of in the same area as well.

So let's just rid Talk about what Turborepo is, and then we'll get into the rest of them.

So at least right now, it it seems that they have rid. A couple things up their sleeve in terms of what else it will do.

But it's a an I I call it an orchestrator or a build pipeline. So, rid.

If you want to run, npm run dev, but you first need to run npm run build, rid what tends to happen is a lot of people just string together these and ands in an npm script. So you're like, run this, rid. Then run this and then run this. And, if you want to do 2 things at once, then rid. You you have to, like, install a currency package, and then it just gets kinda kind of a pain in the butt. Right? I know all about it. Yeah. Yeah. So rid. That's the first thing that Turborepo does is, it's sort of a build pipeline, meaning that, you can You can just run NPM run dev and it will run turbo repo run dev and then you in your turbo repo config, rid. You will define what needs to happen in which order.

And that's that's really, really nice. So you can say, I am going to run rid. Npm start. But npm start relies on running npm run build on 3 of these things first.

And you rid. You can imagine those get much more complicated with databases and and environmental variables and all that good stuff.

So that has been really, really nice for me to use. I've been very happy with that.

Have you checked this out at all yet? I haven't. I have questions though for you. I mean, like, the biggest question I have with these tools is that they're they are build Build pipeline tool. I mean, it's just it's just running your your scripts inside of your folders. Right? It's it's not like because what I saw about NX is that it's It's a build tool in that, like, to build a Svelte site, you need like the Svelte build plug in for NX.

But Turborepo is more along the lines of, like, how workspaces work and that it's it's referencing your own scripts and your own packages. Is that correct? Yeah. Rid. Okay. It's it's smart about knowing

it works with Yarn, PNPM, and NPM, and it knows about your your workspaces.

Okay.

Rid So if you want to run npm run dev in all of your workspaces, it will know to go. And then a really cool thing about it is they will also, rid. Consolidate the the output.

So if you wanna see a console log from your your back end and you wanna see any Build logs from your front end. It's all in 1 terminal, which is good and bad.

But it's nice not have to go hunting for that stuff if you've got multiple rid Things running.

And at most projects, at a minimum, have a front end and back end, and you have to run 2 tabs, Which is not a not the end of the world, but it does get more complicated once you get past that. Right? Yeah. So so that's what I mean, that's how I do it within

PNPM workspaces as well. So I guess, like, what's the added benefit there? Is it the the caching? Like, what is the added benefit over using just rid Straight up workspaces.

Yeah. So that's something I don't I don't know in terms of the orchestration, because rid. I just went straight for this.

So PNPM will also

run your your let's say you have dev command in your your your front end and your back end. PMPM will run both of those for you at the same time? Yeah. Yeah. Okay. Okay. But I don't think you have the I don't think you necessarily have Maybe the control over it where you could say this one relies on this one or anything. Like, if I'm running PNPM recursive dev, it's going to run

rid. P n p m dev on all of the packages in my my repo. Oh, yeah. So this one, you get a little bit more control over that. You can also do parallel builds.

So let's say you want to build your CSS and you want to build your JavaScript and you want to compress images.

Rid A lot of times, those things will be one after another. And one of the biggest frustrations in doing builds and deploying the thing is that, like, I don't wanna have to sit here for 8 minutes while my website builds.

I just wanna deploy this thing, especially people coming from the old fashioned FTP world and PHP.

Rid. They used to be just just upload the file you change. I just drag it. I just drag it on there. Yeah. Drag, drop. You're done. So parallel builds, it can do incremental. So that's rid. This is another benefit that it has. And I talked to Jared if he's going to come on a podcast and talk about this stuff better than better than we know. But, it can do incremental build. So,

wait. Sorry. Along that same line, just well, sorry to interrupt.

Rid. Yeah. If you have questions for Jared, send send them our way. That way, we can make sure that we ask all of the questions that you might have about this as well rid. Because I'm interested in knowing what other people are wondering as well. So Turborepo

does caching of your build. So it knows What are the inputs to your build? And it knows what the outputs to your build are.

And because it knows in and out, rid. It's smart about hashing your content and caching those things. So it says, alright. Well, you didn't change your CSS.

I'm not gonna freaking rerun your rid. Rebuild your CSS because we already did that last time. I have it. I already have it.

And I don't know how that works. Obviously, there's something with rid. It's smart about hashing your content, but because it knows about that and, like, I put my my parcel in there and, I had a Next. Js input and output in there and a bunch of CSS, some stylus that was compiled in there.

And because it knows about that stuff, it can just incrementally build the only the parts that had changed. Like, let's say rid. My biggest pet peeve is that, like, I launch something and there's a CSS mistake and I start getting rid 10,000 emails about it. I wanna quickly change that, but 8 minutes to build the site Mhmm. Is a long time When there's people sending you tweets about your broken CSS Yeah. Or whatever. Right? So you could just be like, oh my gosh. Just play none.

Git commit. Blast it up, And it will it will be smart about it, and it could it could build the thing much faster than doing an entire 8 minute build. Right? Like, that's that's really important to me.

Rid So another benefit that you get with this caching is that it can do cloud caching, which is this is not something for me, but I know that some websites, rid especially, websites that have huge build times.

They can get into 30, 40 minutes of build times.

Rid. And if somebody does a build on their computer or on, like, a continuous integration, apparently, you can rid. Share those caches amongst your entire team. Cool. So it'll just download the cache. So I don't know if if somebody's done some really resource intensive task in your repo. Maybe even like AI or or video compression or something like that. Or Maybe it may it took an image and made 400 thumbnails based off that image. Right? Then someone already did that process intensive work, rid. Then you could share that cache amongst everybody else in your team. And I bet this is why Vercel bought them because Vercel wants to be the cloud caching service that you pay monthly for, because it improves the speed of your your actual, rid. Not only your build, but your dev time as well.

And I don't know anything, but I don't know anything. I don't know anything, but that this this is me guessing, why these companies do these things.

Yeah. Yeah. You you should say you we don't we have no inform inside information there. That is rid. That is your thoughts, but, yeah, totally. Last thing I have here is it doesn't handle your dependency tree. So, like, I was tweeting about My NPM workspace is not working, and everyone's like, use Turbo Repo. I guess somebody said they love when I talk like that because Oh my god.

Rid Use Turborepo. And I said, I am using Turborepo, but I am the Turborepo.

It's a Turborepo.

Turborepo does not handle All the dependencies.

The fact that I had the, like, NPM cannot find this dependency, their repo doesn't help you there yet. Rid. That's what that's what Jared said on Twitter. So maybe there are also going to there'll be a 4th player in this arena, rid. Where you can turbo repo install something. I don't know. But that would be pretty sweet. Sounds pretty sweet. They should have, like, a turbo time rid. Tag.

Turbo time. Turbo time.

Yeah. That'd be that'd be sweet. So there's another tool that does, I would say the same thing, which is n x.

You can check that out at n x.dev.

N x.dev. I rid. Silvally had ignored this for so long because I thought it was Angular. Oh. You know? N x, doesn't that sound like Angular? Rid. I thought Angular is NG.

Yeah.

But then there's Rx.

Yeah. I'm

wrong. Obviously, it's not Angular.

They did the same thing as well.

So they have some very good I think Turborepo is built in Rust, and I'm pretty sure n x is built in Go.

And they are both very fast. And I saw there was some Twitter spat on who's faster, which is like I don't care. Yeah. Like, they all have graphs where they try to compare each other's and they like, rid. You know you know, when when any every time a repo, like, shows a graph of how it's, like, it's 5,000 times faster than this other tool. It's, like, yeah. Right. Yeah. Yeah. Right.

Rid. So I think that this one is also worth checking out. It seems that it's been around for a while. They are, Very they have, like, a bunch of tools and UI dependency graph tools around it, which seems pretty cool. It's intense. That one out as well. Yeah. I I did some I you know what?

It'd be nice to have someone from NX on too just to get a balanced approach here. Yeah. But NX, to me, seems like it's doing way more. Like, we're Turborepo, Lerna, and Rush. They're all running your own commands. It seems like And axe itself is taking over the task of being the build tool. So it says it's a fast fast extend rid Sensible build system, the next generation build system with first class monorepo support and powerful integrations.

Rid From my understanding, this thing is doing the build tool. And let's say you were running a Svelte site, you would need a special Svelte NX plug in to build the Svelte site.

Rid. And that to me is a little scary because

No. That's not like this is not taking over, VBabel and Parcel. Is it? Because Turborepo just uses it still uses whatever your regular build is, but it just knows the inputs and outputs. I'm I'm telling you, I is it? Okay. I think that it is. But, you know, NX folks tweet at me if we're being totally wrong here, and we will retweet you to correct that. But yeah. Let me let me read here because I I I very distinctly remember this being the build system. I mean, it says that it's the build system, but Yeah. Rid. We we'll have somebody on. This is the one thing about having guests is I don't ever wanna, like, have a guest from, like, one of these things because then the other people are like, well, what about us? You know? Yeah. So we'll we'll have a show from both folks because, this stuff is, I think, next gen in terms of, Monorepos and building and big team, big workspaces.

Yeah. So, I mean, this one seems like it it is doing more. You need, like, a Special plug in to build any in particular thing. So I like, I wonder how it plays well with all of these different things. Because this says, If you'd like to compile Svelte with NX, you need the Svelte plug in for NX. Okay. Because this one, it says on the NX plugins. Many organizations use NX without any plugins. If you are mainly interested in making your workspace faster

or enable enabling distributed tax Task execution. That's that's seems to be another thing that they do a lot, distributed task execution.

Maybe that means, like, cloud Computing based for each of your tasks, then plug ins aren't necessary.

Okay. So, yeah, it does seem like there's a lot of things in here, whether that is the dependency graph, which looks rid. Great. The, all of them are doing, like, caching or at least many of the the better ones are doing caching.

Easy shared code sharing, ownership management, smart rebuilds.

There's also a lot of editor plug ins, rid generators, powerful code generation, interactive visualizations, works with GitHub and GitHub actions. So, yeah, plug ins for everything. I wonder what these plug ins are doing essentially.

Ready. Really interesting to dive into more of this. Yeah. So I'm just looking at the React plug in here and it it does build Dev server and package. So it obviously does build time and but, like, does it did they rewrite their own or are they using They're probably I know that we should probably know this for the podcast, but like this is this is a whole new world in that, like, Dev tools are just, like, being totally rewritten.

Like, a year ago, we were all using Babble and Webpack.

And now it's just like we've got all these new tools. It's it's unreal. Yeah. And if you're feeling, like, overwhelmed by this, You don't have to know all of these tools. For for instance, we don't Same with you. There's 10 different ones. You can't use all of them in 1 project, and I I don't recommend you doing that, rid for anything just because I mean, again, a lot of these things are kind of shared sharing the same kind of responsibility. So you really probably should get good at one of them. But it is interesting that This one has such a giant community and a giant amount of packages and extensions for it. So I I probably wanna just spend some time diving Diving harder into NX myself. It it looks great. Usually, when a, a service, a dev tool like this looks good, their docs look good, The UI of it all looks nice. It usually means that they've cracked something. They have a lot of users. They have money to spend on those types of things. They have NX Like, they have, like, a paid path already. So, like, this is this is pretty polished. Right? If if you compare the n x dot dev to Lerno's website, it's like rid. You can tell that they're not the same class of tool. Right? Yeah.

Maybe you should try to do n x with your, Course platform, and then we'll be able to talk about them. Oh, yeah. Let let me just Intelligently.

Rewrite everything once more.

Let's talk about one of our last sponsors, which is FreshBooks.

FreshBooks is made for nonaccountants like rid You. It's intuitive, easy to use accounting and invoicing software that does it all from sending and following up on invoices to automatically capturing receipt data for rid fences, you get paid twice as fast with FreshBooks, which is really, really cool. One little thing that I did recently in my FreshBooks was, rid. You can add your accountant onto your FreshBooks for free. Woah. So, like, my accountant was like, alright. I just, like, I need all your your receipts in in, like not even receipts, but all of your expenses for for 2021. And I was like, alright.

Rid. But and I used to say, yeah. I just exported them all, but I was like, well, go get them. They're they're in FreshBooks, you know? So I was able to just give him access directly, which is awesome. So check it out. Freshbooks.comforward/ syntax.

That's a 30 day no credit card required. Thank you FreshBooks for sponsoring. Sick.

Cool. Okay. Let's keep it moving here. There's a a couple more that we wanted to talk about. Lerna rid is one that's very, very highly used. And for me, this feels like workspaces in some way where it's not really doing that much In terms of it's giving you some orchestration tools, it's giving you some organization tools, but it's not trying to take over more of the build process. It's not doing, Like, wild distributed task execution stuff. It's not analyzing your workspaces.

It's it's not really doing a ton, But it is making it easier to manage multiple packages within 1, monorepo.

And After I spending some time with the Lerna docs because I considered using Lerna when I chose to do PNP and workspaces. And my general thought was just, like, why not rid Use workspaces.

It feel to me it felt like to me like it wasn't doing that much more than workspaces was. Yeah. There's a whole,

FAQ on a Turborepo in terms of like it's like, well, is this different than learner, or does it do the same thing? And The answer is kind of, but it also does more, but also not as all of it. So it's worth checking that out. I had never needed to get into Lerna. I know that it's a bit difficult to get set up. But,

again, it's another thing that's worth checking out if you're doing this monorepo stuff. And a lot of people use Lerna, but I also feel like Lerna was probably the catalyst for tools like Turbo Repo and Enix to exist because it just wasn't as good as those tools. Some prior art.

What else is there? Rush. Js? A lot of people recommended that one to me.

It seems like it's designed for large teams, rid. Has PNPM Yarn NPM support.

Have you checked this one out at all? Yeah. I also considered

I also considered this. And I'm I'm sorry, from From Microsoft. Rush folks, but that those dot the documentation for this was really pretty rough.

Rid you know, it's like you go into, like, getting started. And, like, one of the first things in the getting started is don't do this. And here are 4 caveats that you need to know. Like, Do not do not do this. And, like, you should consider deleting these files. And doing this is like, dang.

It it doesn't Feel exactly like a smooth experience in terms of, like, the onboarding.

I I found the docs to be extremely daunting For someone like me, if if you paw paw them open, there's like 800 pages in the docs and filled with all sorts of caveats and who knows what. So for me, It it felt like and again, another learner where it's not trying to be an accident. It's not trying to be turbo repo.

It felt like a more of like a management tool for large rid Teams. And I'm sure I'm sure I'm getting many of these things, the nuance here to some degree wrong. But when I was looking at at Rush, rid I it didn't give me the warm fuzzies when I wanted to start using it. It it gave me a little bit of red flag like, okay, this is probably a useful rid Tool if you know what you're doing with it. But as somebody who just wants to get up and running with something, it it It's microsace.

It's That's what it is. It's I think that's the best way to describe it. It's from Microsoft.

And I think a lot of it was, built off of or, like, copied rid from or inspired by Lerna.

And I was just wondering, like, what they say SharePoint uses it. Windows Store uses it.

So like yeah. Like Microsoft writes a lot of JavaScript and they probably have some big big repos. I was thinking that maybe Versus Code uses this, but I don't see any

Looks like Versus Code uses Gulp. Yeah. I had heard I had, I had this one recommended to me as well. So, Rush heads, if there's, like, something that, like, makes Rush special. Please let us know. Like, what is the thing that makes Rush special? Because when I I look at the docs, it does seem to me to do the same things that all of the other ones do. It allows you easily link packages or even, again, like workspaces. Right? Install things, cache things, get things up and running faster, make sure you're not sending duplicate versions.

They have, like, a big thing about npm doppelgangers where it's like the same same library being loaded, multiple times. And, Yeah. They they all kind of do that. But what is the secret sauce here? Because,

definitely does not make it obvious what the secret sauce is. I'm I'm just looking at Versus Code. This is totally unrelated, but, yeah, Versus Code Seems to still be using Gulp to bundle everything. Interesting.

Lots of people still on I wonder how many how many people still Download Gulp a Week. I bet it's a lot.

1,500,000.

Yeah. My my Gulp video tutorials get a ton of watches still, and I'm, like, I'm super embarrassed by that because that's like it's our old videos, man. Those are, like, 2013 or 2014. I probably

I probably I don't know. I've had major gloves. Yeah. I've got some old videos too that are popular. I'm like, oh. But also, rid. Webpack has about 20,000,000

downloads a week, and Gulp has 1.5. So not even not even close. Not even close. Okay. Well, that is it for mono repos. If you, I don't know. Personally, I recommend starting with and whether it is NPM workspaces or Yarn or PNPM or whatever, the workspace for me felt like Monorepo lite enough where I'm on a small team. I'm not on a massive team here. And for me, it gave me all the tools that I needed to manage my things. But I'm also interested in some of these larger ones, especially Turbo repo, because, you know, Jared Jared doesn't miss. He he's, you know, pretty pretty awesome at everything.

So, yeah, I'll give that a try. I wanna Give NX some more time too. Maybe I'll I'll sit down and not write my code platform in it, but maybe just try to implement it into some degree. Yeah. As as far as I understand, it just sits on top of your workspaces. So you should be able to integrate it

at least Turborepo.

Maybe not n x, But it's worth yeah. I'm curious to hear hear what you think about it. Please do.

Let's move into some

rid Sick Picks. This is a section of the show where we pick things that are sick.

And I am going to sick pick something that Scott sick picked a while ago because My wife and I recently went down the rabbit hole of, getting a new vacuum. And A while back, Scott had sick pick the tineco tineco? T I n e c o.

And, we went down the rabbit hole of rid. Doing the research on the stick vacuum, and is it even good enough to replace your plug in one and all that? And we landed on the Tyneco a 11.

It. It's not. I don't think it's the same one that you got, but yours has like the rest has been the Wi Fi built in. Yeah. Yeah. No, I. We got the one that is, like, dumb, but it's rid I think it has the same motor in it. Mhmm.

And it is awesome. It comes with 2 batteries, has a dock, all these little attachments for, rid Like cleaning the crevices of the couch and everything like that. And I'm very, very impressed at How how good of a vacuum it it actually is, and, it's great. We you you install the, rid. The charger on the wall, and then you plug it in. And when you dock it, it just charges the battery. And then it has a spot on the top For a secondary battery because that's the thing with these cordless things is the batteries do run out. Yeah. Ours ours goes about, I don't know, 20 minutes or so, rid Which is long enough to do, like, a spot, and then you grab another battery and do another 20 minutes.

But, man, it's been awesome. The Tyneco ALA. The only thing I don't like is that it looks rid like an Apple product from, like, the nineties. Yours does. Mine mine looks like an Apple product from the 2020. Yeah. Your yours is really nice. Mine is, like, this, like, Green color, but it's also a lot of clear plastic. Like, it's awful awful. It looks awful, but it's great.

I, yeah. It's funny because we have the Dyson for a long time before that, the Dyson one. It's like one of the first stick ones. And it was fine, but the battery Was kind of a problem, and you have to charge it. You gotta plug it in. You gotta hang it on the thing. But with the the Tenneco, the the the hot swappable batteries, to me, rid. Is it like I don't need that in my phone, but a hot swappable battery in a vacuum cleaner? Yeah. Give me the whole day. Tool. Yeah. Yeah. The the Dyson one, you literally Can't take the battery out and pop a new one in. You have to, like, let it charge. I love popping a new battery in there, especially when you're like, you know, you're in clean mode. You don't wanna be Stopped by a battery? Yeah.

I'll have to sick pick my new robot vacuum that we got because, I love I love the new robot vacuum. That's for sure. Oh, I'm so excited to hear about that. Yeah. His name is Lomax, named after Bernie Lomax from weekend at Bernie's.

Rid We thought that sounded like a pretty sweet name.

Okay. So, I'm going to stick pick the Wyze V3 camera. So the 3rd generation Wyze camera As they are normally is very cheap for what it is. It's a little USB camera. It's $35 for the v three.

And let me tell you, this thing can be indoors or outdoors. It it's, like, water safe, like, so you can put it outdoors without having to have a special case on it. But But I think really one of the coolest things for me was the, like, the the color night vision is wild. I mean, the quality of everything is wild. It's unreal. I had to I was I I had one set up in the kitchen, and, I I was just looking at it on my phone. And I was like, I left the kitchen lights on. And then I went downstairs, and the kitchen Burn on. It was so unbelievable. So, I'm also going to sick pick a 10 pack of these cheap little crappy micro SD cards because, when you get these Wyze cameras, you can pay for their subscription, or you can just pop a little SD micro SD in them, and it will record as well. And a a a 5 pack a 5 pack of 32 gigabyte micro SD cards from Amazon is $22, And it's unreal. And That's so good. If it they're they're not gonna be the highest quality.

They're they very well may break at some point, But it's 5 micro SD cards for $22.

So, you know, I none I was running

6 of these at the cottage, rid. And I had 2 of them crap out, because you're you're you're writing to this thing 24 hours a day. It's recording constantly.

And what's the solution?

I'll just buy a couple more and pop them in. Yeah. I know. And and they're they're tiny. So, yeah, you're generating some some waste there, but you can recycle them. You have electronics recycling. I I actually I don't know what you do for electronics recycling, but we just keep a a large bin, like one of those clear plastic bins. We just keep 1 in the garage. Anytime we need to recycle any electronics, we just toss it in there. And then when the bin gets full enough, I drive over to Best Buy and dump that thing in the electronics recycling bin. So Yeah. I do we have that with electronics as well as,

like batteries. Our local, like, rid We have, like, a local waste facility. It has a special spot for batteries. Mhmm. So I bring all of our old batteries there. Big fan of all the Wyze cans as well. I'm hoping to get the Wyze floodlight camera pretty soon. That thing I have the, rid. What's the what's the Amazon owned one? The ring? Ring. I have, like, 2 ring doorbells and a ring flood like him, and they are garbage.

Rid. Both of them all of them have broken and been replaced.

And now the the floodlight camera just goes on and off randomly when there's no motion at all. Rid.

So I am over the ring stuff. Yeah. Ring. You know, my the squirrels have been sitting off my ring, and they're outside of, like, you you can draw. The latest ring ones, you can, like, draw. Yeah. You can draw, like, an area, and it still triggers. Yeah. And I draw in the area. It still triggers. Yeah. Well, if I give you the area, why aren't you looking in that area? Don't even look anywhere else. Yeah. We have we have that with our our front doorbell camera is, like, we're on a bit of a hill. And, like, I draw, like, do not,

do not go in this area. And anytime somebody walks in the area, it still triggers it. And It must be that it's, like, on, like, an edge or something like that, but over it. And it's expensive to have to there's no SD card in it. Rid. Yeah. So I'm hoping to get the, Unify doorbell because I have the The Unify well we should do a smart home show again because, I have the Unify like rack mount rid. Router and there's a you put a hard drive in it. And I have all these UniFi, cameras. And, like, one of the cameras you can get is a doorbell.

And the it's it's the best. Like, I have tons of wise stuff and I have tons of unify stuff, and they're not in the same league because the unify stuff is rid Like, 5 times more expensive. It's like pro gear. Yeah. The unified cameras are unreal.

Shameless plugs.

Wesbos, rid. Wesbos.comforward/courses.

There's a list of all the training courses that I have. You can check it out. Use coupon code syntax for $10 off. I'm going to shamelessly plug

level up tutorials.com.

You can sign up to become a level up pro today, And you will save 25%.

We're gonna be raising our rates soon in, I think, March ish. So if you wanna get in today, you can lock in on that rate forever Until you cancel or whatever, we're gonna have new courses from all sorts of really talented content creators. But addition, we currently have courses from people like Colby Fayock, Brian Douglas, Amy Kaepernick, myself, Ryan Allynska. Lot of awesome stuff and a new course coming every single month.

So thanks so much for watching.

I almost did my YouTube exit. So thanks so much for listening, and we will see you On Monday. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows. Rid. And don't forget to subscribe in your podcast player or drop a review if you like this show.