Monorepos! Workspaces, pnpm, turborepo + more!

like like, you'll have tooling in your main packages. And I Specifically have my tooling in my, like,

initially to Yarn.

rid themselves. So the way that it works is that in your in the root of your repo, you have a package JSON.

forever to get mine to work, and I kept getting rid the the third of the hairy thing is is that dependencies 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 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

because you've got your main package. Json.

And in that file or in a separate shared in that main package, Jason, and then you'll have, what ends up happening is that, like, Let's say image upload field or, Course platform, and then we'll be able to talk about them. Oh, yeah. Let let me just Intelligently.

Rid. Often you have stuff that is

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,

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, 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.

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, and a giant amount of packages and

So, you know, I none I was running extensions for it. So I I probably wanna just spend some time diving It it doesn't Feel exactly like a smooth experience in terms of, like, the onboarding.

cards from Amazon is $22,

They're they very well may break at some point, 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,

when you get these Wyze cameras, you can pay for their subscription,

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

it's unreal. And That's so good. If

And Bernie Lomax from weekend at Bernie's.

6 of these at the cottage, And you rid. You can imagine those get much more complicated with databases and

it they're they're not gonna be the highest quality.

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,

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

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, 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 from or the filter flag, I should say, from the root. So p npm install, we currently have courses from people like Colby Fayock, Brian Douglas, 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,

As they are normally is very cheap for what it is. It's a little USB camera. It's $35 hello, You know, it's it's been a long time.

for the v three.

many of the the better ones are doing caching.

it's like

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,

but, like, does it did they rewrite their own or are they using So I I was just that I've been CD ing into the directory, package that I've created, and rid. There's also,

all of them are doing, like, caching or at least

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,

Ready. Really interesting to dive into more of this. Yeah. So I'm just looking at the React plug in here and it And what's the solution? And there's a couple of people that have scripts that will Overwrite 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.

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, 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

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

Monorepos and building and big team, big workspaces.

Maybe you should try to do n x with your, because you're you're you're writing to this thing 24 hours a day. It's recording constantly.

Dev tools are just, like, being totally but because it knows about that and, like, I put my my parcel in there and,

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

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

it does build Dev server and package. So it obviously does build time and

rid remove every node module With a PNPM This one has such a giant community

generators, powerful code generation, interactive visualizations, works with GitHub and GitHub actions. So, yeah, plug ins for everything. I wonder what these plug ins But when you install a package, Let's say I have a package named at leveluptuds

Maybe that means, like, cloud in Keystone JS, the entire CMS, your your workspaces.

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

There's also a lot of editor plug ins,

because specifically for the reasons that we've kind of largely talked about here, where you're sharing code across packages.

Computing based for each of your tasks, then plug ins aren't necessary.

essentially.

No. That's not like this is not taking over,

Webpack.

tax

Easy shared code sharing, ownership management, smart rebuilds.

The UI of it all looks nice. It usually means that they've

What's the process for managing all of these different

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.

like the the the process of working with

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

Their own ways of doing these things, their own way of working in your repo. But for me, I'm able to 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

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,

You have a package. Json in your file. All these node modules, what do you do with them?

The fact that I had the, like, NPM cannot find I had a Next. Js input and output in there and And I am going to sick pick something that Scott 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.

but

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.

why these companies do these things.

Turbo time. Turbo time.

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 Use Turborepo. And I said, I am using Turborepo, 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,

but I am the Turborepo.

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.

It's a Turborepo.

I don't know anything. I don't know anything, but that this this is me guessing, Next. Js. And then I have the entire server rendered marketing websites for everything.

this dependency,

does not handle All the dependencies.

node node server.

but we have some several I modified Alright.

a shared code folder, which doesn't even contain any node modules. Just shared code,

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,

Shared open source packages are all being brought in via submodules.

modifying global state really easily. And then I have an admin UI project, which is a React site actually.

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

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

Then we have, And then there were the workspaces thing was enticing, but, yeah, now that NPM is really between the server and the client or any packages you might have. Is that just like like helper functions and handy stuff? Date functions, I'm going to stick pick the Wyze V3 camera. So the 3rd generation Wyze camera

full on projects. And then we have some open source Libraries that are actually since our our main mono repo is a private repo,

some of our environment stuff. Then I also have created a handful of open source packages for felt. So I have a side menu,

So we'll talk about turbo repo. There's also NX. There is Lerna, which does not have a 100% You can just run NPM run dev and it will run turbo repo And I don't know anything, a year ago, we were all using Babble and 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,

you can doorbell

rid. You

2 things at once, Gridsum, PHC, Blazer. You name it, they'll integrate with it.

