Bun HTML Live Reload
Getting Started
Install
bun add -d @gtramontina.com/bun-html-live-reloadUsage
Using the following as a regular Bun server as a starting point:
// index.ts
Bun.serve({
fetch: () => {
return new Response("<div>hello world!</div>", {
headers: { "Content-Type": "text/html" },
});
},
port: 8888,
});Import htmlLiveReload and wrap your server with it:
// index.ts
import { htmlLiveReload } from "@gtramontina.com/bun-html-live-reload";
Bun.serve(
htmlLiveReload({
fetch: () => {
return new Response("<div>hello world!</div>", {
headers: { "Content-Type": "text/html" },
});
},
port: 8888,
}),
);Running the server with bun --hot index.ts will now force a reload of the current page whenever Bun --hot detects a change.
It will also force a reload of the stylesheets when a change to a text/css file is detected.
For an example, take a look at the example directory and run bun run:example.
Options
watchPath
Bun HTML Live Reload will always force a reload when running it --hot.
In order to have a more fine-grained control over the files not detected by Bun's --hot mode, the watchPath option can be passed to htmlLiveReload as such:
// index.ts
import { htmlLiveReload } from "@gtramontina.com/bun-html-live-reload";
Bun.serve(
htmlLiveReload(
{ /* server options */ },
{
watchPath: path.resolve(import.meta.dir, "src"),
}
),
);buildConfig
If your setup makes use of Bun.build(), you can forward the settings to htmlLiveReload via the buildConfig option:
// index.ts
import { htmlLiveReload } from "@gtramontina.com/bun-html-live-reload";
Bun.serve(
htmlLiveReload(
{ /* server options */ },
{
buildConfig: {
entrypoints: ['./index.tsx'],
outdir: './build',
},
}
),
);