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.