Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.7 hours
Getting started with express 400x277
  • Overview
  • Transcript

1.3 Handling Static Files

Express is an unopinionated framework, so it isn't going to do anything unless we tell it to. In this lesson, we'll set up the static file middleware so that we can serve static assets like CSS, images, and JavaScript.

1.3 Handling Static Files

In the previous lesson, we started looking at Express by writing a very simple application. It simply outputs a single line of HTML, and of course we know what that looks like. There's nothing to jump up and down about. However, we do know how to handle a get request for a particular URL. And we know how to write code that is going to respond to those requests. So in this lesson, we are going to work more with HTML because, while this is really nice, we would like to return an actual HTML document which there's nothing stopping us from actually doing that right here within our function. But, no, that doesn't make sense to do that. Instead, we can return static HTML files. Now, let me say this. Express is an application framework. Yes, you can serve static files. And really you want to if you're writing a web application, because you have to serve CSS, JavaScript images, and sometimes even HTML. So there are some uses for serving static assets from an Express application. But if everything is a static file, there's no sense in using Express, just use a regular HTTP server because, well, it would actually be better in that case. So static assets are great, but when it comes to using Express, we want to return dynamic data. And that is something that we will look at starting in the next lesson. In this lesson, we want to serve some static assets, because as I mentioned, we want to serve CSS, JavaScript, images, things like that. So to do that, we have to explicitly tell our application that we want to use static assets. It isn't going to do it for us. And that brings us to another brief little topic. Express is what we call an unopinionated framework. It's not going to do anything unless if we tell it to do so. Like, for example, it would not handle a request if we didn't have code to handle a request. So if I comment out this line for making a get request for the root of our application. Let's restart our application, which by the way, we will fix this so that we don't have to constantly do this. And let's go to the browser. Let's refresh, and we get an error that it cannot get that resource. Well, that's because we took the code away that was handling that. So an Express application isn't going to do anything unless if we explicitly tell it to do so. And that's really nice, because that allows us to really think about a web application and think about what we want to support. If we wanted to support static files or cookies or work with custom headers or there's a variety of different things that we have to opt in to doing in order to use them within our application. Otherwise, they're just not used, which is really nice, because that way we can write some pretty lean and very responsive applications. But let's first of all install a tool that's going to monitor our files, and anytime that there is a change, it's going to restart our application. So we're going to install something called nodemon. Now, many people call this different things. In fact, the author says you can call it whatever you want because none of them are incorrect. I call it nodemon because we are working with Node, and this is a monitor for the files, so to me it make sense. But other people will call it nodemon, some people will call it nodeemon, other people will call it nodedemon, there is a difference there there is nodedemon. So you can call it whatever you want, I'm going to call it nodemon. Now we're going to install this globally, because this is something that we would want to use for every project. Anything that's going to be using Node, we typically want something watching our files so that we don't have to constantly restart our application. So we're going to install this, and it doesn't take very long to install. And we will use a new command for running our application. Instead of using the node command, we'll use the nodemon command. And it will tell us that it is watching our files. And they goes. It says watching all of our files, starting the app, and here we go. So if we come back and uncomment this, we can see that there was a change and it restarted our application. And so, if we go to the browser and refresh the page, we get our code back. All right, so we want to add the capability for handling static assets. And to do that, we use something called middleware. Now, we're going to talk about middleware in more depth later on. But you can think of our application as a pipeline, and this pipeline is full of different processes that's going to do something with the incoming request. So our application is just sitting there. It receives a request. And it sends it down the pipeline for different things to process that request. So for example, right now we just have one thing that processes the request. We check to see if it is a get request and if it is for the root of our application. And if so, then we return some HTML. If not, then nothing happens. So that is our current pipeline. We're going to add another process to our pipeline. And so to do that, we are using a piece of middleware. So we use the use method on our app object and then we pass in our middleware. Now this middleware is called express.static. This is built into Express, but even though it's built in, we have to opt in to using it. Now and the story of this is pretty funny, because this used to be built-in to Express, then it was taken out and made a different component that we had to then require, and then it was added back in. [LAUGH] So it's kind of funny that it's back in. But anyway, we want to use this static middleware. And we have to tell it where all of our static assets are going to be. So usually, that's within a folder called Public. So let's just create a folder called Public. We could call it whatever we wanted, but most of the time you would see this as Public. And then we simply pass in the path to that folder, so you're going to say public here. So now, we are using the static middleware so that whenever our application receives a request, it's going to see that if there are any files inside of our Public folder, that could be served for that request. If it is, then it's going to simply serve that asset and then it's going to stop processing the rest of the pipeline. If there isn't a match, then it's going to go to the next step in our pipeline, which is to see if it is a get request for the root of our application, and so on and so forth. So now, let's add a file inside of our public folder and let's make this contact HTML. Let's add some actual HTML, and let's just have some text that says that this is the contact page. And then we will go to the browser. We don't have to restart our application, thankfully. We refresh our page to make sure that this is still working. And then we want to go to /contact.html. And here we see this is the contact page. If we look at the source code, we see the exact HTML that we just created. And of course we can make whatever change that we wanted to, and we're going to see that reflected both in the source and and the rendered content as well. So, what have you learned in this lesson? Several things, actually. First, you learned about the nodemon tool for monitoring your files so that you don't have to constantly stop and restart your application. You learned that Express is an unopinionated framework, and that we have to explicitly tell it what to do. If we don't, then it's not going to do anything for us. We have to opt in to everything. You also learned a little bit about middleware, what it is and what this static middleware does. It simply serves static assets. Well, in the next lesson, we are going to look at a view engine. This is something that we can use to create dynamic content, which is really what we want to do with something like Express.

Back to the top