Http-server: Add fallback to index.html

[kirill-konshin]

Please add fallback to index.html for every "not real" file, pretty much the same way as connect-history-api-fallback does (https://github.com/bripkens/connect-history-api-fallback#introduction):

1. The request is a GET request
2. which accepts text/html,
3. is not a direct file request, i.e. the requested path does not contain a . (DOT) character and
4. does not match provided pattern

Not sure if I am not creating a duplicate, but I haven't found one... I only found a fork: https://github.com/riceboyler/http-server.

[derhuerst]

There is files without . in the name. Why do you want to show a fallback?

[kirill-konshin]

Fallback is needed when you have a single-page app and you would like to route all 404s to the app first and let it figure out whether it has a matching route or not.

It is very rare that anyone would server files without a dot, usually those paths are handled dynamically by the app, they are not real files served from FS.

[derhuerst]

Second, a comfortable way to serve single page applications. This might become a possible duplicate of spa-server, spaserve and devserve. Issues regarding this: #69 and #95, #7, #80, #254.

– https://github.com/indexzero/http-server/issues/63#issuecomment-193244575

[ashelley]

@kirill-konshin found your issue, not sure if this helps but if you read here:

https://github.com/indexzero/http-server/pull/194

you can npm-install -g spa-http-server and you will get a --push-state option

[kirill-konshin]

Create React App is using pushstate-server, btw.

[darlanmendonca]

@ashelley @indexzero I tried option --push-state with modules spa-http-server. and works.

but one thing that I dont understand, the modules spa-http-server on npm, target to repo http-server, and have a differente readme, with mention to --push-state.

I'm confuse, why this feature dont exists on original http-server

[derhuerst]

@darlanmendonca Probably it has been published from a fork. It has been published from a fork.

[kud]

For people who need it:

$ npm install spa-http-server --save-dev

"test:dev": "npm run build && http-server dist -p 8080 --push-state",

Note that spa-http-server replaces http-server bin.

[kud]

However I wonder why this option is not in this current project.

[BigBlueHat]

It's not in this project because it's not good HTTP. Serving identical representations to any request with no ability to throw errors except "fake ones" shown to the user in JavaScript cuts against the grain of the Web.

You can, however, use the 404.html file during development to serve your "entry page" and use the pushState pattern while still providing proper HTTP semantics. In production, though, it's far better to send some unique response with as much static/pre-rendered content as possible. That will get you to first paint faster--which will make users much happier--and then you can layer in the uniquely custom stuff that falls outside the scope of the resource's immediate response (i.e. the static HTML).

Anyhow, this has been presented far better many times in the past. Here's a couple good ones:
https://jakearchibald.com/2016/fun-hacks-faster-content/
https://jakearchibald.com/2017/netflix-and-react/

Hope that helps explain things.

[BigBlueHat]

Closing this as using the 404.html file for SPAs is now explained in the README. https://github.com/indexzero/http-server/commit/9571d0a84913eb2514d68a9c9600742a0791be83

[HenrikBechmann]

Can someone explain or give a reference on how to implement this? "use the 404.html file during development to serve your "entry page" " (I can copy index.html to 404.html but would rather redirect)

[atfzl]

there is a similar package with spa support: https://github.com/zeit/serve, you can run serve -s to serve files in spa mode.

[ZiggyQubert]

its great that you can use the 404.html file for spa support, it would be great if you could specify custom values for the magic files i.e.
--index myIndexFile.html
--404 my404File.html
this would give better overall flexibility and allow better spa functionality by doing --404 index.html

[rofrol]

it works with SPA:

http-server --gzip --proxy http://localhost:8080?

https://github.com/indexzero/http-server/issues/519#issuecomment-487614367