Check out a free preview of the full Deno First Look course

The "Oak Middleware" Lesson is part of the full, Deno First Look course featured in this preview video. Here's what you'd learn in this lesson:

Burke walks through importing Oak and creating a simple Oak server. How to implement middleware in Oak is also demonstrated in this segment.

Preview
Close

Transcript from the "Oak Middleware" Lesson

[00:00:01]
>> We want the simple Oak Server. So Oak is a third party library for Deno, we can find it in the third party library section. This is their GitHub page, and it says right here middleware framework for Deno' s HTTP server, including a router and middleware inspired by Koa.

[00:00:22]
All right, so to get started, we need to import this thing, and it's got some code here, so heck, let's just copy their code. Where is our project? I'm gonna close down this express, we now have too many windows open. All right, and what do we got? Let's go to our simple, see if I can find our simple web, Oak simple server, there we go, okay?

[00:00:52]
And let's go ahead and import this application object. And again, you see this mod.ts, again, just a naming convention, just means module. If we were to actually look at this file, what it will give us is all of the different dependencies, right? So, it's pulling in all of this stuff, and then exporting all of this stuff, sort of sort of like our depths.ts file both for oak.

[00:01:19]
And so, when we fetch this thing, it's gonna fetch. So, it's fetch. It's gonna fetch Oak, and all of the different dependencies that come with that, of which there are quite a few. And if we wanted to see that, we can just do deno info app.ts, and that will show us see, here's all of the Oak stuff that we've got, quite a bit of it.

[00:01:48]
Quite a bit of dependencies. All right, so let's talk about how we use this thing. We're gonna first need to create an app, that's a new application like this. And then what we need to do is we need to tell the app how to handle an incoming request and we do that by basically defining this piece of middleware, okay?

[00:02:13]
And again, middleware is just as doing something to the request as it comes in. So, what we wanna do is get requests and respond to it, that's all we wanna do here. So, what we're gonna do is, pass a function, that is like this. Two parameters that it takes, and then what we wanna do is just this context object, and see it's TypeScript, so it knows that its stuff type context has a response.

[00:02:41]
So response.body, should have a body equals "Hello world". And let's just do from Oak, so we know we're actually in a different project here, okay. The last thing we need to do is just tell the server that we want it to listen, so we want app.listen. And then it's gonna want an address or an object which is like a port and a hostname.

[00:03:11]
So, let's define the port and the hostname up top is probably just a good thing to do as constants. Port, let's make it 8000 this time, and then hostname equals, just to save confusions keep it a 3000, remember box of dots. Okay, and then let's see our port, here's port, and our host name.

[00:03:40]
Hostname is HOSTNAME, okay. So, this should be all we need to start crank up and run an Oak server. And we probably want to add this line, so we know that it's listening otherwise we won't get any output. Now that things have actually been successful. Let me make sure I don't have anything else running on port 3000 in Linux or Mac, to do that you can run this lsof -i tcp:3000 or whatever part you're looking for.

[00:04:17]
It'll tell you there is something still running there. So, we wannna kill that, 31679 probably that express app. Okay, cool. All right? So, let's open this, let's clear this out, and we're gonna do, deno run, just allow everything. Let's, watch unstable app.ts. Checking in transpiring now listening on http 3000.

[00:04:49]
Sweet, so let's open this. All right, great. So, now we're using Oak. Although, it looks a lot like the HTTP server that we used from Deno, right? Not a lot of differences there in terms of the syntactically similar, maybe a little bit more concise. It doesn't have that weird for await loop, which is kinda quirky to me, but the same thing, okay.

[00:05:16]
So, one of the things that I want to talk about is middleware and Oak, and exactly what that means. So, you see, we've got this next variable that we're not even using here, right? We could like even pull this out. Middleware gets executed sort of like an order here, so let's say we wanted to add another piece of middleware.

[00:05:40]
And then in that piece of middleware, what we want to do is just console dot log, and just say "This is middleware", right? We might be taking some action here, but we're just we're just logging out. And so, what's gonna happen is, Deno is gonna hit this piece of middleware.

[00:05:56]
And then we should see this logged out. So let's try that and see what happens here. So I'm gonna refresh and you'll notice that we say the page cannot be found, but if we come back here, it says, this is middleware, and it's still running. But why did this break?.

[00:06:14]
Well, it's because we never called next, we actually have to say next, which tells the program continue on to the next step. So it never gets to this part here because we didn't call next. And so, we have to do that. So, that's what middleware does, if it's not returning the body response, then it should call next and something eventually needs to do that.

[00:06:36]
But now that we've done that, we should be able to refresh, get our old page back and see that this is middleware, all right? Okay. So that's how middleware works in oak. Just again, important to understand that because we're gonna use the word middleware a lot, and how that works with routing, and what not.

[00:06:58]
Let's see, what else we want to say about Oak? And getting started with Oak. We talked about middleware, we talked about calling next, and we talked about, yep, there we go. So, you can write your own pieces of middleware that use this app.use function, you pass the middleware to app.use.

[00:07:17]
And you can do all sorts of things with it like handle routing. So, in the next section I wanna talk about how we can do routing with Oak. So, that's what we'll do next.

Learn Straight from the Experts Who Shape the Modern Web

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