All language subtitles for 005 Understanding and Working with Routes_en

Now in the last lesson, we looked at how we can use this app.get method, and using a callback function,

we can tap into the request that was made to our server, and we managed to log it into our console, and

then we looked at how we can send back a response that will get rendered on our browser.

Now in this lesson, I want to talk more about this first parameter for our app.get method.

Now you can see here we're targeting the home route.

Now it's a little bit awkward, because in British English we pronounce route, as in R O U T E, as route,

but that can also sound like root as in R O O T.

So from now on I'm actually going to use the American pronunciation, which is very odd for me, but it

might help you differentiate when I'm trying to say root or when I'm trying to say route.

So from now on, when I say root I mean R O O T, when I say route I mean R O U T E.

So I hope that makes it easier for you guys to figure out what it is I'm trying to convey.

So this first parameter specifies the route that we are going to respond to.

So that means when we get a get request from a browser that is targeting this route, which is the home

route, then we're going to respond with this callback.

Now we can respond to different routes.

So for example, if I create another app.get method, and, instead of targeting the home route, I target maybe the

contact route,

so that simply is /contact,

then I can create a callback that has a req and a res, request and a response,

and I should really change this

now that I've changed the parameter to res, and in this case our response is again going to be to send some

information. And the information I'm going to send is simply, “Contact me at angela@gmail.com”.

So now we've created another route.

Now, as you can imagine, a lot of programming is all about forward planning.

So it's kind of saying like what if somebody tried to go to our home page.

Well then we're going to respond with this.

Now what if somebody tried to go to the contact page.

Well then in that case we'll respond with this.

So if I hit save now, and I again quit my server, restart my server, and we go on to port 3000,

then you can see that when I go to port 3000, this is my home route that I'm hitting up.

It's making the request to this location.

Now if I go to my contact route, so /contact, and I hit enter, then you can see I'm hitting

up a different route,

and that gets caught by these lines of code.

And in that case my server sends back the information where it says, “Contact me at angela@gmail.com”,

and that's what we see on our web page.

So you can specify in this scenario what should happen, in this scenario what should happen, and you can

start setting up the code for a lot of different routes.

So now here's a challenge.

I want you to create a new route so that when I go to the About page of my web site at localhost, I want

to be able to see a quick brief bio for who you are,

right?

So this is like a personal page essentially.

The home page just says, “Hello, world”, the contact page has my contact details, and then when I go to the

About page it should now have a brief bio of who owns this web site.

So go ahead and set up a new route for the About page and send back some information about yourself.

So pause the video now and complete that challenge.

All right.

So we've already set up two routes, one for the home route and one for the contact route.

So now we're going to set up a new one.

And, again, we're going to target get requests that are made to the about route.

And when that does happen, we're going to use a callback function with a request and a response.

Now the response we're going to make is, again, we're going to send some information, and we're going to

say, “My name is Angela and I love beer and code.”

So now our server is able to respond to three routes.

So if the user goes to our home page, this happens, if the user goes to our contact page,

this happens,

and if the user goes to the About page, then this should happen.

So let's hit save, let's stop our server,

start our server with the new code, and refresh.

Now our About page has a response from our server.

When we go to localhost:3000/about, we get back,

“My name is Angela and I love beer and code.”

So you can set up basically as many routes as you wish, and that means that you can start building up

your web site to have a lot of different pages.

For example, you can have a page about your hobbies, you can have a page about your CV, and you can see that

this is a lot easier than creating a new index.html,

about.html, a contact.html, that we were doing in the earlier modules when we're

relying only on HTML.

Now, just before I end this lesson, I want to show you something that I've kept to myself until now.

Now I hope by this point you've realized that it's pretty painful to constantly having to end your server

and restart your server every single time you add some new code to the

server.js.

Now if you head over to nodemon.io, this is a utility that you can install using NPM that will

monitor for changes in your source code, and it will automatically restart your server when it detects

any changes in your code.

So this will save us from insanity, and all you have to do is just go into your Hyper Terminal, and type

these commands ‘npm install -g nodemon’.

Now it doesn't matter where you install this.

It doesn't have to be inside your package.

It can be in your root or in your home directory.

Once you've installed it, it will be available across all of your projects.

So let's head over to our terminal, and we can say ‘npm install -g

nodemon’, and hit enter, and it will take a little while to install, and now when it's done we can go to

the location where our server.js resides, which happens to be my-express-server,

and then we can simply say ‘nodemon’

and then the file name of our server, which happens to be server.js.

So now, once I hit enter, Nodemon activates, and it will start monitoring for changes.

So if I go in here and I add another route, say app.get, let's say this is my hobbies page, and I have

a callback, req, res, and we res.send maybe a ul that has a li, say something like coffee,

code,

and beer. So now that I'm done with my code, we need to watch over here. When I save my file here,

so my shortcut is Command S, yours might be different depending on whether you're on Windows or Mac,

but when I save this server.js file, then Nodemon will restart automatically, and it will keep to the port

that we've specified in our server.

So that means that my server is active and refreshed to the latest version of the code at all times,

and I don't have to go through that painful process of Command C, restarting. It gets a little bit

tiring after a while.

So that is Nodemon.

It will save your sanity and it's a really really cool tool to use.

So, in this lesson, we learnt all about routes that we can set up to preempt what the user might try to

navigate to using their browser.

Now, in the next lesson, we're going to be building a calculator web site, and we're going to use what

we learnt in these lessons so far to build a full web site.

It's going to look pretty simple but it's going to work great.

And in the process we'll see how we can get our server to do a lot of the code processing and make all

of the code run on our backend rather than on our front end.

So for all of that and more, I’ll see you on the next lesson.