npm run dev, but you first need to run npm run build, uninstalling things. Each of Yarn, NPM, PNPM have their own, 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.

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

in which order.

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 run,

run dev and then you in your turbo repo config, one of the biggest frustrations rid.

But it's a an I I call it an orchestrator or a build pipeline. So, 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, 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, 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,

will define what needs to happen

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

And then they were home because of overlap but is kind of in the same area as well.

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,

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

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

that has the filter already baked in. So let's say if I just want to run the UI development.

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 So if you're just a solo dev

Or you can use the filter command let's talk a little bit about, 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

when there's no motion at all. Rid.

like batteries. Our local, have them all in a single git repo, Alright. And for any other language that you possibly will want, they have lots of, good integrations with, And it knows what the outputs to your build are.

Shameless plugs.

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,

like rack mount 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, I don't wanna have to sit here for 8 minutes while my website builds.

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

floodlight camera pretty soon. That thing I have the,

because I have the The Unify well we should do a smart home show again because, 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.

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 a bunch of CSS, some stylus that was compiled in there.

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.

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.

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

I have the Unify are really complicated

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, in reality, like, You've kind of been saying that a monorepo the nuance here

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.

Or what I found easier is just 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.

JavaScript API is a dependency of that. But then,

dependencies.

And those are all going to be shared across that

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, because, you know, Jared Jared doesn't miss. He he's, you know, pretty pretty awesome at everything.

But and,

has its own package dot JSON file, is like That's a big pain to do. So what's better is you could just have folders We'll have any like, the Vimeo, Rid. And, like like, let's say you install, like, React or Lodash.

run dev instead of p n p m dev.

That root repo in terms of versions, and it's all gonna be done via Simulink. So Had I not gotten 800 emails about it this morning? Oh, I I pushed an update to the site, and it it

And then when you run npm install from the root, It will walk through each of those and install

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

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, in all of your workspaces, it will know to go. And then a really cool thing about it is they will also,

my API has, They did the same thing as well.

meaning that, like, my video player Boom. Worked flawlessly.

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, Just a straight up React site.

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.

into your package like CD packages

with npm, I spend a lot of my time 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,

deleting node modules and deleting the package dot lock And then doing a re npm install, and everything will work after that.

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.

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

NPM link. Let me tell you, NPM link has got to be one of the most mysteriously,

rid a dependency of Express. You know? Like, they all have their own, Rid. Let's talk about,

UI, and then do p n p m blah blah blah inside of that.

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.

No more having to deal with and I do a p n p m install at leveluptuds hello.

You have your dependency, your normal dependency in your package dot JSON.

You know, the way that we do it is that the latest versions of all of all of the packages,

This I get a nice visual. I can pause through the repo. I know that if I make a change to the workspace

This is my experience with PNPM

Totally.

Every package in your workspace where

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, PNPM workspaces as well. So I guess, like, what's the added benefit there? Is it the

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, Unify

public.

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

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 rid. I just went straight for this.

package, it's gonna want to create a new, or 2014. I probably

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.

npm 7 rolled out workspaces.

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.

Other like, if I create a new SvelteKit is to have multiple packages in 1 repo 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

to link towards each other. And it just was such a pain in the butt.

Turbo repo,

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, Rid We thought that sounded like a pretty sweet name.

I don't know. Personally, I recommend starting with 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, Lerna,

Yeah. My my Gulp video tutorials are doing Okay.

and whether it is NPM workspaces or Yarn or PNPM or whatever, the workspace for me felt like Monorepo Formatting things, the things that we use all the time for both,

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 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.

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

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, It seems like it's designed for large teams, n x.dev.

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

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/

And

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.

like rid You. It's intuitive, easy to use accounting and invoicing software that does it all from sending

Rewrite everything once more.

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.

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

monorepo.

FreshBooks is made for nonaccountants

Rid. But and I used to say, yeah. I just exported them all, but I was like, well,

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

mostly Because I can't remember what the thing to type into the,

So

are another package or something like that. Mhmm.

there's there's some of the the some of these tools overlap responsibilities.

w way to rid. Install and uninstall.

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

Which one I should be using for what?

up hyphen l

Now everything that is needed,

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.

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.

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

Version Yeah. For each of those? You wanna know how I do it? I mean, 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 You'll wanna check out LogRocket. It's really truly a next level service. Logrocket.comforward/syntax,

Turborepo for that.

in like, the dash dash filter Yeah. Because it is different For npm, I think it's dash 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

or dashdashworkspace

beside yeah. Doing it visually, I'll post the command in here. Basically, So PNPM has their own, like, visual updater.

Hyphen, capital l, hyphen I, which will give you

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

Oh. But I'm I'm curious if that's rewritten.

