[React template] `bun dev` issues

[present-g]

What version of Bun is running?

0.8.1

What platform is your computer?

Darwin 22.3.0 x86_64 i386

What steps can reproduce the bug?

1. Run bun create react
2. Go to the folder with the newly created project
3. Execute bun run dev
4. Open the localhost:3000 browser page
5. Change the text of src/App.tsx
6. Check for content updates in the browser

What is the expected behavior?

In development mode, file changes are expected to refresh the page automatically.

What do you see instead?

The text does NOT change automatically even after refreshing the page. Only by restarting the server.

One more problem, as of now the following code is running in dev.tsx:

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

Importantly! We cannot do build in dev mode, as real projects are large and the build will take a long time.

Additional information

Is it possible to auto-reload the page? Is it possible not to build in dev mode as in webpack-dev-server?

[present-g]

The template suggested here performs page reloads after updates

It would be cool if HMR became part of Bun. serve in development mode, not reloading the page, but replacing only the parts of the code that have changed, since in a real project, reloading the page takes too much time

[extrasalt]

This is because --watch only watches dev.tsx and all of the things it is importing. App.tsx is not in the import path.

Adding a dummy import './src/App.tsx' in your dev.tsx solves this problem.

[present-g]

@extrasalt, thank you

I tried this before but this solution only restarts the Server. We also need to update the code in the browser. This can be solved using WebSockets.

The main problem is how to update only the parts of the code that have changed without reloading the page. It looks like this cannot be solved without improving Bun.serve in dev mode.

As an example, this is webpack-dev-server

[extrasalt]

I am not sure I understand what you mean by update the code in the browser.

With this when I change a line in App.jsx or any of the child-components, the dev.jsx re-runs.. rebuilding the frontend in the process and updating what's in the ./build directory.

You only need to refresh the page in the browser.

(If you want that to happen automatically, I was using react-dev-utils/openBrowser but that kept stealing the focus away from the editor).

[present-g]

Please read about HMR it doesn’t reload a page, it replaces changed modules without reloading.

If you reload the page, the form data will be lost and requests to the API will start, which will take quite a long time.

[present-g]

Here's how HMR should work:

Example by Vite