‫We're still not seeing the image here despite using a correct URL because there is something important
‫you have to understand about the backend code or the way Node Express here works and service in general
‫work.
‫By default, none of the files on the server side.
‫So in our Node Express app are accessible from outside the server.
‫And that's good because otherwise we could just enter localhost 5000 slash app JS and have a look at
‫the source code there.
‫But fortunately this does not work because every incoming request on the back end goes into our middleware
‫funnel here in the end and it goes through all the different middleware lists here, and only the logic
‫we have in the middleware is executes.
‫So you can't request any file, you can just go through the middleware and you either have a request
‫that's handled by one of the middleware or you don't.
‫For example, if we send a request to a URL which ends with slash API, slash places, we make it into
‫our places, routes, and that's how the logic there kicks off.
‫But for some random image link, we got no middleware that would handle this.
‫Now of course, however, we want to grant access to images and to do so we can add a new middleware.
‫Maybe here after parsing request bodies, we can add a new general middleware and then filter for requests
‫that start with uploads images.
‫So requests which have localhost 5000 slash uploads slash images at the beginning of their new URL.
‫Such requests will be handled by a special middleware, which is actually built into Express Express
‫static.
‫You can execute static as a method and this will return a middleware actually.
‫And this is a middleware which just returns the requested file.
‫Static serving means that you just return a file.
‫You don't execute it.
‫You just return it.
‫Now here we have to control which files and which folder we want to return.
‫Express static, then wants a path pointing at the folder from which you want to serve files without
‫any extra check.
‫Now, such a path has to be an absolute path, and we can build this with the path module which is built
‫into Node.js.
‫So we import it with this syntax here and expose it on this path constant, and then here to static.
‫We pass our build path where we join two segments uploads.
‫And images and this builds a new path pointing at the uploads images folder and any file in there if
‫you request it will be returned.
‫Otherwise, all files are locked down, but files in this folder, if requested, are returned.
‫If we save this and now we go back and we reload our app, here we see our image.
‫Therefore, because now we're statically serving it.
‫And with this the upload works and serving it works.
‫Now, of course, we have no places for a user, so let's make sure.
‫When we locked in that we can actually also add a place here and that we have an image upload here as
‫well.
‫Now this is a great practice for you because essentially the steps are the same for uploading an image
‫for a user.
‫So definitely try this on your own first.
‫In the next lectures, we'll do it together.