All right. 1
So this is the current state of our website. 2
We're able to add new posts through the compose page and once we hit publish then our posts all appear 3
right up here on our home page. 4
As you might imagine a blog post is usually a bit longer than this right? 5
It might be five or six paragraphs long. And having all of that cluttering the home page is not a great 6
thing and you probably usually wouldn't read it from the home page. 7
If you think about the blogs that you read, you probably could click on the blog title and it would take 8
you to a full page version of where the entire page is dedicated to that one blog post 9
right? 10
So if we wanted to implement that then we kind of have to have a way of accessing that page so it would 11
be something like /posts/day-0 right? And then when we hit enter it would take 12
us straight to a single page which is dedicated to a single blog post. 13
Now you see the style of URLs all over the Web 14
right? 15
Say if we go to BBC News and you have a look at all the different topics that they have, say technology 16
right? You access that through /news/technology and then politics is /news/politics 17
business, world etc.. 18
right? Now on one hand you could create this by creating separate paths 19
right? 20
So where your route is simply this /news/business and you render a custom page for each and 21
every one of these topics. 22
But if you click down more you can see there's like loads of different topics and that seems a little 23
bit repetitive and quite painful. 24
So I want to introduce you to something that Express allows us to do which is to use route parameters. 25
Have a look at this page. I'll link to it in the course resources for this lesson. 26
And I want you to read the section on route parameters. 27
It goes into detail about how it works. 28
But let me summarize it for you. 29
Essentially what Express allows you to do is you can use a colon and then a parameter name. 30
And when the user heads over to that page say /user/123, then you will be able to tap into 31
that parameter stored inside this user id that is 123. 32
Now in order for this to make more sense I want to show you how it works rather than just tell you. 33
So I've set up a Node.js playground on KataCoda which is a really nice tool for demonstrating some of 34
these things because we can utilize this standalone playground just to demonstrate one very simple thing. 35
You don't have to follow along. 36
I just wanted to show you how it works. 37
So over here we've got our app.js and I've installed some Node modules on this playground. So I've 38
got Express and I can use it inside my app.js. I've created my new app using Express and I've set 39
my app to listen on port 3000. 40
Now if I head over to the linked page on KataCoda then I can view that page and this is the home route 41
or the root route. 42
Currently there's nothing there because I haven't told it to do anything because I haven't actually 43
run my app in the terminal. So I'm going to use nodemon to start up my server and now my server is running 44
on port 3000. 45
So now if I hit display port then tells me 'cannot get /' which means I have no get route 46
for my root route which is fine. 47
That's completely fine. 48
But just so you realize, this stand alone playground doesn't have body-parser, it doesn't have EJS. 49
We're just looking at pure Node.js with Express tagged on. 50
So this is a feature of Express is basically what I'm trying to say. 51
Now let's say that we create a route with app.get and we use something like /news/ 52
: and then we get to give that parameter name let's say topic as the name. 53
And now we're going to add our callback 54
so our req and res. 55
And then we're going to open up a set of curly braces and inside here all I'm going to do is I'm going 56
to say console.log this parameter topic 57
right? 58
And in order to access it using Express the syntax is req, 59
so we're tapping into the request object when this route gets triggered and then we say req.params 60
dot the name of our param which is just topic without the colon. 61
This is the syntax that you will see in the documentation here 62
right? 63
We're tapping into req.params and that gives us access to all of the parameters that have 64
a colon in front of it and it gives us their values. 65
So what this means is that if I head over to localhost:3000/news/science then it should 66
log science over here. 67
Let's head over here and let's go to the /new/politics right? 68
Hit enter. 69
So now if we head back over here and we check out our console then you can see politics is logged down 70
here. 71
So let's go ahead and change that URL again. 72
Let's just say, uhm I don't know, movies. 73
Hit enter. Now 74
movies gets logged here. 75
So this is a way for us to be able to tap into that part of the URL which we've pre-specified as a 76
parameter. 77
So instead of creating a route for every single one of these say you know news/science news/ 78
politics, 79
we can actually use the express routing parameters to do it dynamically and we can tap into that part 80
and then decide what to do instead of having to pre specify every single topic which is quite painful, 81
right? 82
So Express routing parameters are really simple and once you wrap your head around it, it's really really 83
powerful as well. 84
Before you tackle this challenge I recommend that you head over here and read about route parameters. 85
And once you're ready then you can go ahead and test it out in our upcoming challenge.