Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Server Routing with Express" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian illustrates how to set up Express, a web application framework in Node.js, to create a simple API. Brian answers questions from students.

Get Free Access Now

Transcript from the "Server Routing with Express" Lesson

[00:00:00]
>> Brian Holt: So now we're gonna use a framework very quick to build just a really quick API. So we're gonna go and we're going to come to iterm, gonna stop this server, and just like we did before with parcels and such, and pop motion when npm install express. Express is a really simple server framework for note.

[00:00:28] The most popular definitely. If you go to expressjs.com, does also the documentation for it. Really, really good stuff.
>> Speaker 2: What is a framework?
>> Brian Holt: So when we use HTTP directly, it's really low level. Like, it doesn't provide much convenience for us, so we would have to build like a big thing to make it work.

[00:00:52] Express is someone smarter than me, went out and thought through this already. As like, here is a bunch of very useful methods on top of HTTP. So you don't have to use that, you just use Express. So its code somewhere else is written, it's probably the best answer for it.

[00:01:06] Makes sense? Okay. That's a good question.
>> Brian Holt: Okay, I'm gonna come in here to my web server really quick. And I'm just gonna copy and paste this really quick, copy in here.
>> Brian Holt: So express, I'm inquiring that from that package that I just downloaded from npm, okay. I'm gonna create a new application, that's how you do that is you run the function and you get an app, which is one server, okay.

[00:01:41] Then, I come down here, and these are called routes. So any time that someone goes and calls a get on slash, anyone, anytime someone navigates through this, send them welcome to my site. So let's actually test that out, if I go to 3000, you're gonna see, I need to run it, fair.

[00:02:06]
>> Brian Holt: Not magical. So node server.
>> Brian Holt: Do I not save this either? No, you gotta save it too, also important.
>> Brian Holt: So now it's on 3000, come back here, refresh. It says, welcome to my site, right. So that works relatively the same way.
>> Brian Holt: Okay, and then I wrote another thing called complement.

[00:02:34] So if you come over here and say /complement, it says you look nice today, it's a very nice server, okay. And so, you can just kinda like write these paths all over the place to accommodate all of this different routes. So this is how you write a web server.

[00:02:53] And a web server is nothing more than lots and lots of these routes.
>> Brian Holt: Now you can get fancier than this, you can like read from databases, you can do all sorts of crazy stuff, but we're not gonna do anything much crazier than that. So if we come back here, to our thing.

[00:03:12]
>> Brian Holt: We talked about all of that.
>> Brian Holt: So this is how you will connect it to your own page. So I'm gonna come back in here, and I'm gonna create a new index.html, save it, index.html.
>> Brian Holt: Delete that and I'm gonna put html:5 and I'm going to put a script tag that loads from complement.js.

[00:03:49] Let me create a new file here, it's gonna be called complement.j or I need to create a new directory, don't I? New folder, call it public.
>> Brian Holt: Inside of public I'm gonna put complement.js. And now this is going to be code that you've seen before, right. In course sector, it's gonna be a button.

[00:04:13] It's gonna add the vet list from the button and then it's going to fetch from complement and it's going to put that on the page. So all this is gonna do.
>> Brian Holt: And this has to come from public/complement, okay.
>> Brian Holt: And well, yeah, there we go. I'm gonna come in and put this as the HTML.

[00:04:40]
>> Brian Holt: Okay, so HTML you've seen before. It's got a p, it's got an h1. It's got a button that says request and complement, and it gets that from complements.js. I need to change that to be the same thing. Rename,
>> Brian Holt: Complements.js, okay?
>> Brian Holt: Now I'm gonna make my server accommodate requests from this.

[00:05:05] So let's copy and paste this and we'll break it apart.
>> Brian Holt: So when I go to my server js and replace this.
>> Brian Holt: So first thing is I got a bunch of complements that it could send back, okay? Building an express path is something that comes from node, and it just helps you deal with paths, right?

[00:05:28] So you don't have to go from like, directory to directory using bash. And you use like cd.., right, to go backup something like that. Path handles those kind of relative paths.
>> Brian Holt: getRandomComplement, it's going to do a Math.random to get a random index out of complement and return that.

[00:05:52] So this just returns a random complement from complements.
>> Brian Holt: app = express() creates a new server. So whenever someone asks for /, we're going to send them index.html, right? Makes sense that they get the html, when they request the homepage. Then we're gonna make a complement endpoint that someone can ask for a complement.

[00:06:14] So it's going to be complement as an API. Remember from doc.ceo, we were getting dog pictures? This is going to be sending complements, okay. This is just going to res.json, it's going to send a JSON object, right. So like we were getting JSON doc.ceo, we're going to get this, and it's gonna have one key complement and it's gonna be one RandomComplement, okay.

[00:06:37] The last thing that we're gonna do is, we say anything that's in public, serve publicly, right, that's what express.static means. So if you look inside of public, we have this clients side JavaScript, right. So any time that they wanna request /public/complements.js, they're going to get the file complement.js.

[00:06:58] If we put out CSS in there and called it complement.css, then anytime that someone requested /public/complement.css, they would get it. So you have to be careful that anything that gets put inside public is literally going to be public to the entire world. So don't put user data in there, for example, right?

[00:07:15] Make sure that any thing that's in there you are comfortable everyone seeing, okay? How do we fill that up? Pretty good? So let's go restart our server.
>> Brian Holt: Stop this, rerun it.
>> Brian Holt: Now if I come back here and if I refresh this, it's gonna give me,
>> Brian Holt: Why is this not, I have to save it.

[00:07:48] Also important, make sure you save things.
>> Brian Holt: Okay, now if I come here, I get a nice index.html, right? That's being served from my server. I haven't loaded a complement yet, but if I click request and complement. Nothing happens, what?
>> Brian Holt: QuerySelector, so my selector is wrong.
>> Brian Holt: So here I did request-complement, e, complement.

[00:08:20]
>> Brian Holt: There you go. Now every time you click it, you get a new response from the API. You can actually look here in your network, this is what's coming over the network for you. Okay, so let's clear this out. Every time I click request-complement, you can see here that it's going out to the network and getting a fresh complement.

[00:08:45]
>> Brian Holt: Pretty cool, right?
>> Brian Holt: Any questions about what we've done?
>> Brian Holt: So this is node in the nutshell, right? You are now equipped to go out and write your own server side code, right? You can store these complements inside of a database, something like Mongo or MySQL, and then you could have people add to them.

[00:09:13] You could have thousands of complements. You could have multiple kinds. You can go in and make insults as well as complements, right? The world is your oyster.
>> Brian Holt: All right, so that is node in a nutshell. So this is writing JavaScript. This is the same language that your browser's executing, but now your computer, like your server is executing the same sort of code.

[00:09:39] But the nice thing about this is that, if you don't like writing JavaScript, which I don't know who you are, but you're not my friend, just kidding. You could write this in Ruby, you could write this in Python, Java, Scheme, LISP, COBOL, Fortran, you could write them whatever you want.

[00:09:58]
>> Brian Holt: Also, they're coming out with Fortran Masters, so keep an eye on that. My dad was a Fortran programmer once upon a time, true story. Okay, so we kind of explained all that, if you want more explanation, you can find that in here. So I invite you to extend this problem, just if you want to play around, put it in its own GitHub repo.

[00:10:23] Add an insult endpoint, and then make it so you can request insults or complements.
>> Brian Holt: Make this a parcel project, that would be really cool. So you could like, maybe bring in like pop motion, you could animate in this different things. And then style the whole thing using CSS.

[00:10:39] So that's kind of ways you could extend this project and learn more about stuff.