@statewalker/webrun-http-browser

This module simulates HTTP server using Service Workers. It allows to develop, test, run and debug server-side code directly in the browser. After that the same code can be deployed in Deno / Deno Deploy / Cloudflare / Node JS environments (with adapters).

Demo

• https://observablehq.com/@kotelnikov/webrun-http-service - an Observable page demonstrating how it works. You can play with the code here.
• Demo 1 - a dynamic web site with a server-side API, a HTML page and a CSS file
• Demo 2 - a virtual file server exposing your local disk content

Features

This module provides a lightweight full-stack development environment in the browser:

• Code, execute and debug the whole stack in the browser. Even without internet connection.
• Your data and code don’t leave your browser
• Instant reproducable environment without installation
• Easily embeddable in your code
• Client and server-side code in the browser based on standards:
  • Use module imports for scripts
  • Send requests with fetch
  • Handle HTTP queries with the Request/Response API

UseCases

• Create rich documentations, tutorials, demos
• Embed in your rich application - in the new generation Notion, Airtable or Figma
• Deliver self-contained prototype environments to your clients

How It Works

The core of this module is based on the following native browser technologies: ServiceWorker and MessageChannels.

A ServiceWorker is used as the "server", intercepting HTTP calls and delegating their handling to registered modules via MessageChannels. So in the same browser-based application you can register a standard HTTP endpoint and call it.

Example:

import { httpService, endpointUrl } from "...";

// Server-side code:
httpService.register(async (request) => { // request: Request
  return new Response("Hello, world!", {
    headers: {
      "Content-Type": "text/plain"
    }
  })
})

// Client-side code:

const res = await fetch(endpointUrl);
const text = await res.text();
console.log(text);

They Play Well Together...

This in-browser HTTP Server allows to implement the following functionalities:

• Serve your content from your Local Disk:
  • using File System Access API
  • using Origin Private File System API
• Add version control with Git - using IsomorphicGit
• Provide direct P2P sharing with others – via WebRTC
• Implement client/server applications using persistent SQLite on Origin Private File System - using SQLite Wasm
• Deploy your local site on Edge - via Deno Deploy
• Distribute your work in any browser via IPFS / LibP2P
• Integration with existing powerful APIs like https://trpc.io/

...and everything in the browser!