Yeah. And I'm not sure

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

And,

in in a visual way where I can say, Install this 1. Install this 1. Install this 1 for all of my repos.

that both need React rid. Or both needs Svelte.

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 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, monorepos So it's probably worth checking that out. Specifically, you have a large team, but PMPM worked great for me without

And in that shared package, they would install React and then they would import react

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.

Rid. It's just really sweet. So you want to check it out for your next project. Go to content.ai.k0ntent this stuff is, I think, next gen Christmas, Like,

Cool.

and they have like, if you, the developer, what do you care about that? Well, they got a REST API, A GraphQL websites that have huge build times.

and that They can get into 30, 40

They have all kinds of tools that make it really easy to work with, like a to bundle everything. Interesting.

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

API if you want to use that.

Next. Js, Gatsby, Nuxt,

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,

dang.

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

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

I also considered this. And I'm I'm sorry, Let's move into,

For someone like me, if if you paw paw them open, there's like 800 pages in the docs and

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, I,

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.

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

to some degree wrong. But

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,

from From Microsoft. Rush folks, but that those dot the documentation

I I found the docs to be extremely orchestration.

rid. Has PNPM Yarn like, a spot, and then you grab another battery and do another 20 minutes.

it it It's microsace.

daunting

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 today. So this is a good good use case for LogRocket here because LogRocket definitely would have come into play,

built off of or, like, copied rid from or inspired by Lerna.

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

multiple times. And, Yeah. They they all kind of do that. But what is the secret sauce here? Because,

same library being loaded,

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 Svelte toy, which is my thing for

where it's like the same 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

And I think a lot of it was,

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 rid. Router and there's a you put a hard drive in it. And I have all these UniFi,

To PNPM because of how smoothly the 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

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

and moving over to npm was just Creating 1 more file with literally 3 lines in it.

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.

Ridiculous. Specifically, the, rid I was I was really enjoying that. I had set this whole thing up for npm workspaces, because FreshBooks.

onboarding went. I know that at the time, NPM had just gotten to workspaces.

in doing builds and deploying the thing is that, like, JavaScript or .net

does caching of your build. So it knows You can check that out at it works with Yarn, PNPM, and NPM, And I don't know how that works. Obviously, there's something with rid. It's smart about hashing your content,

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

So PNPM will also

Rid. Yeah. If you have questions for Jared, Amy Kaepernick,

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,

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 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 just wanna deploy this thing, especially people coming from the old fashioned FTP world and PHP.

because

it can do incremental build. So, And npm, as of npm 7, also released to have to manage NPM support.

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

Rid A lot of times, those things will be one after another. And So the kids are it's funny. The kids have been home from school for all of rid. And was recently acquired by Vercel, which is pretty cool.

dev, it's going to run

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

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.

tineco? monthly for,

getting a new vacuum. And actually are. So, npm 7 rolled it out. I tried for freaking 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.

A while back, Scott had sick pick the tineco Turborepo every single one of their not every single one, but a lot of their, like, fields, which handles all of your content management.

at least Turborepo.

Let's move into some 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,

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

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

T I n e c o.

I you know, the I actually went to PMPM first a I forked one of the data data tables rid just to have it work with SvelteKit and server side rendering

Forty gigs of node modules, which is an excellent idea. Yeah. It's great.

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.

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? And I was just wondering, like, what they say SharePoint uses it. Windows Store uses it.

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

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

Yarn

After after

very similar, it's kinda hard to choose Yarn for me.

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.

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,

And because it knows about that stuff, it can just incrementally build Wesbos, 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 my ESLint or dashdashw Running npm File, if you're using PNPM, we'll talk about that in just a sec. You define where all of your packages,

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, sick picked a while ago because My wife and I recently went down

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 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

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 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 if you want to do to your build?

apparently, you can rid. Share those caches amongst your entire team. Cool. So it'll just download the cache. So 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

because it improves the speed of your your actual,

rid especially, 2, I guess, also has them.

of build times.

Vercel wants to be the cloud caching service that you pay There are some tools out there And that's not all they do, but there's there's sort of this growing,

minutes What are the inputs

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

Vercel bought them

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,

they have, like, a bunch of tools and UI 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 that to me is a little scary

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.

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? 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.

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.

So they have some very good I think Turborepo is built in Rust, and I'm pretty sure n x is built in and environmental variables and all that good stuff.

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. So I think that this one is also worth checking out. It seems that it's been around for a while. They are, workspaces, It's it's built by Jared Palmer, 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.

I don't care. Yeah. Like,

Very content amongst multiple repos. Because, like, if you're changing one thing and you need to change something in the in another package,

Go.

