All right.
And up next, let's set up the public folder.
And as a result, we'll be able to have some assets that are publicly available.
As a side note, eventually, this is where our front end is going to be located.
So basically, we'll run, build.
In the client in our project, and then we'll transfer the complete project files to a public folder.
And that's going to be the front end of our application.
Now if you have worked with Common JS syntax, you know that actually the setup is very straightforward.
You go with app dot use express static.
So this is a special middleware that essentially makes those assets publicly available and we access
the path and we just provide where the folder is located.
Now since we're using ES6 syntax, we need to do a little bit of acrobatics.
Again, the main idea is exactly the same, but you see by default we have no access to underscore,
underscore, dirname, which essentially just points.
To the current folder because we need to keep in mind that of course there's going to be different environments.
So once we push this up to a production, the environment is going to be different and therefore we
want to use the underscore.
Underscore dirname because that will always point to the current folder and therefore we need to grab
the dirname.
We need to grab the file URL path.
We also need to grab the path.
And then we constructed Dirname first and then we just point to our folder.
So for starters, let's just go to a route and create public folder.
Again, this is very, very important.
Please don't do that in a client or source or whatever.
You want to do that in the root because again, we're back in the server and then in here.
Let's also create a folder where we're going to upload the images.
And in my case, I'm going to call this uploads.
Okay, awesome.
And now let's navigate to a server and let's do these acrobatics.
Let's set up this code.
So effectively we want to do some imports first.
Again, it doesn't really matter where you do that.
I guess I'm going to do that after Routers.
So in here, I'm just going to say public.
And then I'm looking for the Dirname.
So this is coming from the Path module.
Then we also want to grab.
The file URL to path.
File URL to path this one over here.
So this is coming from the URL and then we have the path.
So this is the entire path module.
So we just go here with path as a side note.
Of course we can combine them here as well if you want.
So we can go with import path comma and then the name.
But I'll just leave as two separate imports and I guess right above the Morgan middleware.
Let's construct first a dirname.
So underscore underscore Dirname.
Then we want to go with our dirname method.
We want to provide file URL to path and then import meta and URL.
So that's the syntax.
Again, with ES6 modules with Commonjs, we don't need to do such acrobatics and then we're just going
to go with App.use.
Then we're looking for express dot static.
So this is a special middleware which again is available by default.
With Express, we want to provide path dot resolve and in there we first want to provide the dirname.
Then forward slash where?
I'm sorry.
Then comma.
And then I want to point to a public folder.
And you know what?
I actually will move it below the Morgan middleware.
So let me set it up over here and let me just try it out.
So essentially I want to go back to my desktop.
Notice this is going to be somewhere in my public notice.
This one over here, and I'm not going to place it in uploads.
We're going to utilize it a little bit later.
For now, let me just grab this one over here.
So once I have the image in the public, since I have implemented my middleware, I can actually go
to a browser, close this one, and if I'm going to go with localhost, not 5173.
So remember, server is on 5100.
And then if I'll provide the name of the image, which in my case is Avatar two and then the extension.
So let's try it out, Avatar two, and then we're looking for Web B, check it out.
So this is one of the assets that is publicly available.
And like I said, eventually this is where our front end is going to be located.
Now, in our case, the reason why we set up the public is because we will utilize the uploads.
So when we upload the image from our application from the front end, this is where we will temporarily
store that image.