From the course: Building a Website with Node.js and Express.js

Serving HTML pages and static content

From the course: Building a Website with Node.js and Express.js

Start my 1-month free trial Buy for my team

Serving HTML pages and static content

“

- [Instructor] Let's teach Express to send static HTML pages to the browser. This is not yet what we understand as a dynamic website. It's more what a regular web server does. It receives the request for some URL and serves the right page for it. To accomplish that, let's open the server.js file and there want to change the existing default route to read and send the HTML file to the browser. To accomplish that, I have to add one more module to this server.js file and it's a core module called path. So I add const path = require('path'). We will see why in a second because in there, in my default route, I first remove everything what's in there and I start typing response, which the code already suggests sendFile. So this is a function on the response objects that lets us send a file to the browser and I have to now add the path to this file. And for that I use the path module and there I use the join method that helps me just create a proper paths reference. And this first argument I'm using __dirname, that's a constant provided by node.js that contains the current directory, and, as second argument, I'm now adding ./static and the index.html. Should be pretty clear what we're doing here so we are creating a paths reference that points to the index.html file in the static folder. We also have a speakers html file. Let's serve this as well. So I now copy this route and now I use the paths speakers. So under /speakers I want to serve now the speakers page. And there I just have to change index.html to speakers.html. Let's start the application now by typing node server.js and I'm heading to the browser. And in there I want to open localhost 3000. And we see that this is pretty good already, but the page misses all images and pretty much all styles. So the styling that you see here now is basically provided by bootstrap and bootstrap is loaded from an external URL. If we look into Chrome developer tools. So on the right-hand side there is three dots. In there I can select More Tools and Developer Tools. And when I open the Network tab and reload the page, we see that the page fails to load all the static files like all the speakers, images, the styles. Here it says file. So pretty much everything that is static. Let's see how we can fix that. So I'm back in Visual Studio code. There see, in the static folder that we have the CSS images and javascript files in here. But Express now has no way to know that it should serve static files from there. For that we have to add a new so-called middleware that is called static. We will learn more about middlewares later, but, for now, let's just use it. So, before my routing handlers are defined, I will now add app.use and the middleware is called express.static. So every time you see an app.use, this is how middlewares are applied in Express. And, there again, I will add path.join__dirname and, other than pointing to a particular file, I'm just now pointing to the whole static folder. This will instruct Express to look into the static folder for each request it receives and, if it finds a matching file, it will send it to the browser. Now let's restart the application again. Node server.js and let's head back to the browser and reload the page. And we see that it now looks perfect. We can also try the /speakers route and it hopefully will now serve the speakers page, and it does. We just created the basic Express web server that serves HTML and static files. While we will change the routes to render dynamic templates later, serving static assets via Express.static is something you will need in any project.

Contents