Modern web apps can often communicate with the server and have more direct access to the request that's being sent and the response that you get back. One of the technologies that works really well for managing routes is Node with the Express.js framework. Take a look at what it's all about.
- [Instructor] Modern web applications can often communicate with the server, and have more direct access to both the request that is being sent to the server as well as the response that you get back from the server. One of the technologies that works really well for managing these routes, is Node, with the Express.js framework. We're going to take a look at a pretty simple example of how that works, and how you can manage your routes with that framework. One of the things to remember about routes is that any application that can manage routing uses the URI or uniform resource identifier, sometime known as the URL for uniform resource locator to communicate and send requests to the server.
When you work with something like Node, you have direct access to the verbs and the methods that you can use to work with these requests. The server does expect you to specify a method and essentially this is going to tell the server the action that you want the server to perform. For example, you can ask the server to use a GET method, which usually just returns some data, or you can send it a delete method when you want the server to delete a record and a piece of data.
I just want to point that out. We have a package.json file. This package.json file has a script that starts the Node application. That application is supposed to be in an app folder and called app.js, which is right here. It's called app.js. Right now it doesn't have anything in it. The only other thing in that folder is a json file called data.json, that has some information about speakers in an array.
We're going to use Node.js with Express to load up this data and then handle two different routes. The first thing we're going to need to do is create a variable for the express package. We're going to need to use a require statement for Express. I'm assuming that you've already installed Node.js as well as ran the NPM and install on this particular package.json file. Notice that there is dependency of Express, right here. If you want to install Node.js, you can go to this website.
Because we've already installed Node.js and we have run NPM install, we can go ahead and require our framework using this statement right here. Then, what we're going to do is create an application that is going to use this package. We'll just say app = express, and that creates an Express application. I want to read the data in that data.json file. One of the things that's really cool about Node.js is that it gives us access to the file system.
We've got this application variable already set up for us. What we can do is, say when we issue a GET request to a specific path... So, if we use the slash, this is going to mean the route path of the application or the main path, then we can execute a function that processes the request and sends a response. You can call these anything you want, but we're going to call them req and res. That's traditional for this type of application.
What we want to do here, is say whenever we get a request for the route sort of path, then what we're going to do is send a response and in here, you can put in something super simple, like h1 and we'll put in here, welcome. That's almost all we need to actually handle a single route with Node.js, and Express.
The only other thing we need to do is actually initialize our server. I'll create a variable called server and ask that to listen. Use the app variable, and then listen on port 3000. Let's go ahead and save this. We're going to need to open up a terminal application. I'm on a Mac, so I'm going to use the terminal that comes with the Macintosh. I suggest that you use something like Git Bash or anything that runs Linux commands on a PC.
I need to switch over to my folder, right here. I'm going to do a cd ~/Desktop and then go into masteringcode. That switches me to that folder, and then, because I'm using npm, I can use the npm start command that runs the application. It's not giving you any feedback, but if we pull up a browser, we can put in localhost and do 3000, because that's the port that we specified.
You should be able to see that welcome sign. This is what we called the root route, which is usually where you go when you go to a website. Let's go ahead and hide the terminal, for right now, and modify this a little bit. If we wanted to get a little bit more complicated, we could ask for a different route. Let's go ahead and do app.get, again. We're going to say, now when somebody requests a different route, and I'll specify something called speakers here, then I'm going to do the same thing, function, request, and response, and then in here what I'll do is create a variable that I'm going to call info.
Set that to nothing, for right now. I'm going to go parse the data that we get from the json file, which is stored in our data variable. We'll say, data.speakers and we'll use a for each statement. We'll create a temporary variable, called item. We will do a modification of this info variable. Have it go ahead and display some content for us.
We will use ES6 templates, which are these different sort of tick marks right here. We can sort of create our template for this code. You can say, h2, here, and then we'll use a dollar sign and then item.name here, and then we will do a paragraph. And do item.summary, so those are two fields in our data.json file.
What we're doing is creating a variable that stores all the data from the data file and pushes all the information into that variable. Once I do this, I'll now create my send command. The response is going to be a send command. We're going to send another ES6 variable with these little tick marks. It's just a little bit more convenient. Here we'll do an h2 again.
We'll say, Artist List, and then we will output that variable, called info. Let's go ahead and save that. We're going to have to switch back over to our terminal. We'll hit Control C to cancel what our terminal is currently running. We'll issue the npm start command. When we come here, if we refresh the page, we'll get this same welcome. If we specify a different route, and the route that we specify was speakers, notice that we're going to get the template that we made with all of the data from the json file.
This is what makes Node.js with Express so powerful. You can ask it to process different requests and really have a very detailed managing of how the requests as well as the response takes place. It's easy to create things like APIs and multi-user chats. If you want to learn more about this, make sure that you check out some of these courses right here. Building a website with Node.js and Express.js gives you a way of creating things, like I mentioned chats, and APIs, with Node and Express.js.
As usual, if you have some ideas for this weekly series, and maybe you want to share with me some questions you've been asked, or have asked in interviews, connect with me in LinkedIn or just about any other social media network, like Twitter or Github at Planet of the Web.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.