Serve static files with express
Sometimes you just need to serve existing files. In this lesson we'll examine how to use functionality built into Express to do just that.
[00:00] So our picture is pretty plain, and I think we should add some images here to spice it up a little bit. Thankfully we have this directory called images, and in it we have three images for each one of our users, large, medium, and small. We're going to use Express' ability to serve static files in order to do this pretty easily. So we're just going to say app.use and then we're going to call express.static and give it the name of the directory that we want to serve static files from.
[00:33] We're just going to tell it the images directory. So we're going to go over here and update our template, just going to add some styles in here, and then instead of creating an actual unordered list, we're just going to create a bunch of divs, we're going to create a div for each user. Within each one of those divs we'll retain our link tag, but we're also going to add an image tag here.
[00:57] For the source attribute, we're just going to use the same user.username property that we're using in the link. Then we're going to add the _sm.jpg extension so that when that file name gets built up it's the username plus that. So if we go refresh the page, we see that we do in fact have images, that looks a lot nicer. You'll notice that we don't have any path information on our source attribute here. Since we have told it to serve the images directory, it's going to serve those directly without any sort of prefix.
[01:39] However, sometimes you may want to have a prefix so that you sort of know what it is, what directory you're reaching into, or maybe you want a more descriptive name. So in this case we're going to add a directory path of profilepics. Then what we can do is go over to our app.use call, and say add.use/profilepics and then give it that images directory. We're essentially going to tell Express any time you get a request for something in profilepics, go ahead and look in the images directory for that.
[02:16] If we save both of those and go refresh, we can see that everything still works. Now that we have access to these images, let's go ahead and improve our user detail page. Let's take our index template and we'll save it out as user.hbs, and repurpose that for our user detail page. We can get rid of the loop here, we're not going to be looping over users, and we'll just go with a plain user name string here, we don't need to pull it off of an object.
[02:45] We use the larger picture, and then we'll change our header to be the user name as well, and get rid of this each. If we save that, and then we'll go back over here to our app file and in our username route handler we're just going to say response.render and then we'll give that username. Then we need to make sure we update the template name, save that, and so now if we click on one of these user links, you can see we have a nice profile page, with a nice big image, and their name up in the header.