And they are both very fast. And I saw there was some Twitter spat on who's faster, which

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

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 Alright. Let's talk about some of these tools that are also handy with, Yeah. I would check trying to think like that

and then just export it right away or enable enabling distributed They all have flags where you can install something in a specific workspace.

rid You're by listening to it. The show on Monday was about updating.

And at most projects, at a minimum, have a front end and back end,

Rid So if you want to run npm run dev 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 rid. And I had 2 of them crap out, Yeah. Or whatever. Right? So you could just be like, oh my gosh. Just play none.

Have you checked this out at all yet? I haven't. I have questions though for you. I mean, like,

rid. Npm start. But npm start relies on running npm run build

the caching? Like, what is the added benefit over using just rid Straight up workspaces.

on 3 of these things first.

But Turborepo is more along the lines of,

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

and it knows about

rid. Consolidate the the output.

And that's that's really, really nice. So you can say, I am going to run 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.

the biggest question I have with these tools

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

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

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.

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.

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 I almost did my YouTube exit. So thanks so much for listening,

many versions of them. Toads. Well, if you're managing

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,

as actual video Scrubable session replay with console logs, network requests, all that and more.

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, And overall, just organization

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 And then you might like a sponsor to help you solve one of these bugs. In fact, I just hit a bug Today is that they're they are build

you want

your terminal and you run between all of them.

npm run dev in a couple of these.

And that error caused by an API change has caused my site to break. So if you would like to have visibility

because 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 COVID.

this is I was just chatting with Wes, for this was really pretty rough.

who had an issue. So that'd be great. So check it out logrocket.comforward/syntax.

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.

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.

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.

at the same time.

If I'm working on my course platform rid. You can add your accountant onto your FreshBooks for free. Woah. So, rid what tends to happen is a lot of people just string together these

Rid. Or what you can do is you can just fix it, publish a new version 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 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, 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.

Mhmm. And then update npm install. And, like, that's not a very good workflow, especially when like like Like, for example,

2 to 10 PM for you. Totally. Yeah. I mean, that's,

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 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.

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? ai/syntax, wrong. Obviously, it's not Angular.

in a single repo. Like, it's it's massive. And they've had to, like,

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.

working on a single project that's a create react app site or something, 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.

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?

And it is awesome. It comes with 2 batteries, has a dock, all these little attachments for,

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.

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 rid. You can tell that they're not the same class of tool. Right? Yeah.

at

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.

And, Rid. And if somebody does a build on their computer or on, like, a continuous integration,

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,

rid Like cleaning the crevices of the couch and everything like that. And I'm very, very impressed

awful awful. It looks awful, but it's great.

How how good of a vacuum it it actually is, and, it's great. We you you install the,

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.

Okay. So, But it's 5 micro SD cards for $22.

the the best way to describe it. So

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.

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.

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

and to be able to manage those and orchestrate them. And they are useful an element query package.

Rid they they can become really helpful with larger teams because

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.

Let let's do a little sneak peek of what it is. It's running multiple And now the the floodlight camera just goes on and off randomly

Projects or multiple things in 1 single Git repo But, man, it's been awesome. The Tyneco ALA. The only thing I don't like is that it looks rid the rabbit hole of,

1,500,000.

people still

Lots of people still on I wonder how many how many

Download Gulp a Week. I bet it's a lot.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

myself, Ryan Allynska. Lot of awesome stuff and a new course coming every single month.

And you will save 25%.

for a full archive of all of our shows. Rid. And don't forget to subscribe in your podcast player

Head on over to syntax.fm It's it's not really doing a ton, But it is making it easier to manage multiple packages within 1,

So thanks so much for watching.

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 So let's say you want to build your CSS and you want to build your JavaScript and you want to compress images.

On Monday. Peace. Peace.

rid. Wesbos.comforward/courses.

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, Thank you so much for LogRockets for sponsoring.

level up tutorials.com.

or drop a review if you like this show.

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

essentially You can sign up to become a level up pro today,

Rid And in order experiences with monorepos ourselves. So, syntax.

a lot of them are separate applications.

the I have a an entire admin dashboard, which is, cameras. And, like, one of the cameras you can get is a doorbell.

Rid. And inside of that, there's there's many things. There's the the video player, which is its own React

to, Yeah. So that's something I don't I don't know in terms of the orchestration,

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 rid. Not only your build, but your dev time as well.

But then there's Rx.

Yeah.

Yeah. I'm I'll have to sick pick my new robot vacuum that we got because, those nested

I thought We're we're just just,

rid of the winter.

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, dev

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

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,

FAQ on a Turborepo 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, rid. The charger on the wall, Rid. But they're super happy about it.

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, and we will see you

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.

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.