Awesome

bun-html-live-reload

HTML live reload for Bun

Installation

bun add -d bun-html-live-reload

Getting Started

// example.ts
import { withHtmlLiveReload } from "bun-html-live-reload";

export default withHtmlLiveReload({
  fetch: () => {
    return new Response("<div>hello world</div>", {
      headers: { "Content-Type": "text/html" },
    });
  },
});

• Wrap your regular hot reloading Bun server with withHtmlLiveReload.
• 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!

Response Header

This plugin relies on response header to identify html file, so don't forget to add { headers: { "Content-Type": "text/html" }, } to your Response.

Options

wsPath

URL path used for websocket connection.

This library relies on websocket to live reload an HTML. The path wsPath will be used to upgrade HTTP connection to websocket one.

For example, the default wsPath value __bun_live_reload_websocket__, will upgrade http://localhost:3000/__bun_live_reload_websocket__ to ws://localhost:3000/__bun_live_reload_websocket__.

export default withHtmlLiveReload(
  {
    fetch: () => {
      return new Response("<div>hello world</div>", {
        headers: { "Content-Type": "text/html" },
      });
    },
  },
  {
    wsPath: "your_ws_path",
  }
);

React HMR: watchPath, buildConfig, and onChange

The watchPath is the file or folder path that should be watched to trigger the reloads. This could be used to reload html files on changing files in other folders like src for react projects.

The buildConfig is used for running the Bun.build() command when the files in the watchPath change. The Bun.build() command will always be run once before starting the server.

The onChange is a function which runs before Bun.build() when using buildConfig when the files in watchPath change. This command does not run at start.

export default withHtmlLiveReload(
  {
    ...
  },
  {
    watchPath: path.resolve(import.meta.dir, "src"),
    buildConfig: {
      entrypoints: ["./src/index.tsx"],
      outdir: "./build"
    },
    onChange: async () => {
      await $`rm -r ./dist`
    }
  }
);