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