Simple Node.js tutorial series – 5.3 Static Resource Server

In the creation of HTTP server to implement a simple static resource server, you can write code transformation, add folder preview function, exposed some configuration, into a customizable static resource server module

modular

This is the ideal way to use a customizable static resource server

const StaticServer = require('YOUR_STATIC_SERVER_FILE_PATH');

const staticServer = new StaticServer({
	port: 9527.root: '/public'}); staticServer.start(); staticServer.close();Copy the code

This way of using the code requires modularity, and Node.js is very simple to implement as a module

const http = require('http');
const fs = require('fs');
const path = require('path');
const mime = require('mime-types');

const defaultConf = require('./config');

class StaticServer {
  constructor(options = {}) {
    this.config = Object.assign(defaultConf, options);
  }

  start() {
    const { port, root } = this.config;

    this.server = http.createServer((req, res) = > {
      const { url, method } = req;

      if(method ! = ='GET') {
        res.writeHead(404, {
          'content-type': 'text/html'}); res.end('Please use the GET method to access the file! ');
        return false;
      }

      const filePath = path.join(root, url);
      fs.access(filePath, fs.constants.R_OK, err= > {
        if (err) {
          res.writeHead(404, {
            'content-type': 'text/html'}); res.end('File does not exist! ');

        } else {
          res.writeHead(200, {
            'content-type': mime.contentType(path.extname(url)), }); fs.createReadStream(filePath).pipe(res); }}); }).listen(port,() = > {
      console.log(`Static server started at port ${port}`);
    });
  }

  stop() {
    this.server.close(() = > {
      console.log(`Static server closed.`); }); }}module.exports = StaticServer;
Copy the code

Complete code:Github.com/Samaritan89…

performnpm run testYou can test

Support folder preview

An error is reported when accessing a folder

Error: EISDIR: illegal operation on a directory, read
Emitted 'error' event on ReadStream instance at:
    at internal/fs/streams.js:217:14
    at FSReqCallback.wrapper [as oncomplete] (fs.js:524:5) {
  errno: -21,
  code: 'EISDIR',
  syscall: 'read'
}
Copy the code

Because fs.createreadstream attempts to read folders, it needs to be compatible with returning a directory page if the access path is a folder, that is, after fs.access to determine the file type

fs.access(filePath, fs.constants.R_OK, err= > {
  if (err) {
    res.writeHead(404, {
      'content-type': 'text/html'}); res.end('File does not exist! ');

  } else {
    const stats = fs.statSync(filePath);
    const list = [];
    if (stats.isDirectory()) {
      // If it is a folder, the folder will be traversed to generate a file tree within the folder
      // Iterate over the contents of the file to generate HTML

    } else {
      res.writeHead(200, {
        'content-type': mime.contentType(path.extname(url)), }); fs.createReadStream(filePath).pipe(res); }}});Copy the code

In order to generate HTML easily, the Demo uses the Handlebar template engine, the main logic

if (stats.isDirectory()) {
  // If it is a folder, the folder will be traversed to generate a file tree within the folder
  const dir = fs.opendirSync(filePath);
  let dirent = dir.readSync();
  while (dirent) {
    list.push({
      name: dirent.name,
      path: path.join(url, dirent.name),
      type: dirent.isDirectory() ? 'folder' : 'file'}); dirent = dir.readSync(); } dir.close(); res.writeHead(200, {
    'content-type': 'text/html'});// Rearrange files in alphabetical order, case insensitive, with folders in front of files
  list.sort((x, y) = > {
    if (x.type > y.type) {
      // 'Folder' > 'file', return -1, folder comes before file
      return -1;
    } else if (x.type == y.type) {
      return compare(x.name.toLowerCase(), y.name.toLowerCase());
    } else {
      return 1; }});// Use the Handlebars template engine to generate the directory page HTML
  const html = template({ list });
  res.end(html);
}
Copy the code

You can see the changes clearly through git code modification records:Github.com/Samaritan89…



Also executed in the project root directorynpm run test, accessed using a browser127.0.0.1:9527You can see a display of directory files



Complete code:Github.com/Samaritan89…