CODEWITHSUNDEEP
typescripthot-reloadbunhono
Roberto
Roberto

Reputation: 9090

Hot-reload (HMR) with 'bun dev'

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.

Upvotes: 13

Views: 12301

Answers (3)

Anas
Anas

Reputation: 1837

Bun has two kinds of auto-reload.

1 - Hot Reaload: bun --hot server.ts
in this example, bun does not hard-restart the entire process. Instead, it detects code changes and updates its internal module cache with the new code. e.g. if you changed the environment variables you still need to do the manual restart even if you have the --hot flag.

2 - Watch Reload: bun --watch index.tsx

In --watch mode, Bun keeps track of all imported files and watches them for changes. When a change is detected, Bun restarts the process, preserving the same set of CLI arguments and environment variables used in the initial run. If Bun crashes, --watch will attempt to automatically restart the process.

This means that --watch restarts the whole project and detect any changes in anywhere.

Resource: Bun hot reaload

Upvotes: 2

Omkar Pattanaik
Omkar Pattanaik

Reputation: 525

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

Upvotes: 17

Roberto
Roberto

Reputation: 9090

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

Upvotes: 6

Related Questions