https://github.com/aabccd021/bun-html-live-reload
Automatically reload html when Bun hot reloads
https://github.com/aabccd021/bun-html-live-reload
bun live-reload
Last synced: 7 days ago
JSON representation
Automatically reload html when Bun hot reloads
- Host: GitHub
- URL: https://github.com/aabccd021/bun-html-live-reload
- Owner: aabccd021
- License: mit
- Created: 2023-03-04T22:30:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-15T07:48:59.000Z (about 1 month ago)
- Last Synced: 2025-03-24T06:12:34.371Z (24 days ago)
- Topics: bun, live-reload
- Language: TypeScript
- Homepage:
- Size: 74.2 KB
- Stars: 35
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bun - bun-html-live-reload - Automatically reload html when Bun server hot reloads. (Extensions / Utilities)
README
# bun-html-live-reload
HTML live reload for Bun
## Getting Started
```sh
bun add -d bun-html-live-reload
```
```ts
// example.ts
import { withHtmlLiveReload } from "bun-html-live-reload";
Bun.serve({
fetch: withHtmlLiveReload(async (request) => {
return new Response("
hello world", {
headers: { "Content-Type": "text/html" },
});
}),
});
```
- Run the server with `bun --hot example.ts`, open browser, and try to edit the `hello world` part.
- The page should live reload as you edit!
- This plugin relies on response header to identify html response,
so don't forget to add `"Content-Type": "text/html"` header to your `Response`.
## Options
You can specify URL paths used for server-sent events and live reloader script.
```ts
Bun.serve({
fetch: withHtmlLiveReload(
async (request) => {
/* ... */
},
{
// SSE Path
// default: "/__dev__/reload"
eventPath: "/__reload",
// Live reload script path
// default: "/__dev__/reload.js"
scriptPath: "/__reload.js",
// Wether to enable auto reload.
// If false, you need to manually call `reloadClients` function to reload clients.
// default: true
autoReload: false,
},
),
});
```
## Manually reload clients
You can manually reload clients (refresh tabs) by calling `reloadClients` function,
in addition to auto reload feature.
```ts
import { withHtmlLiveReload, reloadClients } from "bun-html-live-reload";
Bun.serve({
fetch: withHtmlLiveReload(async (request) => {
/* ... */
}),
});
// reload clients every second
setInterval(() => {
reloadClients();
}, 1000);
```
# Changes from v0.1
- Messages are sent through SSE (HTTP streaming) instead of Websocket.
- Wraps only `fetch` function instead of the whole server.
- Exposes `reloadClients` function to manually reload clients.
- Uses separate javascript file instead of inline script to comply with strict CSP.
- Supports multiple clients (tabs).
- Added tests
# Migration from v0.1
## v0.1
```ts
import { withHtmlLiveReload } from "bun-html-live-reload";
import { $ } from "bun";
export default Bun.serve(
withHtmlLiveReload(
{
fetch: (request) => {
/* ... */
},
},
{
watchPath: path.resolve(import.meta.dir, "src"),
buildConfig: {
entrypoints: ["./src/index.tsx"],
outdir: "./build",
},
onChange: async () => {
await $`rm -r ./dist`;
},
},
),
);
```
## v1.0
```ts
import { withHtmlLiveReload, reloadClients } from "bun-html-live-reload";
import { FSWatcher, watch } from "fs";
import { $ } from "bun";
const buildConfig = {
entrypoints: ["./src/index.tsx"],
outdir: "./build",
};
Bun.build(buildConfig);
watch(path.resolve(import.meta.url, "src")).on("change", async () => {
await $`rm -r ./dist`;
await Bun.build(buildConfig);
reloadClients();
});
Bun.serve({
fetch: withHtmlLiveReload(async (request) => {
/* ... */
}),
});
```