history-api-fallback

Single page applications typically only have one file that is directly accessible by web browsers: The index.html. Navigation in the application is then commonly handled using JavaScript with the help of the HTML 5 history API. This results in issues when the user hits the refresh button or is directly accessing a page other than the landing page, e.g. /impress or /bripkens/history-api-fallback, as the web server is then trying to retrieve a file which is existing at this location. As your application is a SPA, the web server will fail trying to retrieve the file and return a 404 - Not Found message to the user.

This tiny middleware addresses some of the issues. Specifically, it will change the requested location to index.html whenever there is a request which fulfils the following criteria:

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

Usage

The middleware is available through NPM and can easily be added.

npm install --save history-api-fallback

Now you only need to add the middleware to your application like so

var connect = require('connect');
var historyApiFallback = require('connect-history-api-fallback');

var app = connect()
  .use(historyApiFallback)
  .listen(3000);

Of course you can also use this piece of middleware with express:

var express = require('express');
var historyApiFallback = require('connect-history-api-fallback');

var app = express();
app.use(historyApiFallback);