GithubHelp home page GithubHelp logo

humphd / nohost Goto Github PK

View Code? Open in Web Editor NEW
267.0 14.0 33.0 5.92 MB

A web server in your web browser

License: Apache License 2.0

JavaScript 96.91% HTML 3.09%
filer fs posix browser filesystem service-worker web-server

nohost's Introduction

nohost

A web server in your web browser.

Overview

nohost uses Filer to run a node'js style, POSIX filesystem inside a Service Worker, and handle requests for static files and directories.

The most likely use case for nohost would be an app that uses Filer to run a filesystem in the window, and then use nohost to provide a way to interact with that filesystem in the browser via URLs, like one would with Apache or another web server hosting static files.

Example

NOTE: I don't currently have a full demo up (TODO), so the default filesystem is empty. My plan is to rework this into a module people can include along with Filer to allow self-hosting of static files in the browser.

Until then, here's what nohost looks like running with a fileystem manually created:

Example running

Clicking a link does what you'd expect, serving the file to the browser via the Service Worker.

Installation

To run it:

npm install
npm run build

The nohost Service Worker will be built in dist/nohost-sw.js. NOTE: you can also use npm run dev to also start a web server.

Now register nohost's Service Worker in your app at startup:

if(!('serviceWorker' in navigator)) {
  console.warn('unable to initialize nohost service worker: not supported.');
} else {
  navigator.serviceWorker
    .register('./nohost-sw.js') // see configuration options below
    .catch(err => {
      console.error(`unable to register nohost service worker: ${err.message}`);
    });
}

Configure Web Server

Various features of the nohost web server can be configured by passing options on the query string when registering the nohost-sw.js Service Worker:

  • route (String): with the route name to use when listening for filesystem path requests. Defaults to fs, such that /fs/path/to/file would respond with /path/to/file

  • disableIndexes (Boolean, present or absent): directory indexes (i.e., listings) will not be shown. By default they will be shown. If defined, users will have to know the filename they wish to get back from the server.

  • directoryIndex (String): overrides the default directory index filename, used when a directory path is given. Defautls to index.html. For example, /fs/ would return /fs/index.html by default (if present). If another name is specified here, that filename will be used instead.

For example:

// Use /www for the server route, and disable directory listings
navigator.serviceWorker
  .register('./nohost-sw.js?route=www&disableIndexes');

Browse Filesystem

After the Service Worker is installed, you can then browse into the filesystem via the specified route (defaults to /fs/*). For example, if running the demo: http://localhost:8080/fs/*, where /* is a path into the filesystem.

To get metadata about files/directories vs. contents, add ?json to the URL. For example: http://localhost:8080/fs/dir?json

To download instead of view files in the browser, add ?download or ?dl to the URL. For example: http://localhost:8080/fs/path/to/file.png?dl

nohost's People

Contributors

humphd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nohost's Issues

?install path overrides the back-button

After getting into an fs by using the ?install path, you can no longer navigate back to the main nohost page - the install path is not removed from the history, so when you navigate back onto it, it will reinstall the file system and drop you right back into it.

Inline icons as data URIs

The icons are tiny, and it would be nice to have them inlined into data URIs, so you only have to include one .js file to use nohost.

Reduce size of mime db to only include "web" types

Right now I'm using https://www.npmjs.com/package/mime-types, which uses data from https://www.npmjs.com/package/mime-db. It's great because it's complete. It's also massive.

Browsers don't really care about every MIME type: a lot get handled by the browser, and the rest are basically application/octet-stream.

Probably I can take some hints from various browsers, and just use the same subset they care about:

It might make sense to write a tool that just extracts the types I need based on a few lists of types extracted from the source above. This could happen here, or in a new repo, web-mime-types.

iframe with sandbox attribute

I think is no possible but I will ask anyway,
Is there a way for the ServiceWorker (that your library use) to intercept fetch from a sandboxed iframe?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.