4 ms·

Show HN: Running a simple local HTTP server in a web page

75 points by etherdream 5y ago

beardyw 5y ago
I may be missing the point, but HTTP is a communication protocol. This looks like a file explorer and editor.
- etherdream 5y ago
  Not the same. Disk files can be browsed via HTTP (HTTPS), so you can preview a local static site directly, without tools such as http-server, SimpleHTTPServer, etc.
  - beardyw 5y ago
    If the files are served via HTTP I am missing it. A page which is fetched via HTTP and then accesses local files is not an HTTP server. https://en.m.wikipedia.org/wiki/Hypertext_Transfer_Protocol https://en.m.wikipedia.org/wiki/Hypertext_Transfer_Protocol
  - cdaringe 5y ago
    Service worker file loader != HTTP server. You are intercepting requests which are usually fulfilled by HTTP, but you are not implementing or interacting with HTTP. Even so, cool project.
- stagas 5y ago
  It is using HTTP, just doing it through browser APIs[0][1] so in this case the server layer is the service worker but it's still happening through HTTP means. So the client and the server are both running in the browser, the only difference is that this "virtual" server can only be accessed by the same browser session. They are very powerful APIs as you can intercept the network layer and do all sorts of hacks, like the OP's project. [0]: https://developer.mozilla.org/en-US/docs/Web/API/Response https://developer.mozilla.org/en-US/docs/Web/API/Response [1]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API https://developer.mozilla.org/en-US/docs/Web/API/Service_Wor...
e-clinton 5y ago
This is interesting. It’d be cool to drop in a wysiwyg editor. Could be a fun way to learn basic web dev
- tata71 5y ago
  Like....Microsoft Frontpage split view?
- AkshitGarg 5y ago
  You can use vscode's web editor [0] which allows you to open local folders and even run full LSPs for JavaScript, TypeScript and Python [0]: vscode.dev
fregante 5y ago
For those who don’t understand what it’s doing (like me at first): You first have to host these index.html and sw.js on a regular server (or use the URL in the readme) and then this service will serve a folder of your choice directly from your computer. This is if you ran your trusty Python server from the CLI, except you did it from the browser, with an unchangeable host:port The folder will appear to be published from the server that hosts that sw.js file.
- e12e 5y ago
  > You first have to host these index.html and sw.js on a regular server I guess no server worker from a file://-url?
  - tyingq 5y ago
    Chrome tells me "Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported." when I try it.
- deleted 5y ago
  [deleted]
Tepix 5y ago
Where is the source code for the .webm file?
- cobertos 5y ago
  You mean the .mp4 in the README? It seems like it's just a plain link inside the README.md that GitHub previews/displays. Didn't know it did that. The link is: https://user-images.githubusercontent.com/1072787/138898490-e4de9326-1715-415b-bbb6-3a377faaf618.mp4 https://user-images.githubusercontent.com/1072787/138898490-...
stagas 5y ago
Genius! I feel the File System Access API[0] has a lot of potential in bringing data ownership back to the users (instead of being held by some server) but it's very under-utilized atm. Nice work. [0]: https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API https://developer.mozilla.org/en-US/docs/Web/API/File_System...
la_fayette 5y ago
From the title, I thought it would be a web server compiled as web assembly and running in the browser...
- etherdream 5y ago
  You are right. I am planning to add PHP, similar to wasmer-php[0], but based on Service Worker. [0]: https://github.com/wasmerio/wasmer-php https://github.com/wasmerio/wasmer-php
  - etherdream 5y ago
    sry, not wasmer-php, but php-in-browser https://oraoto.github.io/pib/ https://oraoto.github.io/pib/

75 points by etherdream 5y ago

beardyw 5y ago

I may be missing the point, but HTTP is a communication protocol. This looks like a file explorer and editor.

etherdream 5y ago
Not the same. Disk files can be browsed via HTTP (HTTPS), so you can preview a local static site directly, without tools such as http-server, SimpleHTTPServer, etc.
- beardyw 5y ago
  If the files are served via HTTP I am missing it. A page which is fetched via HTTP and then accesses local files is not an HTTP server. https://en.m.wikipedia.org/wiki/Hypertext_Transfer_Protocol https://en.m.wikipedia.org/wiki/Hypertext_Transfer_Protocol
- cdaringe 5y ago
  Service worker file loader != HTTP server. You are intercepting requests which are usually fulfilled by HTTP, but you are not implementing or interacting with HTTP. Even so, cool project.
stagas 5y ago
It is using HTTP, just doing it through browser APIs[0][1] so in this case the server layer is the service worker but it's still happening through HTTP means. So the client and the server are both running in the browser, the only difference is that this "virtual" server can only be accessed by the same browser session. They are very powerful APIs as you can intercept the network layer and do all sorts of hacks, like the OP's project. [0]: https://developer.mozilla.org/en-US/docs/Web/API/Response https://developer.mozilla.org/en-US/docs/Web/API/Response [1]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API https://developer.mozilla.org/en-US/docs/Web/API/Service_Wor...

e-clinton 5y ago

This is interesting. It’d be cool to drop in a wysiwyg editor. Could be a fun way to learn basic web dev

tata71 5y ago
Like....Microsoft Frontpage split view?
AkshitGarg 5y ago
You can use vscode's web editor [0] which allows you to open local folders and even run full LSPs for JavaScript, TypeScript and Python [0]: vscode.dev

fregante 5y ago

For those who don’t understand what it’s doing (like me at first): You first have to host these index.html and sw.js on a regular server (or use the URL in the readme) and then this service will serve a folder of your choice directly from your computer. This is if you ran your trusty Python server from the CLI, except you did it from the browser, with an unchangeable host:port The folder will appear to be published from the server that hosts that sw.js file.

e12e 5y ago
> You first have to host these index.html and sw.js on a regular server I guess no server worker from a file://-url?
- tyingq 5y ago
  Chrome tells me "Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported." when I try it.
deleted 5y ago
[deleted]

Tepix 5y ago

Where is the source code for the .webm file?

cobertos 5y ago
You mean the .mp4 in the README? It seems like it's just a plain link inside the README.md that GitHub previews/displays. Didn't know it did that. The link is: https://user-images.githubusercontent.com/1072787/138898490-e4de9326-1715-415b-bbb6-3a377faaf618.mp4 https://user-images.githubusercontent.com/1072787/138898490-...

stagas 5y ago

Genius! I feel the File System Access API[0] has a lot of potential in bringing data ownership back to the users (instead of being held by some server) but it's very under-utilized atm. Nice work. [0]: https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API https://developer.mozilla.org/en-US/docs/Web/API/File_System...

la_fayette 5y ago

From the title, I thought it would be a web server compiled as web assembly and running in the browser...

etherdream 5y ago
You are right. I am planning to add PHP, similar to wasmer-php[0], but based on Service Worker. [0]: https://github.com/wasmerio/wasmer-php https://github.com/wasmerio/wasmer-php
- etherdream 5y ago
  sry, not wasmer-php, but php-in-browser https://oraoto.github.io/pib/ https://oraoto.github.io/pib/