Current section: Routing 6 exercises

Example Resource Route Usage


00:00 we want the URL for our resource route to be at resources slash health check. That's where we want this to go. Not for any particular reason that is important as far as the framework is concerned. We can have this literally be anywhere that we want.

00:16 But I like putting my resource routes under resources just because it makes more sense, and especially since this is for automation purposes and the users are never really going to see this, I don't really mind having that kind of convention myself. So to make that happen, we need to add another folder in here called resources,

00:35 and we'll add the plus so that it can be a folder, and then we'll say healthcheck.tsx. Now again, on this convention, we could also say resources.healthcheck.tsx, and that would be a perfectly fine way to do this.

00:53 But I like using the plus convention for the routes at that first level, especially when we're going to be putting a bunch of routes within this folder in the future. I think it just keeps things a little bit cleaner. Again, I don't like nesting the folders very deeply, so I'd maybe do two or three levels and that's as far as I'd go.

01:11 But we're going to go in that resources plus slash healthcheck, and then this is really all that this route needs to do. So we export a function called loader. No, that's my snippet. We're not going to do that yet. Come on. Then we're going to return a new response.

01:29 Okay, and that's it. We're done. So the exercise itself, there's not a lot to this, but there is actually a lot of really, really awesome things that this enables us to do. So I want to show you a couple of those things, even though the exercise is actually done. All that we did was create the file in the place,

01:47 the conventional place where this would create the route URL that we are looking for, and then we have a loader that we export. This is a special conventional function that you export from a route, and then you return a response object. So a couple of things I want to point out.

02:05 This is a resource route because there's no default export. If I added an export default function, my thing, then return div, hi, now I refresh and now I am a regular route. So just like a regular UI route,

02:23 I'm nested within my parent, which is the root route. That's why we have our header and our footer. But by excluding the default export, we can be considered a resource route. What that means is, Remix will check this route and it will say, oh, you don't have a default export, so I will just call your loader and return whatever it returns.

02:42 What's really cool about this is that means we can return anything. We can return an event stream and support like real-time chat with this, or we could return a PDF that we generated, or we could even return some CSS. We could say body, color,

03:00 red, important, there we go. Then we'd say headers and content type, text CSS, there we go. Now, let's just take this all the way, why not? So we'll come over here to our root TSX.

03:18 Actually, you know what? Let's not do the root. Let's show you something else that's interesting. Let's go to our username right here, and we can export some links right here. So const links, so our links function, there it is. Our link is going to be that CSS file that

03:36 will be generated for us by our health check-in point. So of course, you wouldn't actually do this. But I just want to show you, this is pretty cool. So we'll say rel stylesheet, and then point to this route right here. So we'll say slash resources slash health check. Now, if I refresh this,

03:55 we're going to get that body color red. So that is sending us back what we would expect. If I go to the homepage, the color is not red. If I go to users Peter, boom, the color is red. Then if I go to this sibling route, the body color is not red anymore

04:14 because these links are no longer included on the page. So that's something that you might find interesting, is when the link is not active, or when the route is not active, the links don't appear on the page. So if I go back, you'll see that link gets added, and the body turns red and everything. If I go back, then that link gets removed.

04:33 So that's one really cool thing about nested routing right here. But to circle it all back to these resource routes, you can do anything with these. It's so, so cool. Whatever you need to have, like anytime you need to have some HTTP endpoint that does something, like you can return JSON,

04:53 like a regular endpoint. You could do a GraphQL endpoint here. You can generate an MP3 file. I actually use resource routes in an app that I wrote to stream an MP3 for a podcast or RSS feed. All sorts of things. Whatever HTTP can do, you can do with resource routes.

05:13 So yes, you absolutely use resource routes a lot. You don't typically generate CSS, but you can imagine, here you get the request, and then you can get the user from the request, get user from request. So whatever utilities, and we'll learn more about this later. But now you can say,

05:32 user.favorite color. You can generate the CSS. So whatever you want to do, you can because of the flexibility that resource routes gives you, which I just think is super duper rad. And I hope that you do too, because resource routes are pretty fantastic. Now, of course,

05:51 I don't wanna do this long-term, so we'll remove all this stuff. And now here, Peter is not red anymore, and I can go to health or resources, health check, whoops, resources, health check, and we get our okay. And like I said, health check endpoints, you typically are going to be talking to a bunch of services.

06:12 I have on my website, I make a query to the database and make sure it responds with what I expect. And I talk to another service and make sure that I have that connection with the service. So whatever you want to do to make sure that your system is healthy, you do that here, and then you return a positive response if things are good or a negative one if they're bad. And then deployment systems

06:32 can automatically wait until things are good before they start sending traffic your way. It's a really common practice and resource routes are what get you there.