Hot-reload (HMR) with 'bun dev'

8.1k views Asked by At

I'm trying the new bun platform (v0.1.6) with Hono.

The steps I've followed:

bun create hono test-api
cd test-api
bun dev

Then the server shows this message:

$ bun dev
[1.00ms] bun!! v0.1.6


  Link: http://localhost:3000

When I modify any file, the server detects it and then reload the application BUT I have no idea how to invoke my application REST API.

If I execute: curl localhost:3000 the response is a transpiled JS code:

import {
__require
} from "http://localhost:3000/bun:wrap";
import {
__HMRClient as Bun
} from "http://localhost:3000/bun:wrap";
Bun.activate(false);
import {
__HMRModule as HMR
} from "http://localhost:3000/bun:wrap";
import * as $9121e9 from "http://localhost:3000/node_modules/hono/dist/index.js";
var { Hono} = __require($9121e9);
var hmr = new HMR(2320229645, "src/index.ts"), exports = hmr.exports;
(hmr._load = function() {
  const app = new Hono;
  const port = parseInt(process.env.PORT) || 3000;
  const home = app.get("/", (c) => {
    return c.json({ message: "Hello World!" });
  });
  console.log(`Running at http://localhost:${port}`);
  var src_default = {
    port,
    fetch: home.fetch
  };
  hmr.exportAll({
    default: () => src_default
  });
})();
var $$hmr_default = hmr.exports.default;
hmr._update = function(exports) {
  $$hmr_default = exports.default;
};

export {
  $$hmr_default as default
};

//# sourceMappingURL=http://localhost:3000/.map

The original generated code in index.ts is:

import { Hono } from "hono";

const app = new Hono();

const port = parseInt(process.env.PORT) || 3000;

const home = app.get("/", (c) => {
  return c.json({ message: "Hello World!" });
});

console.log(`Running at http://localhost:${port}`);

export default {
  port,
  fetch: home.fetch,
};

I didn't find doc about bun dev in the bun README.md but when the application is created It appears a message to execute "bun dev" without anything else, so I'm probably missing something obvious.

How can I invoke the hono API Hello-Word running bun dev?

On the other hand, if I execute: bun src/index.ts the application works as expected but without hot reloading.

2

There are 2 answers

1
Omkar Pattanaik On BEST ANSWER

With version v0.2.0 bun has enabled hot reloading of code in Bun's JavaScript runtime. This is a very experimental feature available from Bun v0.2.0. Official Doc for --hot. For above code you may use:

 bun --hot src/index.ts

OR

 bun run --hot src/index.ts
0
Roberto On

For current version (from 0.2.0) see accepted answer.

In the current version (v 0.1.6) the command bun dev is only for front-end projects, not for back-end (REST APIs...). According to a bun committer answer in Bun Discord server

However, we can achieve a similar result using nodemon tool:

bun add -d nodemon

Add the file nodemon.json to your project root with the following content:

{
  "watch": ["src"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "bun ./src/index.ts"
}

Then, execute your project with this command:

bun run nodemon

nodemon output

When you change your source files, the command will restart the bun interpreter automatically