Introduction to Express - Express Static


Introduction to Express - Express Static

The course is part of this learning path

Introduction to Express - Express Static

In this course, you will learn how to handle static files using the Express Static middleware. This course covers the approach needed to serve static files in an express application, along with potential errors and issues that may be encountered by doing so.

Learning Objectives

  • Implement a views route to serve a static HTML file
  • Implement the response object’s sendFile method to send an HTML file
  • View common errors when dealing with static files and learn how to handle them
  • Implement the path.join method to create the absolute path to a file
  • Understand the process variable __dirname
  • Implement the express.static middleware to create a virtual path

Intended Audience

  • This course is intended for anyone who wants to learn about Express



Introduction to Express- Express Static. To begin this video, I'm going to go over the setup of the lab environment. Currently, I have a functional Express application. As part of this application, I have this folder called "Public". Inside of the folder is an index page to represent this application's homepage. Along with the index page is an assets folder that contains a CSS folder that has the corresponding CSS file for this web page. To serve this web page, I want to create a views route. Now, on the right half of the screen, I have a browser tab open, and it's currently displaying an error message "cannot get views", and that is because the URL in the address bar is for this route that does not exist yet. I'm going to use this route to demonstrate what needs to be done in order to have Express handle static files. I will begin by creating the route app.get/views {req, res} as the arguments. Now, when this route is visited, I need to send back a response that is this index file. In order to accomplish this, I need to use the response object sendFile method, res.sendFile.

And as an argument, I need to put the path of the file I wish to send, public/index.html. The sendFile method, as the name implies, sends back a response of the file at the given path. This route is ready to test out. I will refresh the browser and I have a new error, "path must be absolute or specified route to res.sendFile". This error is happening because when using the sendFile method, the absolute path of the file needs to be passed through as an argument. Because working in the local environment will result typically in having a different path than a deployment environment, I need to use the node JS path module to avoid potential pathing issues. Up above I will type cons path = require 'path'. Now, inside of the root, I need to modify the URL of the file inside of the sendFile method. To begin inside of the sendFile method, I'm going to wrap the current path listed in parentheses. I'm going to attach it to a path.join method. Now I'm going to add another argument inside of the path.join method, __ dirname. So, the path.join method is taking two arguments, dirname, which is a special process variable that returns the current directory as in the current directory where this server JS file is located in.

So, the value of this variable will change depending on the environment this server JS file is located at. The public/index.html path represents the relative URL from where this file is located at in respect to the server JS file. I'm combining these two values together to create the absolute path to the index file using this join method. Now, this is done and I'm going to refresh the browser, and the index page is now loaded. But behind the scenes, there's another issue. I'm going to open up the crumb developer tools, and I want to focus on this error that's right here. It states "refused to apply style". This error doesn't give an accurate picture of what is happening. I want to right click on this 'CSS URL' listed and select 'open in a new tab'. It states "an error cannot get listing the URL of the CSS file". There's a slight issue with this URL. It states that the CSS file is inside of the views folder, but there is no views folder. Express is making assumption that the views folder is the directory where the CSS file is located at because that is the root end point of the route. The CSS resides inside of the public folder.

In order to make the CSS file work, I need to use a built-in Express middleware function. Back inside of the server JS file, after the path declaration, I will type app.use and I will parse in two arguments. The first argument is the route, /views. The second argument will be express.static and I will parse in a value of public. Express.static is a middleware function that tells Express the location of the static files for the specified route by creating a virtual path from the public directory to the views Express route because the path doesn't actually exist in the file system. Now that this is done, I will refresh the browser and there is the CSS file at this location. If I go back to the other browser tab and hit 'Reload', the styles are loaded on the web page, changing the look of this web page. And this is how static files are handled with Express. And that's it. Thanks for watching at Cloud Academy.


About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.