Introduction to Serve-Index

Serve-Index is a middleware for the Express framework in Node.js that serves as a directory listing server.
It allows you to present a well-structured and navigable list of files and directories via your Express applications.
In this guide, we will explore a range of useful APIs provided by Serve-Index with various code snippets for better understanding.

Installation

  
    npm install serve-index
  

Basic Usage

  
    const express = require('express');
    const serveIndex = require('serve-index');

    const app = express();

    // Serve directory listing for 'public' directory
    app.use('/public', serveIndex('public'));

    app.listen(3000, () => {
      console.log('Server listening on port 3000');
    });
  

Customizing the Listing

  
    const express = require('express');
    const serveIndex = require('serve-index');

    const app = express();

    // Customizing serve-index options
    app.use('/public', serveIndex('public', { 'icons': true }));

    app.listen(3000, () => {
      console.log('Server listening on port 3000');
    });
  

Custom Template

  
    const express = require('express');
    const serveIndex = require('serve-index');
    const path = require('path');
    const fs = require('fs');

    const app = express();

    // Custom template rendering function
    function customTemplate(locals, callback) {
      fs.readFile(path.join(__dirname, 'public', 'template.html'), 'utf8', (err, data) => {
        if (err) return callback(err);
        // Modify the template as needed
        callback(null, data.replace('{files}', JSON.stringify(locals.fileList)))
      });
    }

    app.use('/public', serveIndex('public', { 'template': customTemplate }));

    app.listen(3000, () => {
      console.log('Server listening on port 3000');
    });
  

Stylize Your Directory Listings

You can use CSS to style your listings. Here is an example:

  
    const express = require('express');
    const serveIndex = require('serve-index');
    const path = require('path');

    const app = express();

    app.use('/public', serveIndex('public', { 'icons': true }));
    app.use('/public', express.static(path.join(__dirname, 'public')));

    app.listen(3000, () => {
      console.log('Server listening on port 3000');
    });
  

Create a CSS file and place it in the ‘public’ directory:

  
    /* public/styles.css */
    body {
      font-family: Arial, sans-serif;
    }
    .directory {
      color: blue;
    }
  

App Example with Introduced APIs

Integrating all the introduced APIs into a single app example.

  
    const express = require('express');
    const serveIndex = require('serve-index');
    const path = require('path');

    const app = express();

    // Serve 'public' directory with custom template and icons
    app.use('/public', serveIndex('public', {
      'icons': true,
      'template': function (locals, callback) {
        require('fs').readFile(path.join(__dirname, 'public', 'template.html'), 'utf8', (err, data) => {
          if (err) return callback(err);
          callback(null, data.replace('{files}', JSON.stringify(locals.fileList)));
        });
      }
    }));

    // Serve static files
    app.use('/public', express.static(path.join(__dirname, 'public')));

    app.listen(3000, () => {
      console.log('Server listening on port 3000');
    });
  

In this example, we have combined custom templates, icons, and static file serving to create an advanced directory listing application.

Conclusion

Serve-Index is a powerful middleware for creating directory listings in your Express applications. By using its various options and customizations, you can create an efficient and user-friendly directory browsing experience. Experiment with these APIs and customize your projects for better functionality and appearance.

Hash: 04801852a21c6d775866d195dc7980b613758d4eeda96489c1e4c5bcabd8a8a2