Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

One Solution

4:41 with Guil Hernandez and Lee Vaughn

This video covers one solution to the serving static files challenge.

Serve static files with __dirname

Another common way to set up the static middleware so that Express can serve static files from the 'public' folder (or any folder) located at the root of your application is with Node's __dirname variable.

__dirname represents the directory name of the current module. 

// Serve static files from the root of the application
app.use( express.static(path.join(__dirname, 'public')) )
The path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the Express app from another directory, it’s safer to use the absolute path of the directory that you want to serve (source). 
//  Serve static files by routing the static server to '/static'
app.use( '/static', express.static(path.join(__dirname, 'public')) )

Resources

  • 0:00

    Hi, how'd it go?

  • 0:01

    Hopefully, you were able to complete this practice session successfully.

  • 0:04

    The goal was to load and display the app CSS Images and

  • 0:08

    a static JavaScript file, using the Express.Static middleware.

  • 0:12

    Now, I'll show you my solution, which you can compare with what you wrote.

  • 0:15

    You can also reference all my code when you download the project files.

  • 0:19

    The small recipe app generates dynamic content, using templates, variables,

  • 0:24

    and a data.JSON file.

  • 0:26

    Static files like images and

  • 0:28

    style sheets do not need to be processed by the application.

  • 0:32

    They just need to be delivered to the browser.

  • 0:34

    To send static files from the server's file system to the client,

  • 0:38

    Express uses a static server.

  • 0:40

    So first, in the file, app.js,

  • 0:43

    I passed express.static, into app.use as an argument.

  • 0:50

    Then, passed the pass to the folder I wanted express to use which is public.

  • 0:54

    Remember, express.static is a piece of middleware built into express.

  • 0:59

    You use it to find, and return a static file,

  • 1:01

    requested by your template, like an image.

  • 1:03

    With the static middleware setup,

  • 1:05

    express makes the public folder contents available at the root of the application.

  • 1:11

    So next, in views, layout.pug, I link the two

  • 1:16

    style sheets using the path forward/css/framework.css,

  • 1:22

    and /css/style.css, and inside the body,

  • 1:27

    I link the script.js file using the path /js/script.js.

  • 1:33

    Finally, in data.json,

  • 1:38

    I changed each object's image_url property to the path of its respective

  • 1:42

    recipe image, located inside the public Images directory.

  • 1:48

    I replaced the cinnamon rolls objects url with the path/images/cinnamon_roll.jpg,

  • 1:56

    then the next objects to /images/donut.jpg,

  • 2:00

    then /images/pumpkin_pie.jpg.

  • 2:04

    All right, now, I'll run the app.

  • 2:09

    Over in the browser, we see that the style sheets load,

  • 2:12

    as well as the recipe thumbnails, click on one, and there's the full image.

  • 2:17

    Checking the console displays the message JavaScript file successfully

  • 2:21

    served and linked!

  • 2:23

    And when I click the Dark Mode button in the top right corner,

  • 2:26

    the page changes to a light on dark color scheme.

  • 2:29

    The buttons text is now Light Mode.

  • 2:33

    Click it again.

  • 2:34

    The page changes back to its default colors and the button text to Dark Mode.

  • 2:38

    Good.

  • 2:42

    Another way you could have set up the express.static middleware is by

  • 2:47

    routing the static server to /static, like this.

  • 2:57

    This serves the public folders contents at /static.

  • 3:01

    That way, all your static assets load at this URL, for

  • 3:05

    example, static/css and static/images.

  • 3:09

    Routing the static server to a specific location prevents any folders or

  • 3:13

    file names and

  • 3:14

    the public directory from conflicting with the other routes and your app.

  • 3:19

    Now in layout.pug, I need to change the style sheet pads to /static/css.

  • 3:31

    And the JavaScript file's path to /static/js.

  • 3:37

    In data.json, I'll change the image_url paths to /static/images.

  • 3:55

    In my terminal, I'll stop and restart the server.

  • 4:01

    Over in the browser, the assets still load and display as expected.

  • 4:10

    There's yet another way to set up the static middleware to have Express serve

  • 4:15

    static files from the public folder or

  • 4:17

    any folder located at the root of your application using nodes dirname variable.

  • 4:22

    You can read about it in the teacher's notes with this video.

  • 4:25

    If you weren't able to complete certain parts of this practice session,

  • 4:28

    that's totally okay.

  • 4:29

    Why not start over and try it again without looking at my version?

  • 4:33

    You're also going to learn more about working with Express and

  • 4:35

    static assets as you progress through our full stack JavaScript curriculum.

  • 4:39

    Thanks everyone, and happy learning.

You need to sign up for Treehouse in order to download course files.

Sign up