https://github.com/aabccd021/bun-html-live-reload

Automatically reload html when Bun hot reloads
https://github.com/aabccd021/bun-html-live-reload

Last synced: about 1 month 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 (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-02T07:09:12.000Z (about 1 month ago)
• Last Synced: 2024-05-02T20:19:39.163Z (about 1 month ago)
• Language: TypeScript
• Size: 47.9 KB
• Stars: 19
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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

## Installation

```sh

bun add -d bun-html-live-reload

```

## Getting Started

```ts

// example.ts

import { withHtmlLiveReload } from "bun-html-live-reload";

export default withHtmlLiveReload({

  fetch: () => {

    return new Response("
hello world
", {

      headers: { "Content-Type": "text/html" },

    });

  },

});

```


- Wrap your regular [hot reloading Bun server](https://bun.sh/docs/runtime/hot#http-servers) 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__`.

```ts

export default withHtmlLiveReload(

  {

    fetch: () => {

      return new Response("
hello world
", {

        headers: { "Content-Type": "text/html" },

      });

    },

  },

  {

    wsPath: "your_ws_path",

  }

);

```


### React HMR: `watchPath` and `buildConfig`

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.

```ts

export default withHtmlLiveReload(

  {

    ...

  },

  {

    watchPath: path.resolve(import.meta.dir, "src"),

    buildConfig: {

      entrypoints: ["./src/index.tsx"],

      outdir: "./build"

    }

  }

);

```