bun
bun copied to clipboard
oven-sh
Update welcome page with HTML example and up to date TLS example
What does this PR do?
Updates the src/bun.js/api/welcome-page.html.gz file which gets embedded into the Bun binary and served as a fallback whenever Bun.serve handler doesn't return Response from a dynamic route. This happens in RequestContext.zig in the renderMissingCorked method in case the client is a browser (as determined by is_web_browser_navigation).
This file is compressed and even decompressed the HTML file is minimized. It was likely created as a one-off via a process that is not public nor documented.
The sole commit creating this archive: https://github.com/oven-sh/bun/commit/631181a503a2b49e7f9a747049943045f1619bcf
File history showing it is indeed the sole commit to even touch it: https://github.com/oven-sh/bun/commits/main/src/bun.js/api/welcome-page.html.gz
I added an HTML example showing how to use routes because this is a new feature of Bun.serve which was not documented on this welcome page and can be used to resolve this issue (in case there was a missing or a misspelled route and the fetch fallback was not present).
I've also updated the HTTPS example because it used the keyFile and certFile fields which were paths and were since replaced by a compound tls field with key and cert fields which are instances of Bun.file:
https://bun.sh/docs/api/http#tls
This is the diff of the changes I made. It was obtained by extracing the original file, formatting it using Format Document in VS Code, then making my changes in a copy of that file and diffing the two when I was done, so the initial minimization doesn't add noise to the diff:
360a361
> .Graphs--active-html .Tab[data-tab=html],
806a808
> .Graphs--active-html .CodeTab--html,
2314c2316
< max-width: 65ch
---
> max-width: 70ch
2788c2790
< <div style="--tab-count:7" class="Tabs Tabs--code Tabs--left" role="tablist"><button data-tab="text" id="tab-text" aria-controls="text-tab-content" class="Tab" role="tab" aria-selected="true" tabindex="0">Text</button><button data-tab="json" id="tab-json" aria-controls="json-tab-content" class="Tab" role="tab" tabindex="-1">JSON</button><button data-tab="stream" id="tab-stream" aria-controls="stream-tab-content" class="Tab" role="tab" tabindex="-1">Stream file</button><button data-tab="redirect" id="tab-redirect" aria-controls="redirect-tab-content" class="Tab" role="tab" tabindex="-1">Redirect</button><button data-tab="websocket" id="tab-websocket" aria-controls="websocket-tab-content" class="Tab" role="tab" tabindex="-1">WebSocket</button><button data-tab="https" id="tab-https" aria-controls="https-tab-content" class="Tab" role="tab" tabindex="-1">HTTPS</button></div>
---
> <div style="--tab-count:8" class="Tabs Tabs--code Tabs--left" role="tablist"><button data-tab="text" id="tab-text" aria-controls="text-tab-content" class="Tab" role="tab" aria-selected="true" tabindex="0">Text</button><button data-tab="json" id="tab-json" aria-controls="json-tab-content" class="Tab" role="tab" tabindex="-1">JSON</button><button data-tab="html" id="tab-html" aria-controls="html-tab-content" class="Tab" role="tab" tabindex="-1">HTML</button><button data-tab="stream" id="tab-stream" aria-controls="stream-tab-content" class="Tab" role="tab" tabindex="-1">Stream file</button><button data-tab="redirect" id="tab-redirect" aria-controls="redirect-tab-content" class="Tab" role="tab" tabindex="-1">Redirect</button><button data-tab="websocket" id="tab-websocket" aria-controls="websocket-tab-content" class="Tab" role="tab" tabindex="-1">WebSocket</button><button data-tab="https" id="tab-https" aria-controls="https-tab-content" class="Tab" role="tab" tabindex="-1">HTTPS</button></div>
2805a2808,2817
> <span class="line"><span style="color: #F8F8F2"> }</span></span>
> <span class="line"><span style="color: #F8F8F2">})</span></span></code></pre>
> </div>
> <div class="CodeBlock CodeTab CodeTab--html">
> <pre class="shiki" style="background-color: #282A36"><code><span class="line"><span style="color: #FF79C6">import</span><span style="color: #F8F8F2"> {serve} </span><span style="color: #FF79C6">from</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">'</span><span style="color: #F1FA8C">bun</span><span style="color: #E9F284">'</span><span style="color: #F8F8F2">;</span></span>
> <span class="line"><span style="color: #FF79C6">import</span><span style="color: #F8F8F2"> index </span><span style="color: #FF79C6">from</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">'</span><span style="color: #F1FA8C">./index.html</span><span style="color: #E9F284">'</span><span style="color: #F8F8F2">;</span></span>
> <span class="line"></span>
> <span class="line"><span style="color: #50FA7B">serve</span><span style="color: #F8F8F2">({</span></span>
> <span class="line"><span style="color: #F8F8F2"> routes</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> {</span></span>
> <span class="line"><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">/</span><span style="color: #E9F284">"</span><span style="color: #FF79C6">:</span> index</span>
2848,2849c2860,2863
< <span class="line"><span style="color: #F8F8F2"> keyFile</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> process.env.</span><span style="color: #BD93F9">SSL_KEY_FILE</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">||</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">./key.pem</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">,</span></span>
< <span class="line"><span style="color: #F8F8F2"> certFile</span><span style="color: #FF79C6">:</span><span style="color: #F8F8F2"> process.env.</span><span style="color: #BD93F9">SSL_CERTIFICATE_FILE</span><span style="color: #F8F8F2"> </span><span style="color: #FF79C6">||</span><span style="color: #F8F8F2"> </span><span style="color: #E9F284">"</span><span style="color: #F1FA8C">./cert.pem</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">,</span></span>
---
> <span class="line"><span style="color: #F8F8F2"> tls</span><span style="color: #FF79C6">:</span> {
> <span class="line"><span style="color: #F8F8F2"> key</span><span style="color: #FF79C6">:</span> Bun.<span style="color: #50FA7B">file</span>(<span style="color: #E9F284">"</span><span style="color: #F1FA8C">./key.pem</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">),</span></span>
> <span class="line"><span style="color: #F8F8F2"> cert</span><span style="color: #FF79C6">:</span> Bun.<span style="color: #50FA7B">file</span>(<span style="color: #E9F284">"</span><span style="color: #F1FA8C">./cert.pem</span><span style="color: #E9F284">"</span><span style="color: #F8F8F2">),</span></span>
> <span class="line"><span style="color: #F8F8F2"> },</span></span>
Note: I have not re-minimized the file before compressing it again. I am not sure how it was minimized and I was worried whatever method I chose could bring unintended functional differences, so I decided to leave it along and let GZip do the work.
- [x] Documentation or TypeScript types (it's okay to leave the rest blank in this case)
- [ ] Code changes
How did you verify your code works?
I made demo.ts:
import Bun from "bun";
Bun.serve({
fetch() {
return "TROLOLO";
},
});
console.log("Server is running on http://localhost:3000");
And then I ran it using bun bd demo.ts and hit http://localhost:3000 in the browser:
