fake watching with bun

[noahehall]

What is the type of issue?

Documentation is missing

What is the issue?

according to the bun vs esbuild docs

It's just a bundler. Unlike esbuild, Bun's bundler does not include a built-in development server or file watcher. It's just a bundler. .... As such, all options relating to HTTP/file watching are not applicable.

However, I managed to fake file watching with the react template with

import * as path from "path";
import { rm } from "node:fs/promises";

const PROJECT_ROOT = import.meta.dir;
const BUILD_DIR = path.resolve(PROJECT_ROOT, "build");

// fake watching
import("./src/main.tsx").catch((e) => e);

export const buildApp = async () =>
  rm(BUILD_DIR, { force: true, recursive: true }).then(() =>
    Bun.build({
      entrypoints: ["./src/main.tsx"],
      target: "browser",
      outdir: BUILD_DIR,
    })
      .then((output) => output)
      .catch((e) => {
        console.info("\n\n error in build", e);
      })
  );

this file is then imported into the dev server

// @see https://bun.sh/docs/bundler#outputs
const { outputs, success, logs, ...buildData } = await buildApp();

export default { my dev server options} satisfes bun serveoptions

is there a better way to do this without adding nodemon or similar?

Where did you find it?

• see https://github.com/bun-community/create-templates/pull/20

[devmozao]

@noahehall can you share a simple repo with this fake watcher that you did too see how can I use it?

I tried the react template and to try to solve the hot module problem, I'm forcing the assets build in every request but, it doesn't serve with the updated asset: I have to force cache reload on the browser, something like ctrl + shift + r on win.

async function buildFiles() {
  return await Bun.build({
    entrypoints: ["./src/index.tsx"],
    outdir: "./build",
  });
}

and then

const server = Bun.serve({
  fetch(request) {
    buildFiles();
    ...
    }

[noahehall]

@devmozao check this file

https://github.com/noahehall/react-idealer-image/blob/develop/cosmos.bunserver.ts

the hack is straight forward when you think about it:

• bun will automatically watch any file tree that's imported into the main file
• import your entry point into your devserver file and catch any errors

while this won't hot reload your front end it will hot reload your dev server and enable you to refresh the browser

in your example code, add the following and make sure you start the server with --watch

await import(src/index.tsx).catch(e => e)

[HairyRabbit]

any update? i missing somthing about fast refresh setup

[Electroid]

Not right now, but we plan to make this better in the future.