Define dynamic routes through Express

[00:00] To demonstrate routing in Express we're going to go ahead and get our dev server started back up, and then we're going to add some code that basically reads in a JSON file and populates a users array with the data from that file so we can use it for some of our demos here. The first thing we'll do is make sure that we are in fact loading that data and can send it back to the browser. We'll stringify that object, send it back to the browser, and we do in fact have a big old blob of JSON data.

[00:30] That isn't all that readable, or useful, so let's see how we can create a little more useful output. We will create a variable called buffer that will initialize to an empty string. Then we're just going to iterate over our user objects, and for each one of those we're going to grab the full name property that we defined above, so user.name.full, and we'll add that to the buffer and then we'll add a break tag so that we get a nice user name on each line.

[01:04] Then once we have fully built up that buffer, we will send it back using the response object. So now if we refresh, we can see that we do get a nice list of our users. Now let's get rid of this [inaudible] route that we're not using, and let's actually turn this into a list of links that will link us to a detail page for each one of these users. We'll construct an A tag here, we're going to use the username property as the HREF and then we will close that tag up and see our output.

[01:41] There we go, so now we get a nice list of links, and each one of these names is going to link to the page for that user and use the username property as the new path. If we click on one of these users, it's going to take us to their page, but it's telling us it can't get that URL which is because we haven't defined it yet. Let's go back to our code and we will define a new route, and this time we're going to say app.get/:username and then our callback function.

[02:13] The colon there is important because that is telling Express that that's essentially a path variable, it's not the actual string "username," or the string ":username" but whatever that path is there, we want to be able to pull that off, and we do that using the request.params.username so it just matches that name there. We can just send that back to the browser and see that it does in fact work now if we go to any page, we get that username from the URL spit back out into the page itself.

[02:46] Now another dynamic way to define routes is to use regular expressions. In this case, we can define a regular expression as the first argument to app.get, and in this case we're going to say anything that starts with big, and then has a string of any other characters, we want you to log out biguseraccess to the console, so that we know that we've accessed a user with big in the name.

[03:15] But if we go and run that, we actually don't get any output, and that's because the order in which you define routes in Express is important. We need to move this above the username route because once that response.send is called, the request is over and nothing else after it is going to get run. So if we move this above, and then go refresh that page, you'll see we do in fact get that console log.

[03:45] We're also getting the username sent to the page from our username route, and that is because you'll notice in our regular expression route, we're calling "next" and that is the third argument to our callback function. What that is, is it's a function that gets passed in, that when you call it, it essentially says, "This route handler is done, pass control on to the next route handler, and let it do its thing."

[04:15] Just to show how this works, we can add a second regular expression route, this time any time the word dog is in the URL, we're going to write out, "Dogs go woof," to our console. You can see that does in fact work.