-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
65 lines (51 loc) · 4.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Serve folder for web development</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="index.css">
<link rel="manifest" href="appmanifest.json">
</head>
<body>
<div id="mainwrap">
<h1 id="maintitle">Serve folder</h1>
<p>Serve a local folder of files in your browser for easy testing without having to run a server.</p>
<noscript><strong>This page requires JavaScript to work, but it looks like JavaScript is disabled. Please enable JavaScript and try again.</strong></noscript>
<button id="pickfolder" hidden>Pick folder</button>
<br>
<button id="uselastfolder" hidden>Use last folder</button>
<input type="file" webkitdirectory id="inputfolder" hidden>
<div id="hostinfo">
<h2 id="hosttitle">Files in folder '<span id="foldername"></span>' are now hosted at:</h2>
<a href="" id="hostlink" target="_blank"></a>
<p>The link only works locally as long as this page is left open.</p>
</div>
<details>
<summary>More information</summary>
<h3>What is this?</h3>
<p>This page lets you host a local folder with web development files, such as HTML, JavaScript and CSS, directly in your browser. It works using Service Workers: everything is served from your local system only, nothing is uploaded to a server, and your files are not shared with anybody else.</p>
<h3>Why is it useful?</h3>
<p>Web development files must be served via the HTTP protocol for most modern web platform features to work. Features like fetch and JavaScript Modules don't work when loaded from disk (on the <em>file:</em> protocol). In some enviroments running a HTTP server may be difficult or inconvenient, for example if you're on a system with limited permissions. Alternatively it's another quick way to quickly test some web development files.</p>
<h3>How does it work?</h3>
<p>Click the big button at the top and choose a folder. Once chosen and any permission prompt approved, a link will appear. Click the link and it will open a new tab and load index.html if a file with that name exists, otherwise it will show the contents of the folder for browsing. This is particularly useful with HTML files, which are also able to load all sub-resources like they can on a normal web server, but this does not actually involve a HTTP server (it works using Service Workers). Note the provided link will only work so long as this page remains open — as soon as you close the page the link will stop working.</p>
<p>You can also open this tab multiple times and host different folders simultaneously. Additional tabs will host at a different URL for accessing different folders. This page also works offline and is installable in supported browsers.</p>
<h3>Limitations</h3>
<p>A couple of known limitations are:</p>
<ul>
<li>The files are served from a subfolder. Serving from the origin root is not supported as it complicates loading this page and supporting multiple hosts.</li>
<li>The hosted files cannot register their own service worker. This is because the browser enforces that the SW script is loaded from the network, where it will return 404.</li>
</ul>
<p>However since the vast majority of web APIs will work, this should support most client-side web content, such as HTML5 games, static websites, and so on.</p>
<h3>Is my data kept private?</h3>
<p>Yes. Your chosen files will not leave your computer. The files will not be accessible by anyone else, the provided link only works for you, and nothing is transmitted over a network while loading it. See the <a href="privacy-policy.html">privacy policy</a> for more information.</p>
<h3>Who made this?</h3>
<p>Hi, I'm <a href="https://twitter.com/ashleygullen">@AshleyGullen</a>, founder of Scirra and lead developer on <a href="https://www.construct.net/">Construct</a>.</p>
<p><em>v1.2 — last updated August 21st 2024 — <a href="https://github.com/AshleyScirra/servefolder.dev">View code on GitHub</a></em></p>
</details>
<script src="idb-keyval.js" defer></script>
<script src="index.js" type="module"></script>
</div>
</body>
</html>