We are in the process of building a dictionary web application that we can use to help us communicate the definitions of some of our favorite terms. In the last lesson, we created a packaged.json and installed three dependencies: Express, Cors and the Bodyparser. So I’m in my lesson files under Chapter 8: Lesson 2, and in the start folder, we have the package.json.
We also have a public folder, and the public folder contains the client side files for the site that we are going to build. So, if I actually just open up Index.html using the file API, you can see that I have a Skier Dictionary HTML page, but it doesn’t look very pretty, and that is because our style sheets are not being loaded.
If I want to in Chrome, I can take a look at the developer tools by going to the Menu, selecting More Tools, and then coming down here to Developer Tools. And when I open up the Developer Tools, you will notice that there’s a red X here with a three, letting us know that we three errors.
I can also slide over to the Console in the Developer Tools, and we can see that we are not loading our css, we are not loading our jQuery, and we are also not loading a Dictionary.js file. So this index page is making a request for more files, and we aren’t loading them because we don’t have a file server.
So our first step is going to be to use Express to create a file server. So, let’s go into our terminal, and for me, I do not have a Node Modules folder because I am not working out of the same folder that I am from last lesson. So, if you don’t have your dependencies installed, you will need to install them. It’s always a good idea to run an npm install because this will check the package.json file, and it will install all of our required dependencies. Now that I have done that, I am going to go ahead and navigate over to Sublime.
And from Sublime, I want to create a new file called app.js. So I’m going to go to File and select New File, and then I’m going to go to File and Save As immediately app.js in my same start folder rignt next to my package.json. So we’re going to be creating an express app which means the very first thing that we need to do is require Express. var express = require(‘express’). I do not need to add a path to the Node Modules folder when requiring installed packages. Node.js knows to go look in the Node Modules folder to find the Express package.
Now the next thing I need to do is create an application instance, and I can use the Express function to do that. var app will be my app instance, and invoking the Express function will create a new instance of an Express application. So now that I have a new instance of an Express application, I can add middleware to this application. You can think of middleware as being customized plugins that we can use with Express to add functionality to our application. The piece of middleware that we want to use is a static file server that comes with Express.
Express.static will invoke the static file server that comes with Express, and we’re going to add it to our app pipeline as a piece of middleware. Now, this function needs to take in the name of the directory where we would like to serve static files from. That directory is ./public. So I add a path to the public directory there, and now if we are making requests for any static files that are found under that directory, they will get served. The next thing I’m going to do is tell my Express app to listen on port 3000.
So this means that the Express app will now listen for incoming requests, the local IP address on port 3000. Finally, I’ll add a console.log. “Express app running on port 3000”. And then the next thing that I’m going to do is just go ahead and also export my app module. Now, you don’t need to do this for this Express app to run, but it’s always a good idea.
If I export this application instance as a module, that means I can include this application instance in other files. Later on, we are going to be including this application in the files that we will use to test it, so it’s not a bad idea to add that now. I’m going to go ahead and save this file. And I can navigate out to my terminal to run it. We will run this application by typing node app. And now we can see that we have an Express server running on port 3000. So if I go over to my browser window, and instead of looking at this via the file API, I will it localhost port 3000, and we can see my app looks a little better.
That’s because the CSS is getting loaded. You will notice that instead of three errors, we only have one error right now. And the one error is the fact that we cannot find the dictionary API. In my Chrome developer tools, if I go to the network panel, we can see all of the resources that this page is loading. So, we’re loading successfully style.css, jQuery, and dictionary.js. The issue is when we load dictionary.js, we are making an ajax request for the dictionary API.
This app expects that we have an API serving our dictionary terms. In later lessons, that is what we’re going to build. Let’s go ahead and go to the terminal. Now, from the terminal, I do not see much information about my request. It’s always a good idea to log the details about our request. So, I’ll go ahead and stop my app, CTRL C, and I’m going to navigage back to my code, and I’m going to add a custom piece of middleware that I can use to log each request. We’re going to come up here just above my app.use where I wired up the express.static middleware, and I’m going to add a custom middleware function.
I will use the app.use function to do so. Now, what we add to the app.use function is actually a callback function that will be invoked. So whenever we have a request, the app will use our custom piece of middleware. So whenever we have our request, now the application will first use our middleware function, and then it will proceed on to the express.static middleware. So, each piece of middleware is a function that has three arguments: the request, the response, and the next function that you will invoke once you are finished.
So what we’re doing here is we are adding some functionality to our pipeline. Meaning that whenever we have a request, that request is going to trickle down through all of these app uses statements, until we find and return a response. So I am just going to use this function to log details about the request before returning the response. I’m going to go ahead and log, and using a template string with our backticks, the requested method because we have the request object req.method will tell me what the requested method is.
And then also the requested URL, req.url will tell us which URL we have requested. So now in our terminal, we can see what type of requests are being made. Now after we log these details to our terminal, we want to still serve the request. Our requests are presently being served in the next piece of middleware under express.static. So in order to tell our application to move on to the next piece of middleware in the pipeline, we need to invoke this next function.
If we do not invoke this next function, we will never send a response back, and our application will technically not work. So I want to go ahead and save this, and now go back out to the terminal and we can node app again, and this time we have our Express app running on port 3000. If I go over to Google Chrome, and I refresh localhost on port 3000, we still get the same results here but now if I go back to my terminal, we can see that we are logging all of those requests.
So making one request for the homepage is making a GET request for the homepage. The we see a GET request for css/style.css, followed by jquery, followed by dictionary, followed by the jquery map, and then finally we’re making a request for dictionary-api. Now the dictionary-api is a 404 or bad request because we have not set up a route for dictionary-api. We are going to do that in our upcoming lessons.