With an Express based server
it is possible to serve static files
such as images,
or any other files you would like to have
available from your backend.
Let's go ahead and make this happen.
So we're going to go inside of the projects,
so if your project is on your desktop or anywhere else,
open the folder where your project is.
And what you want to do in this particular folder,
you'll want to create a folder called Public.
And I'm going to go ahead and do that.
And I have in the Resources inside of the Exercise file
two images that we're going to use for that example.
So let's go ahead and do that,
so go into the Exercise files and click on Resources
and then there's two images.
You can just use one as an example.
I'm going to drop both of them inside of my servers.
So let's go and copy both
and then you'll want to drop them
inside of the Public folder.
So I'm going to paste them here,
and then let's go and test this.
So if I want to take a look at the sky,
let's go ahead and do that.
So /sky.jpeg
Perfect.
So if I tried to load this image right now
it's not going to work
because I haven't written the code that is needed
to be able to load this.
So right now it says,
"Cannot get /sky.jpeg"
All right,
so let's go into the code and write the right code
to make sure that we can do that.
So we don't need the CRM route anymore,
controllers either,
and let's load the index.js
in the main directory.
So what you need to do in this particular file
is just to add one line.
That's all that's needed to serve static files.
So let's go after the routes,
and what I'm going to do is just add a little note.
"serving static files"
and the types of files you can put in there
could be anything.
But don't put anything that executes code
because you may have issues with the browsers
and sponsor for it.
So you want to put static file such as,
"Images", "Movies", "PDFs",
Usually that's the right type of files
you want to put in that folder.
Otherwise,
if it's code,
make sure it is part of your code
inside of your application.
All right,
so let's start typing
app.use
and then inside of that function
we are going to pass
(express.static)
and then we want to mention
what is the folder where are our static files.
So if it was anything else,
so if you name the folder that just used
something else here,
then you want to make sure that
this is the name of the folder
you pass inside of that function.
So right now we're going to pass Public.
So it doesn't have to be "Public",
I just said "Public" because
that's a common-used name inside of
known and Express servers.
But if you want to use anything else,
if you want to have specific things like,
"Images",
or you want to have "PDFs",
in different folders
when you can create lines for each one of them,
and then pass the right folder
as the name inside of that argument.
All right,
so let's close that function and save,
and then again let's
validate that our server is running
there's no issues,
everything is fine and dandy,
and let's go back to Chrome
and then let's ask for the jpeg.
And now we get the image.
Now let's go and take a look at
what is the second one,
it's "football.jpeg".
Let's go ahead and ask for the "football",
with two l's,
and we get the football image
as part of the Public folder.
So now any files that are
in the declared static folder
will be available to any front end that needs it.