node http-server to respond with index.html to any request

Question

I have installed http-server globally.

I launch it from myDir on localhost port 8080. In myDir I have index.html.

If I request (from the browser) http://localhost:8080/ I get index.html, which is OK.

If I request though http://localhost:8080/anything I do not get any response from the server.

What I would like, on the contrary, is that my server always responds with index.html to any http request reaching localhost on port 8080.

Is this possible.

Thanks in advance

Answer 1

Use as specified in the documentation.

http-server --port 8080 -P http://localhost:8080?

Note the ? at the end of the proxy URL.

Answer 2

To achieve what you are asking for, I recommend you live-server instead of http-server.

live-server --port=8080 --entry-file=./index.html

live-server is also providing a hot-reload but it was not one of your request

Edit: live-server is not designed to be used in production. No gzip compression for example

Edit 2: The maintainer of http-server clearly said in this comment that never, http-server will consider the SPA use-cases

Edit 3: serve seems to be a good option too

Answer 3

Simple and straight-forward example using Express 4.x:

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

var path = __dirname + '/public';
var port = 8080;

app.use(express.static(path));
app.get('*', function(req, res) {
    res.sendFile(path + '/index.html');
});
app.listen(port);

This implementation will always respond with index.html if the requested file is not found, and it's almost as simple as using http-server, which lacks this option.

Answer 4

Yes there is, with the -P/--proxy option:

http-server -P http://localhost:8080/

Note that any error, 404 included, will redirect to your index, not just missing path.

Answer 5

Sometimes for specific cases like this one, it's easy enough to write your own server:

'use strict';
var host = '127.0.0.1', port = 3333;
var path = require('path');
var app = require('express')();
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));
app.listen(port, () => console.log(`Listening on http://${host}:${port}/`));

But keep in mind that if every path returns index.html then in the index.html you cannot reference anything like images, style sheets or client side JavaScript files. Not only with the code shown above but with any solution that sends the same response (index.html) to every request.

You may need to make some exceptions and it's not hard with Express:

'use strict';
var host = '127.0.0.1', port = 3333;
var path = require('path');
var app = require('express')();
app.get('/x.png', (req, res) => res.sendFile(path.join(__dirname, 'x.png')));
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));
app.listen(port, () => console.log(`Listening on http://${host}:${port}/`));

Just keep in mind that the exceptions have to go to the top because the first matching route will be used for a given request.

Of course you need to save this code e.g. to app.js, install Express:

npm install express

and start it with:

node app.js

It's more complicated than using a ready solution (though, as you can see, not that complicated either) but you have much more flexibility in how exactly you want it to behave. It's also easy to add logging etc.

Answer 6

I've faced this issue while trying to a svelte app build for production. Instead of using http-server I'm using sirv:

first install it npm i --save-dev sirv-cli

then add this script on package.json: "start": "sirv public --single",

Happy coding!

Answer 7

If you create "Vite" project, it can handle this. vite preview command serves dist folder with single file (index.html) mode.

Answer 8

A bit after the war, but anyway. for angular app, I suggest to add to your package.json:

"serve-prod": "cp dist/app-name/index.html dist/app-name/404.html && http-server dist/app-name"

Then call

npm run serve-prod