Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Express Basics!
You have completed Express Basics!
Preview
Learn what static assets are.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up