Coding

Node.js – Tutorial – Routing

  • 00:00:01 Hi everyone, welcome back to the next part in our node.js series.
  • 00:00:05 In the last video we finished our second episode, so to say, where we actually rendered some html to the screen.
  • 00:00:14 Now that is certainly closer to a real website but…
  • 00:00:17 still a little bit away.
  • 00:00:19 In this video, we'll see how we can target different routes, so different URLs on our page…
  • 00:00:26 the user might visit.
  • 00:00:27 Let's check this out.
  • 00:00:29 So I created a new project here, and I only created two HTML files, um, which…
  • 00:00:33 will basically be the pages a user can route to. An index file which just says 'it works'…
  • 00:00:40 and a login file which says 'The Login Page'.
  • 00:00:44 Now, I also get my server.js but currently I only get the very basics there, it's not even handling the requests.
  • 00:00:51 What I want to do in this app here, is I want to create a seperate javaScript files where I will handle the requests…
  • 00:01:00 where I will do the routing.
  • 00:01:02 So I will create this file now. Let's just call it app.js.
  • 00:01:06 Now, in this file here, I…will export a function which should be useable in the server.js because I want to pass the request from my server javaScript file…
  • 00:01:19 from this createServer function here. I want…here, the function we're executing here, upon each request, I want to define here in my app.js file.
  • 00:01:30 I can use module.exports to, well, export the function I want to use and I will define javaScript object, which should be exported.
  • 00:01:41 and then here I will have a function which I will call handleRequest and this will be a function which takes a request and a response.
  • 00:01:54 So far this is the same function we had in our server javaScript file before, now just in another file.
  • 00:02:00 In this function, I first want to set my header, with writeHead, which should well be okay…and…should then define the content-type to be text/html.
  • 00:02:17 That will be the default if we're, well, targeting a valid route.
  • 00:02:22 So this is the first step. Next I want to somehow check which url the user entered. So which route I should take and which html file should be rendered.
  • 00:02:35 I want to have two routes. The index route (which will just be a slash at the end of our url, so the route directory) and …
  • 00:02:44 the log in route when the user types slash login.
  • 00:02:49 So in order to get that path so we're only interested in the path of our url, not the localhost part of the port, not any parameters, just path.
  • 00:02:58 I can use another core module in Node.js, umm called url, and I require it by, well, requiring 'url'.
  • 00:03:07 And this will give us some helper functions to work with a url.
  • 00:03:11 What I can do here now is I can store the path in the variable path and then I will call the parse function on my url module.
  • 00:03:23 Let me zoom in a bit here. And I will have to pass a string into this parse url.
  • 00:03:31 Or in this parse method here, and this should be well, the url I get from the request.
  • 00:03:38 I get access to URL property on my request object here, and pass this
  • 00:03:44 into my url parse method here.
  • 00:03:46 Then after I get back an object with several information blocks or with some info on this url
  • 00:03:54 and I'm interested in the path name which would just be, well either just slash or slash login or whatever the user entered as a route.
  • 00:04:04 Then I can create a switch statement here where I say switch the path and then we get the case that is just a slash through the root directory.
  • 00:04:15 In this case I want to show the index.html file, now I can do this but again reading it in with my file system module and then outputting it in the response and so on.
  • 00:04:31 And I will do this this way but I will also do it the same way when we're having the login route and I'm rendering the login html file.
  • 00:04:40 Therefore I will create a new function to do this, which we will call render.html, which will take a path and response as arguments.
  • 00:04:50 Inside this function here I'm just going to copy the code from the last section here, in my file system.
  • 00:05:00 And paste it in here. Of course I have to require my file system here.
  • 00:05:07 And then I will just replace this index.html string here with a path … and the rest is fine. The rest is absolutely fine and it's exactly working the way we need it to work.
  • 00:05:20 So back here in my switch statement I can then say, ok if we're accessing the root directory I want to render HTML and here I want to, well, show the index.html file
  • 00:05:31 so I'm specifying the path to this, with the dot slash at the beginning. I also have to pass the response of course.
  • 00:05:40 Then I break and the next case will be that I have /login and under this circumstances I want to also render in the html file but it will be well the login.html file
  • 00:05:52 set to response and break and I then I will have the default case if the user enters anything else then I want to show, well, page not found.
  • 00:06:04 So then I will change my HEAD to say 404, no, 404 page not found, and then I will output a response where it should say ehh route not defined.
  • 00:06:20 And here we have to end the response because when we're rendering HTML we're doing it in the renderHTML function but here we're not doing it anywhere therefore…
  • 00:06:28 I have to do it here. So let me save this and now it will almost work but there is one thing we haven't implemented yet and that is, I have my function here
  • 00:06:38 that handles the request function but in my server dot javaScript it's not using that. So first I have to import my module here. So I can do this by requiring dot slash app without the file extension.
  • 00:06:58 And then here I can just call app and request, without parentheses.
  • 00:07:05 This is how we create this and now let's test it. Let me start my server here.
  • 00:07:13 And then navigate here. It works, this is the index.html because this is our root route here just with a slash in the end.
  • 00:07:21 So let's check this, it works. Ok, that's correct. Now let's try slash login, uh, it's also working.
  • 00:07:29 Let's try anything else, like 'any' — route not defined. Great.
  • 00:07:34 So this is how we can implement routing in node.js, and I want to say straight away at this point I'm doing it with pure node.js so you can get the basics.
  • 00:07:46 So you understand the way node.js works. We will very soon use express, which is a framework which will make a lot of these things we're doing by hand a lot easier.
  • 00:07:56 Like for example writing all this routing code here is not really convenient right, and if we want to change something that's…it's just not convenient and…
  • 00:08:07 we've got much better ways to do this when using an actual framework on top of node.js but I find it very important to understand basics too.
  • 00:08:16 So that's it on routing, see you on the next videos. Bye.
  • 00:08:21