- [Instructor] In addition to using Express
to query and fetch data from APIs,
you can also use express to serve static files.
Static files, in this case,
are files that are not going to change.
So typically you might serve files
like photos, PDFs, document files,
but you can also serve more development specific files
like HTML and CSS files.
If you take a look at the exercise files for this course,
you should see a folder labeled static_files.
In this folder, there are two images:
mountains_1 and mountains_2.
We are going to serve up these photos,
which are examples of static files
using our Express project.
I'm going to show you two different ways to accomplish this.
Let's go ahead and get started in our VS Code.
The first thing that we're going to do is create
a new folder at the root of our project called public.
You can create your folder in a few ways.
If you want to use the command line to do so,
please feel free.
I'm going to use the built-in functionality
with VS Code to add the folder.
So our little folder icon with the plus sign.
If we click that and we're going to call this folder public.
Now let's take the photo mountains_1,
and we can just drag and drop it into this folder.
Excellent.
And it may have opened it for you, that's okay.
You can see what it looks like,
but you can go ahead and close it if it opened it for you.
All right, and you should have your index.js file open
if it's not already.
Make sure you go ahead and open that.
In order to serve static files, we need to use
the built-in middleware function express.static
that we will pass to app.use.
This method is built in with Express
and used to handle middleware functions.
So first let's go ahead and start right underneath our PORT.
And I'm going to call this
using the public folder at the root of the project.
All right, so as I mentioned,
we're going to use app.use, right?
So the use method,
and then the use method takes the express.static method.
The express.static function has a few parameters,
but we're only going to focus on passing the folder
where the file lives to this function.
In our case, we've created the public folder.
So we are going to pass that
as a string to the express.static function.
So we'll just simply type public in here
and make sure you save.
This folder will be served from the root directory,
and we will reference the file based on its name,
mountains_1.jpg.
Let's see this in action by heading to our browser.
At the root of our project is localhost:3000.
If we add a slash and then mountains_1.jpg,
and then we hit enter, voila,
you should see our first picture, great job.
Now, what if you want to create
a specific route for your image or files?
Let's head back to our editor
to try to set this up in a different way.
The first thing we're going to do is create
a new folder that we will call images.
As mentioned previously, please create this folder
in whatever means is easiest for you.
I'm going to use VS Code.
So I'll create my new folder and it is called images.
Then we're going to take our second image
from our static files
from our exercise files for this course.
And we're going to take mountains_2,
and I'm going to drag and drop that into my images folder.
And just like what happened before,
it's probably going to open for you,
and you can go ahead and close that out.
This time, we're going to create a new route
that will serve our images,
and we're going to call it images.
The setup will be almost identical to our previous example.
So I'm going to head and close our pane here
and make this a little bit bigger.
So this was our first static file serving that we did.
All right, and we served up the image in the public folder,
and then I'm going to just make a comment here for us.
So for this one, we're going to be
using the images folder at the route /images, okay?
So just like we did in the previous example
with the public folder,
we're going to start with app.use.
And the first argument that we'll pass in
is a string and it is going to be /images.
This /images is denoting a route
that we will serve the images from.
And then as we did in the previous example,
we're going to pass express.static.
And this time we're going to pass the string images
to indicate that we want to pull from the images folder.
All right, so go ahead and save that.
So just a quick recap, before we head over to our browser.
We used the app.use method.
The first argument is the route,
and we are going to serve our images at the /images route,
and those images are going to be pulled from the folder images.
So let's go ahead and head back to our browser,
and test our route successfully.
All right, so we can just stay on this browser.
We're just going to back this out.
Let's go ahead and just start at localhost:3000.
All right, so this is our route.
And now if we add /images,
and then this time we're going to do /images,
and then the name of the file,
which is mountains_2.jpg,
and you should see the photo.
Great job.