Static Files in express-CodePudding

I see on the docs that we can serve the static files Example - http://localhost:3000/images/kitten.jpg but even if they are on the local machine, can we access them using relative path, if not. Why?

I tried using the relative path but that did not work for my images, it is shown as error 404

CodePudding user response：

Hi Karan how you doing ?

You need to use express static middleware.

app.use(express.static('public'));

Public in this case is the folder where your files are located.

CodePudding user response：

First off, you need to make sure you realize that with a nodejs web server, no files from the server file system are served by default. None. This is unlike some other web servers in other environments.

So, if you want to serve any files, then you must have routes or middleware in your Express server that serves those. In the Express framework, express.static() is often used for serving a group of static files (all in one directory or in one directory hierarchy) with one line of code.

Second off, web servers themselves don't have relative paths. Because an http request stands on its own, there is nothing for it to be relative to. So, they only work in absolute paths that have a domain or IP address and a path that starts with /. So, make sure you realize that all http requests on your server will have a path that starts with /.

Third, if you attempt to use a relative path in a browser, in an HTML tag or in a call to fetch() or any other API that takes a URL, the browser will see that the URL is a relative URL and it will go grab the path from the current web page and it will insert that path onto the front of your URL and turn it into an absolute path (one that always starts with /).

So, using a relative path in your HTML or client-side Javascript will always be turned into an absolute path by the browser before the http request is made to your server.

can we access them using relative path, if not. Why?

So ... you nearly always want to use absolute paths on the client. If you don't use an absolute path, the browser will use its logic to turn it into an absolute path and that may or may not be the path you want. Better to just specify the actual absolute path you want in your code or HTML.

So, if you have a directory hierarchy on your server that looks like this:

/my-project
    server
    public
        images
            kitten.jpg

You can then use this on the server:

app.use(express.static("/my-project/public"));

And, this in your HTML:

<img src="/images/kitten.jpg">

In this case, the express.static middleware will take the /images/kitten.jpg URL path and see if it can find the corresponding file in /my-project/public which means it will be looking for /my-project/public/images/kitten.jpg. If it finds that matching file, it will automatically serve it.

Or, to only allow access to the images folder, you could do this:

You can then use this on the server:

app.use(express.static("/my-project/public/images"));

And, this in your HTML:

<img src="/kitten.jpg">

In this case, the express.static middleware will take the /kitten.jpg URL path and see if it can find the corresponding file in /my-project/public/images which means it will be looking for /my-project/public/images/kitten.jpg. If it finds that matching file, it will automatically serve it.