REST & GraphQL API Design in Node.js, v2 (using Express & MongoDB) Solution Branch Walkthrough

[00:00:03]
>> Scott Moss: If you're not ready that's fine we're gonna go to the solution. I left a lot of stuff out intentionally and unintentionally. So it's fine, it's totally fine. Okay so let's go server js right here. First thing is ignore this setupMiddware, ignore this connect(), we're going to get there, you do not need this, we're going to get there.

[00:00:27] But what you do want to look at is on line 7, boom, we made an app by using express. Whenever you invoke express it just creates an app for you, you can have many, typically you have one express app. And that app by default has a router baked into it, but you can have many routers.

[00:00:45] As we are going to find out in the next lesson, we have all different types of routers. But, the default express app is like the global app for your server. It is your server, and then you can have, you can use the router on it. Which is a global router and then you can supply it with other routers that you can mount on different paths and stuff like that.

[00:01:02] So the first thing is you made an app, right? Ignore this, ignore this, ignore this, and then what I did was I used app.all which is basically like any verb, any path, star, do this. So it doesn't matter what you do, it's always gonna send this back, that's what that's doing.

[00:01:23] So that was just my hello world. I'm sure everyone has something similar to this, probably app.git with the index slash, right? This is just saying every single verb, every single path, send that back. This we'll get into later, [COUGH] and then inside of index, this is where it probably kind of gets crazy.

[00:01:42] So I'm using that HTTP module that I said do not use. I'm using it to wrap the express app because express is compatible with this module. HTTP module allows us to consume the express app and we can use the HTTP interface to listen for the request. So this thing has an event If approach the task to it and we can use it for hot module reloading.

[00:02:07] So the quick answer is the reason why it's here is one I was gonna do web sockets in here, I took out the last second. So I forgot to retract this but then this same time, I kind of got to leave. Because I need it for my hot reloading, because I need to be able to listen to these events.

[00:02:21] So if you are not doing web sockets and you are not doing hot module reloading, then you don't need this http.createServe. You can just do app.listen, which is what's in the example that I gave you. So this is specifically for hot module reloading, so if you want this, you can just go ahead and take out to the lesson.

[00:02:40] The lesson-1-solution branch which has all of this. But yeah, so basically here we create a server just like express we can listen to any open port. If you pass in a port that's not open it's gonna throw an error. Then a callback that runs when that port is opened.

[00:02:56] And then this right here is just to respond to our hot modular loading. So let's just test this out, you can run yarn start. If you did look at the package at Jason. You will find out that's the commands. Yarn start or MPM start if you are using MPM, that just runs webpack, with this.

[00:03:19] Once you start it up, you'll see your console log and your callback. You can go there and you see it doesn't matter what I do. I'm going to get okay true. Get request to, whatever. I'm always going to get okay true cuz that's the thing that I put.

[00:03:40] I could also test this with any other verb so
>> Scott Moss: I just told you like okay true, you know the pulse request right? Cuz I did that glob there. Right here, this is what's happening.
>> Scott Moss: Everybody following here. I made an app, I register a route on all the verbs so notice that means when you use app.

[00:04:16] That's followed by a verb name, so you'd probably add app.get. That's not saying I want to get something from express that's saying I want to respond to a get request. That's what that dot kit is, it's the HTTP verb that you want to set this router for. So you might be thinking there's probably an app.post, app.put, app.delete, app.options.

[00:04:35] Yeah, there is, there's also some other ones. So that's the verb and you can see that all is just a shortcut for all of them. For every single verb, for every single route, respond with this JSON, that's what that was, yes?
>> Speaker 2: Do you want to demo the hot module reloading since we hooked it up?

[00:04:55]
>> Scott Moss: Yeah, let's show some hot module reloads. Okay, so my server's on right here, it's listing. If I go and lets just change something, I guess I only have one thing to change really. Which is in server JS, if I just say, ok: false and hit save and I go back and look at the terminal.

[00:05:17] You'll notice right here web pack is telling me, these new chunks, or these little bits, I've got updated. And what the update was, it stores it in this file, and what it does is, it'll grab that update and patch it, on the fly, to the modules that are already running.

[00:05:33] So it doesn't actually restart the server, it just patches the code, because the webpack is the bundler. And then, because that happened, the code is still running, the server never stops. It fixed your car while it was on the highway, and if I go back here and I refresh, you'll see it says false now.

[00:05:51] The difference between something like this and something like NodeMon. If you use NodeMon, which you totally can, what it'll do, you'll tilt the files you wanted to watch. Then the server will restart when you change those files. It's a complete refresh which means any state that you have in that app will be gone.

[00:06:09] Whereas here, the state is kept the same like for instance if I were to put some state up here like, actually no I don't have any cache. Basically, any state that you have is not gonna be gone so if you were like Keeping track of something, some cache or something, it'll stay there.

[00:06:26] It's not going to refresh, it's totally going to be there the whole time. Any questions on that? I think this is a really good workflow, this is adopted from client side development. Something we use a lot on client side development, hot mod reloading, totally use it on the server.

[00:06:42] You obviously don't need this in production, so when we get into production and stuff, I'll show you like how to not use this. Cuz you don't need a hot module reload in production.
>> Scott Moss: Cool, any other questions?
>> Scott Moss: All right, yeah, you have one?
>> Speaker 2: Just a question about where the hot module reloading is coming from, just a module that you included in the package.json, right?

[00:07:06]
>> Scott Moss: Sweet, so good question. This module.hot, so basically, so what Node looks like what actually happens in this auto mode is that this. Whatever file you write is gonna be wrapped inside of a closure like this, like a iffy, or a immediately invoked function, right. This is a module, right, a module is just a closure.

[00:07:29] It's just so you can't interact with global space, right. So this whole thing is wrapped inside of a function at run time. When node actually keeps this file, it's going to do that. But, that's reason webpack which is bundler and webpack has it kind of like simulates a module system.

[00:07:47] But because we are already in the module system there is a lot overhead. But basically, what's happening here is this module.hot, module is a global, that's provided to us by webpack. And it has a hot property on it, and we can tell webpack that we're gonna be using hot module reloading.

[00:08:03] So if you go to the config you can see right here, we're telling webpack that we wanna use hot module reloading and, right here, hotModuleReplacementPlugin. That right there supplies the hot parameter to the module global inside a node. So hot module reloading is coming from web pack. So without web pack, we can't do this.

[00:08:22] This isn't pure node, you have to set up web pack to do this. Without it, we won't be able to do this, we'll be using something like node [INAUDIBLE]. So that's a really advanced topic and we can go into the really source of that. Later on, but basically it's coming from webhack and it's almost magical, so it's pretty cool.

[00:08:44] The first time I used it I was like, what is this, this is crazy. So that's hot module loading.