connect-history-api-fallback

What is connect-history-api-fallback?

The connect-history-api-fallback package is a middleware for Connect and Express-based web servers. It is designed to redirect requests for non-existent files to a specified file, often used in single-page applications (SPAs) where the routing is handled client-side by JavaScript. This allows the server to seamlessly hand off routing responsibilities to the client, ensuring that deep linking works correctly and that users can refresh pages without receiving 404 errors.

What are connect-history-api-fallback's main functionalities?

Basic Usage with Express

This code demonstrates how to integrate connect-history-api-fallback with an Express server. It redirects all requests to the 'public' directory unless the file exists, making it ideal for SPAs.

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

const app = express();
app.use(history());
app.use(express.static('public'));

app.listen(3000);

Custom Options

This example shows how to use connect-history-api-fallback with custom options, such as specifying a custom index file and enabling verbose logging for debugging purposes.

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

const app = express();
app.use(history({
  index: '/index.html',
  verbose: true
}));
app.use(express.static('public'));

app.listen(3000);

Other packages similar to connect-history-api-fallback

express-history-api-fallback

Similar to connect-history-api-fallback, this package is specifically tailored for use with Express. It provides a similar functionality of redirecting requests to a single entry point, usually for SPAs. The main difference lies in its implementation details and API, which are designed to integrate more seamlessly with Express applications.

koa-connect-history-api-fallback

This package offers functionality similar to connect-history-api-fallback but is designed for use with Koa, another popular Node.js web application framework. It allows Koa applications to handle SPA routing by redirecting requests to a specified file, facilitating client-side routing in a way that's analogous to how connect-history-api-fallback works for Connect and Express.

README

connect-history-api-fallback

Middleware to proxy requests through a specified index page, useful for Single Page Applications that utilise the HTML5 History API.

Table of Contents

• Introduction
• Usage
• Options
  • index
  • rewrites
  • verbose
  • htmlAcceptHeaders
  • disableDotRule

Introduction

Single Page Applications (SPA) typically only utilise one index file that is accessible by web browsers: usually index.html. Navigation in the application is then commonly handled using JavaScript with the help of the HTML5 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. /help or /help/online as the web server bypasses the index file to locate the file 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 the index you specify (default being /index.html) whenever there is a request which fulfills the following criteria:

1. The request is a GET or HEAD 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 a pattern provided in options.rewrites (see options below)

Usage

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

npm install --save connect-history-api-fallback

Import the library

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

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

var connect = require('connect');

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

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

var express = require('express');

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

Options

You can optionally pass options to the library when obtaining the middleware

var middleware = history({});

index

Override the index (default /index.html). This is the request path that will be used when the middleware identifies that the request path needs to be rewritten.

This is not the path to a file on disk. Instead it is the HTTP request path. Downstream connect/express middleware is responsible to turn this rewritten HTTP request path into actual responses, e.g. by reading a file from disk.

history({
  index: '/default.html'
});

rewrites

Override the index when the request url matches a regex pattern. You can either rewrite to a static string or use a function to transform the incoming request.

The following will rewrite a request that matches the /\/soccer/ pattern to /soccer.html.

history({
  rewrites: [
    { from: /\/soccer/, to: '/soccer.html'}
  ]
});

Alternatively functions can be used to have more control over the rewrite process. For instance, the following listing shows how requests to /libs/jquery/jquery.1.12.0.min.js and the like can be routed to ./bower_components/libs/jquery/jquery.1.12.0.min.js. You can also make use of this if you have an API version in the URL path.

history({
  rewrites: [
    {
      from: /^\/libs\/.*$/,
      to: function(context) {
        return '/bower_components' + context.parsedUrl.pathname;
      }
    }
  ]
});

The function will always be called with a context object that has the following properties:

• parsedUrl: Information about the URL as provided by the URL module's url.parse.
• match: An Array of matched results as provided by String.match(...).
• request: The HTTP request object.

verbose

This middleware does not log any information by default. If you wish to activate logging, then you can do so via the verbose option or by specifying a logger function.

history({
  verbose: true
});

Alternatively use your own logger

history({
  logger: console.log.bind(console)
});

htmlAcceptHeaders

Override the default Accepts: headers that are queried when matching HTML content requests (Default: ['text/html', '*/*']).

history({
  htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
})

disableDotRule

Disables the dot rule mentioned above:

[…] is not a direct file request, i.e. the requested path does not contain a . (DOT) character […]

history({
  disableDotRule: true
})

Changelog

v2.0.0

• Potentially breaking: Treat HTTP HEAD requests like HTTP GET requests. This one is potentially breaking and we therefore released a new major version to be on the safe side. Most projects should not encounter issues when upgrading to this version. Contributed by @awwit.