Show HN: Running a simple local HTTP server in a web page (opens in new tab)

(github.com)

75 pointsetherdream4y ago17 comments

17 comments

17 comments · 6 top-level

beardyw4y ago· 4 in thread

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

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

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Wor...

etherdreamOP4y 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.

cdaringe4y 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.

beardyw4y 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

fregante4y ago· 2 in thread

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.

e12e4y 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?

tyingq4y ago

Chrome tells me "Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported." when I try it.

la_fayette4y ago· 2 in thread

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

etherdreamOP4y 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

etherdreamOP4y ago

sry, not wasmer-php, but php-in-browser

https://oraoto.github.io/pib/

e-clinton4y ago· 2 in thread

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

AkshitGarg4y 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

tata714y ago

Like....Microsoft Frontpage split view?

Tepix4y ago· 1 in thread

Where is the source code for the .webm file?

cobertos4y 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-...

stagas4y 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...

j / k navigate · click thread line to collapse

17 comments

17 comments · 6 top-level

beardyw4y ago· 4 in thread

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

stagas4y ago

[0]: https://developer.mozilla.org/en-US/docs/Web/API/Response

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Service_Wor...

etherdreamOP4y 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.

cdaringe4y 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.

beardyw4y 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

fregante4y ago· 2 in thread

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.

e12e4y 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?

tyingq4y ago

Chrome tells me "Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported." when I try it.

la_fayette4y ago· 2 in thread

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

etherdreamOP4y 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

etherdreamOP4y ago

sry, not wasmer-php, but php-in-browser

https://oraoto.github.io/pib/

e-clinton4y ago· 2 in thread

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

AkshitGarg4y 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

tata714y ago

Like....Microsoft Frontpage split view?

Tepix4y ago· 1 in thread

Where is the source code for the .webm file?

cobertos4y 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-...

stagas4y 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...

j / k navigate · click thread line to collapse