ExpressJS - Serving static files

Static files are files that clients download as they are from the server. Create a new directory, public. Express, by default doesn't allow you to serve static files. You need to enable it using the following built-in middleware.

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

Note: Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.
Note that the root route is now set to your public dir, so all static files you load will be considering public as root. To test that this is working fine, add any image file in your new publlic dir and change its name to "testimage.jpg". In your views, create a new view and include this file like:

html
    head
    body
        h3 Testing static file serving:
        img(src="/testimage.jpg",alt="Testing Image")

You should get the output like below with your image:

Multiple static dirs

We can also set multiple static assets directories using:

var express = require('express');
var app = express();

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

app.listen(3000);

Virtual path prefix

We can also provide a path prefix for serving static files. For example if you want to provide a path prefix like '/static', you need to include following code in your index.js file:

var express = require('express');
var app = express();

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

app.listen(3000);

Now whenever you need to include a file, for example, a script file called main.js residing in your public directory, use the following script tag:

<script src="/static/main.js" />

This technique can come in handy when providing multiple directories as static files. These prefixes can help distinguish between the multiple directories.