Bring a nodejs style server into the browser. This allows for universal routing (shared between client and server).

This module supports many environments including Service Workers, Web Workers, and a standard webpage. A document adapter also exists which allows for link and form interception for handling requests automatically within the browser.

Why

This api exposes the "http" module as an isomorphic server. It essentially allows you to run your nodejs server in the browser for epic progressive enhancement and an isomorphic paradise. This is a low level library used by Rill which implements an express style api on top of this.

Browser support

All modern browsers are supported including IE10 and above.

Older browsers and IE will also need to polyfill the Promise API, checkout es6-promise for a good polyfill, babel-polyfill also covers this.

Installation

npm install @rill/http

Example

// Note that the following code runs in pretty much any environment (with optional babel transpilation).

import http from '@rill/http'

const server = http.createServer((req, res)=> {
  console.log(req.method, req.url)
  res.end()
})

/**
 * Listening in the browser will intelligently intercept link clicks and form
 * submissions and feed them into the registered handler.
 */
server.listen()

Document Adapter

This adapter provides adds the following features to an existing @rill/http server:

• Intercepts links and forms and forwards them through the http server.
• Supports the html5 history api, enabling the back button to also be handled by the server.
• Adds useful meta data to each request (cookies, headers, etc).
• Handles response headers such as 'set-cookie', 'refresh' and 'location'.

In the future there may be more adapters for different environments such as mobile.

import { attach, fetch } from '@rill/http/adapter/document'

// Apply document adapter to an existing server.
attach(server)

// Adapters also provide a 'fetch' api similar to the native fetch api to request things from a server.
fetch(server, { url: '/test', method: 'POST', body: { a: 1 } })
  .then(([body, res]) => {
    // body will be a blob of data created from the response.
    // res contains response meta data (status, statusText, headers and url).
    // You can easily convert this to a native fetch response as well.
    const blob = new Blob(body, { type: res.headers['content-type'] })
    return new Response(blob, res)
  })
  .then(res => res.json())
  .then(console.log)

// The document adapter fetch api also supports the ability to parse an html form.
// The form will be parsed into the requets body (or query string on GET requests).
const myForm = document.getElementById('myForm')
fetch(server, { url: '/test', method: 'POST', form: myForm })

Contributions

• Use npm test to run tests.

Please feel free to create a PR!