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
Learn what static assets are.
[SOUND].
0:00
At this point, our application generates
dynamic content using templates,
0:04
variables and cookies.
0:08
But sometimes a server doesn't
need to do anything more
0:10
complex than sending the files
directly to the user.
0:13
Static files like images and
0:16
style sheets don't need to be
processed by the application.
0:18
They just need to be
delivered to the browser.
0:22
Let me show you how that
works by setting up our
0:25
app to deliver a custom style sheet.
0:28
In case you're still
confused about dynamic and
0:30
static content,
let me quickly explain the difference.
0:32
When a browser makes a get request to
the index route of our application,
0:38
it receives HTML.
0:43
But as we've seen,
0:45
there's no file called index.html in
any of the folders in our application.
0:46
When the app receives the request
it has to assemble and
0:52
render the HTML from templates and data.
0:56
This allows the application to serve
customized web pages to different clients.
0:59
As you know, browsers use HTML, CSS,
and JavaScript to display a web page.
1:05
The CSS and client-side JavaScript
files will always be the same,
1:12
no matter who requests them, or
what the application state is.
1:17
In fact, they're literally our complete
files sitting on the web server in one or
1:23
more directories.
1:28
Express doesn't need to build them,
like it does the HTML in our application.
1:30
For this reason,
these files are called static assets.
1:36
We've been writing our Express
application in JavaScript.
1:40
This is different from the client-side
JavaScript our web page might use.
1:44
Our Express app and our browser app
are two different environments and
1:49
play different roles in
what the end-user sees.
1:53
In fact, the static JavaScript files don't
even look like JavaScript to Express.
1:57
They might as well be long strings of
nonsense as far as Express is concerned.
2:02
These files are just handed straight
over to the browser without
2:07
even being attempted to be
interpreted by Express.
2:10
The browser knows what to
do with these files and
2:15
turns them into all kinds of
magical user interactions.
2:18
To send images plain CCS and
2:22
JavaScript files from the server's
file system to the client.
2:25
Express uses something
called a Static Server.
2:28
Because these files are prebuilt and won't
change on the server, passing them through
2:32
all of Express's routing and template
rendering would be a waste of time.
2:37
The Static Server just sends
them straight to the client
2:42
saving Express time and effort.
2:45
In the next video, we'll see how to
set up Express's static sever and
2:48
send static assets to the users browser.
2:53
You need to sign up for Treehouse in order to download course files.
Sign up