Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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
Hi, how'd it go?
0:00
Hopefully, you were able to complete
this practice session successfully.
0:01
The goal was to load and
display the app CSS Images and
0:04
a static JavaScript file,
using the Express.Static middleware.
0:08
Now, I'll show you my solution,
which you can compare with what you wrote.
0:12
You can also reference all my code
when you download the project files.
0:15
The small recipe app generates dynamic
content, using templates, variables,
0:19
and a data.JSON file.
0:24
Static files like images and
0:26
style sheets do not need to be
processed by the application.
0:28
They just need to be
delivered to the browser.
0:32
To send static files from the server's
file system to the client,
0:34
Express uses a static server.
0:38
So first, in the file, app.js,
0:40
I passed express.static,
into app.use as an argument.
0:43
Then, passed the pass to the folder I
wanted express to use which is public.
0:50
Remember, express.static is a piece
of middleware built into express.
0:54
You use it to find, and
return a static file,
0:59
requested by your template, like an image.
1:01
With the static middleware setup,
1:03
express makes the public folder contents
available at the root of the application.
1:05
So next, in views,
layout.pug, I link the two
1:11
style sheets using the path
forward/css/framework.css,
1:16
and /css/style.css, and inside the body,
1:22
I link the script.js file
using the path /js/script.js.
1:27
Finally, in data.json,
1:33
I changed each object's image_url
property to the path of its respective
1:38
recipe image, located inside
the public Images directory.
1:42
I replaced the cinnamon rolls objects url
with the path/images/cinnamon_roll.jpg,
1:48
then the next objects
to /images/donut.jpg,
1:56
then /images/pumpkin_pie.jpg.
2:00
All right, now, I'll run the app.
2:04
Over in the browser,
we see that the style sheets load,
2:09
as well as the recipe thumbnails,
click on one, and there's the full image.
2:12
Checking the console displays
the message JavaScript file successfully
2:17
served and linked!
2:21
And when I click the Dark Mode
button in the top right corner,
2:23
the page changes to a light
on dark color scheme.
2:26
The buttons text is now Light Mode.
2:29
Click it again.
2:33
The page changes back to its default
colors and the button text to Dark Mode.
2:34
Good.
2:38
Another way you could have set up
the express.static middleware is by
2:42
routing the static server to /static,
like this.
2:47
This serves the public
folders contents at /static.
2:57
That way, all your static
assets load at this URL, for
3:01
example, static/css and static/images.
3:05
Routing the static server to a specific
location prevents any folders or
3:09
file names and
3:13
the public directory from conflicting
with the other routes and your app.
3:14
Now in layout.pug, I need to change
the style sheet pads to /static/css.
3:19
And the JavaScript file's
path to /static/js.
3:31
In data.json, I'll change
the image_url paths to /static/images.
3:37
In my terminal, I'll stop and
restart the server.
3:55
Over in the browser, the assets
still load and display as expected.
4:01
There's yet another way to set up the
static middleware to have Express serve
4:10
static files from the public folder or
4:15
any folder located at the root of your
application using nodes dirname variable.
4:17
You can read about it in
the teacher's notes with this video.
4:22
If you weren't able to complete certain
parts of this practice session,
4:25
that's totally okay.
4:28
Why not start over and try it again
without looking at my version?
4:29
You're also going to learn more
about working with Express and
4:33
static assets as you progress through
our full stack JavaScript curriculum.
4:35
Thanks everyone, and happy learning.
4:39
You need to sign up for Treehouse in order to download course files.
Sign up