Lesson Description

The "Turborepo Graphs" Lesson is part of the full, Enterprise UI Development: Microfrontends, Testing, & Code Quality course featured in this preview video. Here's what you'd learn in this lesson:

Steve uses Turborepo to generate a dependency graph of a codebase. He also discusses remote caching options with hosts like Vercel, but stresses that users can deploy their own caching servers if needed, including open-source options in Docker containers.

Preview

Transcript from the "Turborepo Graphs" Lesson

[00:00:00]
>> Steve Kinney: Things that I have run exactly one time to verify that it exists and then have never bothered to do again, so we can all have that experience together and so I can do something like, um, nope, not that. Let's do npm or npx, your choice. Um, and we'll give it to the help real quick and we'll see. Um, not so big, it's, uh, you can see all the things that you can do, but the one that I want to show you is we could open that in the browser, can't we?

[00:00:56]
Is it the prettiest graph in the world? No. Would squares have been better? Yes. Perhaps a font, right? Like, but it did generate an HTML or SVG. I think it's an SVG. I'd be amazed if it was like, because they're pulling in some like viz library, like you could have treated me to a CSS file. Uh, anyway, it will go ahead, it will, if you ever wondered what the dependency graph of your application is.

[00:01:48]
And this is what I, too much inside baseball. This was what was on the site in the notes before I turned to that mermaid diagram that you saw earlier because I was like, this is too ugly for me to put on my own website. This is, if one looks at the commit history, this was present at one point. It's probably still in the repo somewhere, um. And like, obviously we're not really using the legacy or the mocks, that's for tomorrow, but like, you know, that is where I got that initial graph from.

[00:02:14]
But like you can, it's interesting to get a sense of your codebase. I, you know, I would be remiss if I did not say in the modern era, particularly if you wanted to get a pretty decent map of your codebase. Again, your little robot friends are really good at this and probably make you at least a prettier one. Um, so there's that, but like it is nice to kind of see, or if you're debugging to get a sense of what Turborepo thinks your dependencies are because like laud code could be like this is like the structure of your repo, but really it's what the tweaks that you want to do in Turborepo that are important.

[00:02:50]
But yeah, you can get a graph, you can see your dependencies and get a sense of like what is going to trigger what, and this is again, I did turbo run build, we could, uh, for instance, um. I literally have never done this one before, so strap in. Right, like obviously there's no dependency chaining on lining, um. And we haven't set up any testing. Yeah, I was like to see what some of the other ones were, but like the build system is the one with the most dependencies at this point.

[00:03:34]
So cool. Um. Yeah, so those are the kind of major pieces. I will talk a little bit about remote caching. You need to have a place that you're remote caching. Um, like I said, Turborepo is a Vercel jam. And Vercel is very happy to host that for you, right? And in Vercel, if you're using Turborepo, they'll like, you'll see it in like your deployments, like they will have optimized everything for that.

[00:04:03]
Uh, that said, on their, in their own docs, they will list all the open source like deployments, uh, like remote caching servers that, um, you could ever want to sell, you know what I mean? If you want to deploy your own because you don't use Vercel, because you either like you can't in your company or you have something else, like, it's open, they have a bunch of open source servers. It's not particularly a difficult thing.

[00:04:27]
There's like, you can stand one of these up in a Docker container and deploy it somewhere also, but like, if you do choose to use Vercel, which to be clear, I cannot talk too much about deploying the open source ones because I use Vercel, it is a way that you can do all that remote caching. There's not a lot to say other than like, you either say that it's set up or you point it at one of these servers.

[00:04:47]
And then you back away and it does the thing. Uh, but I would say that like, should you go down this road, obviously that is good and you should do it. I do it even though right now I'm a one person shop. But it means that if I ran it on my machine before I pushed it up, there's that at least, you know, and like that's why I have two minute compile times.

Learn Straight from the Experts Who Shape the Modern Web

  • 250+
    In-depth Courses
  • Industry Leading Experts
  • 24
    Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now