Having 'index.html' file in root directory of static assets causes weird behaviors

[shuaibw]

app.js
frontend/
    index.html
    home.html

Suppose I have the above file structure in my project, and the following code in app.js.

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

const app = express();
app.use(express.static('frontend'));
app.use(morgan('dev'));

app.listen(3000, () => {
    console.log('Server listeing at 3000');
});

Clearly, there's not a single HTTP request handling in app.js. But if you type http://localhost:3000 in your browser, it automatically loads the index.html page for you, without logging any HTTP request. It should have displayed Cannot GET /, but it doesn't.
If you rename the index.html to any other name, say login.html, then going to http://localhost:3000 displays the message Cannot GET /, which is as expected.

[dougwilson]

Hello, and sorry for the confusion. This is all working as expected and documented.

Clearly, there's not a single HTTP request handling in app.js. But if you type http://localhost:3000 in your browser, it automatically loads the index.html page for you!

That is correct, as express.static has the option of index, which defaults to true http://expressjs.com/en/4x/api.html#express.static . You can disable index behavior with index: false.

And it doesn't even log the request despite using morgan! It should have displayed Cannot GET /, but it doesn't.

Correct, as middleware are executed in the order you app.used them. Since you have express.static before your morgan logger, anything express.static handles will never get to morgan. If you want requests that are handled by static to be logged, you'll want to place your logger above the static handler.

I hope this answers your questions! Please let us know if it does not or if you have additional questions and we're happy to re-open.

[krzysdz]

It works as expected.

express.static sends the index file if no match was found. You can specify options to disable indexing:

app.use(express.static('frontend', {index: false}));

If you want to log all requests, move the logger to be the first app.use:

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

const app = express();
app.use(morgan('dev'));
app.use(express.static('frontend', {index: false}));

app.listen(3000, () => {
    console.log('Server listeing at 3000');
});

[shuaibw]

It works as expected.

express.static sends the index file if no match was found. You can specify options to disable indexing:

app.use(express.static('frontend', {index: false}));

If you want to log all request, move the logger to be the first app.use:

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

const app = express();
app.use(morgan('dev'));
app.use(express.static('frontend', {index: false}));

app.listen(3000, () => {
    console.log('Server listeing at 3000');
});

Thanks :), had no idea that it defaulted to index.html. I literally wasted around an hour to find what went wrong in my code :D