I've been developing a React application and decided to use Bun as my JavaScript runtime for its great performance claims. However, I seem to have stumbled upon an issue regarding hot reloading of my React application.
I start my application using the mand bun --watch run dev.tsx and it runs fine initially. However, when I make changes to my App.js file (or any other file), the changes are not being reflected live in the browser. Even after saving the file, I have to manually restart the server to see the changes. I was expecting that the --watch flag would enable some sort of hot reloading, but it appears not to.
Here's what I run in my terminal:
Listening on http://localhost:3000 GET / GET /index.css GET /index.js GET /bunlogo.svg GET /favicon.ico GET /manifest.json GET /logo192.png
I was wondering if Bun has built-in support for hot module replacement (HMR) or if there's any workaround to enable live reloading in the browser when I make changes to my files.
Any help or guidance would be appreciated. Thank you.
I've been developing a React application and decided to use Bun as my JavaScript runtime for its great performance claims. However, I seem to have stumbled upon an issue regarding hot reloading of my React application.
I start my application using the mand bun --watch run dev.tsx and it runs fine initially. However, when I make changes to my App.js file (or any other file), the changes are not being reflected live in the browser. Even after saving the file, I have to manually restart the server to see the changes. I was expecting that the --watch flag would enable some sort of hot reloading, but it appears not to.
Here's what I run in my terminal:
Listening on http://localhost:3000 GET / GET /index.css GET /index.js GET /bunlogo.svg GET /favicon.ico GET /manifest.json GET /logo192.png
I was wondering if Bun has built-in support for hot module replacement (HMR) or if there's any workaround to enable live reloading in the browser when I make changes to my files.
Any help or guidance would be appreciated. Thank you.
Bun v 0.x had a bun dev mand which had functionality to hot-reload react, but it was removed in 1.0.
HMR is discussed in Issue 833.
Bun's --hot option is NOT for hot-reloading on the browser as @samnoon said in his answer, but there are a few ways we can get hot reloading in the browser anyways:
It is now possible to enable browser hot module reload in Bun via websockets.
I add the prefix "browser" because Bun already has a feature called hot module reload but is is more a "server" hot module reload as pointed to other answers.
In order to enable it you need to start a websocket server directly in the Bun.serve() call:
Bun.serve({
fetch(req, ser) {
if(ser.upgrade(req)) return;
// return a `Response` with your ponent
...
},
websocket: {
message() {},
open() {},
close() {},
drain() {},
},
})
In the server that's it, we now need to tell the browser to reload when the socket server is closed, in order for this you can add the following script inside a <script> tag:
(() => {
const socketUrl = "ws://localhost:3000";
let socket = new WebSocket(socketUrl);
console.log(socket);
socket.addEventListener("close", () => {
const interAttemptTimeoutMilliseconds = 100;
const maxDisconnectedTimeMilliseconds = 3000;
const maxAttempts = Math.round(
maxDisconnectedTimeMilliseconds / interAttemptTimeoutMilliseconds,
);
let attempts = 0;
const reloadIfCanConnect = () => {
attempts++;
if (attempts > maxAttempts) {
console.error("Could not reconnect to dev server.");
return;
}
socket = new WebSocket(socketUrl);
socket.addEventListener("error", () => {
setTimeout(reloadIfCanConnect, interAttemptTimeoutMilliseconds);
});
socket.addEventListener("open", () => {
location.reload();
});
};
reloadIfCanConnect();
});
})();
You can find an explanation of this script here.
Now run your file with bun --watch run index., please use --watch and not --hot because we need to close the web server socket at every change.
Now make an edit of your files, you should see your browser automatically reload.
You can do it with either --hot mode or --watch mode in bun.
--watch mode will hard restart Bun's process when imported files change.
--hot mode will soft reload the code (without restarting the process) when imported files change.
Preferably, you can use bun --hot to enable hot reloading when executing code with Bun. This is distinct from --watch mode in that Bun does not hard-restart the entire process. Instead, it detects code changes and updates its internal module cache with the new code.
--hot mode:bun --hot dev.tsx
Note: According to official documentation, This is not the same as hot reloading in the browser. Many frameworks provide a "hot reloading" experience, where you can edit & save your frontend code (say, a React ponent) and see the changes reflected in the browser without refreshing the page. Bun's --hot is the server-side equivalent of this experience.
Reference:
[0] https://bun.sh/docs/runtime/hot
With Bun you can use Watch mode:
--watch, which hard restarts Bun's process when imported files change.
Use:
bun --watch dev.tsx
Link to official docs: https://bun.sh/docs/runtime/hot#hot-mode