Express の static resource request

We talked before File download In fact, after file downloading, you can handle static resources. Common static resource files include images, CSS and JS files.

Respond to static resource requests using sendFile()

const express = require('express');
const path = require('path');

const app = express();

app.get('/static/:file', (req, res) => {
  let filename = req.params.file;
  let options = {
    root: path.join(__dirname, '../resource')
  };
  if (filename.indexOf('.css') !== -1) {
    res.sendFile('index.css', options);
  }
  // . JS. JPG omitted
});

app.listen(3000, () => {
  console.log('server started ...');
});

Look ahead File download This part, otherwise I'm afraid you have to guess what's going on in the code.

There is no problem with such a request. The key is that the sendFile() function automatically sets the response header of the content type according to the file suffix, avoiding us from writing one more line of code 🤭

The problem now is that we use three if to deal with CSS, JS and image files respectively. If one day you want to add PDF type processing, you need an if at home; If I don't want to deal with image type files, I also delete an if. So it's OK, but not the best.

Using static Middleware

In this case, we will put all static files in one directory, such as the following figure. If users access static resources such as / index.css and / index.js, they can return directly. Use express.static(root, [options]) middleware.

Note the directory deconstruction. The relative path we pass to the static function.

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

// crux
app.use(express.static('../resource'));

app.listen(3000, () => {
  console.log('server started ...');
});

When we visit http://localhost:3000/index.js

Use multiple static resource directories

If we want to create two folders under resource to store CSS and JS files, like this. Just call express.static() multiple times. Express looks for static resource files according to the order in which directories are added in the code.

app.use(express.static('../resource/css'));
app.use(express.static('../resource/js'));

Create a static resource URL unified access path

If we want to add / static to all URL s accessing static resources, like this, http://localhost:3000/static/index2.js .

app.use(express.static('../resource');
app.use('/static', express.static('../resource/css'));
app.use('/static', express.static('../resource/js'));

Look at the code above. Specifying a prefix and not specifying a prefix can coexist. Look at the figure below. I didn't use the / static prefix~

Use absolute path

My JS files are written in the node/express directory, and static resources are saved in node/resource, so I can start the node process under node/express and access the static resources. But if I start the process in the node directory, I can't find this file.


How to solve this problem? On the official website, it is recommended to use absolute path for more security.

app.use('/static', express.static(path.join(__dirname, '../resource/js')));
app.use('/static', express.static(path.join(__dirname, '../resource/css')));

It's normal this time

options parameter

options is an object parameter that can set many values. I chose one that I think is more useful. Others can see it file , although not everyone introduced 🤭

index attribute

Usually when we visit a website, we usually input it directly http://localhost:3000 Jump to the home page instead of typing http://localhost:3000/index.html . So you can use index. This property can receive strings or arrays.

app.use(express.static(path.join(__dirname, '../resource'), {
  index: ['index.html']
}));