how to serve a directory with express?

Question

I would like to create a simple express server that sends a directory like the image following: Browser directory picture

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

app.use(express.static(path.join(__dirname, 'shaders')));

app.use('*', (req, res) => {
  res.sendFile((path.join(__dirname, 'shaders')));
});

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

This code displays Cannot GET / in the browser window.

Possible duplicate of https://stackoverflow.com/questions/6294186/express-js-any-way-to-display-a-file-dir-listing — hawkstrider, Dec 26 '19 at 15:58
Does this answer your question? [Express.js - any way to display a file/dir listing?](https://stackoverflow.com/questions/6294186/express-js-any-way-to-display-a-file-dir-listing) — hawkstrider, Dec 26 '19 at 15:58
There are ready-made npm modules to do just that, like [ngrok-serve-dir](https://www.npmjs.com/package/ngrok-serve-dir) — Hero Qu, Dec 26 '19 at 16:21

score 1 · Answer 1 · answered Dec 26 '19 at 15:49

1

You can use a static folder for sharing or fetch files via GET request.

app.use(express.static(path.join(__dirname, 'shaders')));

answered Dec 26 '19 at 15:49

Ankit Kumar Rajpoot

5,188
2
38
32

You can use it via route also. – Ankit Kumar Rajpoot Dec 26 '19 at 15:53

score 1 · Accepted Answer · answered Dec 26 '19 at 16:32

Using a library

There are libraries that already do this for you, for example serve-index.

Doing it yourself

This is a modified version of your code to show file content or list the files/directories in a directory. I've added some comments to explain what's happening, but feel free to ask more questions if something is not clear.

const express = require("express");
const path = require("path");
const fs = require("fs");
const app = express();

const listingPath = path.join(__dirname, "shaders");

app.get("*", (req, res) => {
    // Build the path of the file using the URL pathname of the request.
    const filePath = path.join(listingPath, req.path);

    // If the path does not exist, return a 404.
    if (!fs.existsSync(filePath)) {
        return res.status(404).end();
    }

    // Check if the existing item is a directory or a file.
    if (fs.statSync(filePath).isDirectory()) {
        const filesInDir = fs.readdirSync(filePath);
        // If the item is a directory: show all the items inside that directory.
        return res.send(filesInDir);
    } else {
        const fileContent = fs.readFileSync(filePath, 'utf8');
        // If the item is a file: show the content of that file.
        return res.send(fileContent);
    }
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log("listening on port ", PORT);
});

You can use this as a base to make a template that includes links to the files/directories, to include a link to the parent directory, to show more meta data ...

Thanks for this! For now I'll use serve-index but I like the idea of creating the page on my own in the future. Thank you :) — matthew56k, Dec 26 '19 at 17:06

score 0 · Answer 3 · answered Dec 26 '19 at 15:51

This code displays Cannot GET / in the browser window.

Sending a GET to / will fallback to your app.use * as you don't have a route defined. It's not clear what this should do as you're returning a directory instead of a file, which isn't going to work.

If you'd like to access a specific file, you need to request it directly as localhost:3000/shaders/xxx, etc. The use of express.static appears to be correct.

how to serve a directory with express?

3 Answers3

Using a library

Doing it yourself