Hot Reloading Setup in Bun.js

♻️ Hot Reloading Setup in Bun.js

Hot reloading is a powerful development feature that automatically restarts your app whenever you change a file—boosting productivity and making debugging a breeze.

While Bun.js is already known for its blazing speed, pairing it with hot reloading can make your dev workflow 🔥 ultra-smooth. In this guide, we’ll walk you through how to configure hot reloading in a Bun.js project step by step.

🛠️ Why Hot Reloading with Bun.js?

Hot reloading drastically reduces the time between writing code and seeing it in action.

While Bun is already faster than Node.js, setting up a reload mechanism allows you to:

• Skip manual restarts every time you edit a file
• Quickly test small changes to logic, routes, or configurations
• Speed up the development feedback loop

📁 Project Structure

Let’s assume a simple Bun project with the following structure:

my-bun-app/
├── bun.lockb
├── index.ts
├── package.json
└── tsconfig.json

🚀 Setting Up Hot Reloading with a Bun-compatible Tool

Bun doesn't include a built-in hot reloading system (yet), but you can use a file watcher like nodemon, fswatch, or entr on Unix-like systems.

Let's go with the simplest one: entr.

🔌 Install entr (Linux/macOS)

# On macOS (with Homebrew)
brew install entr

# On Linux (Debian/Ubuntu)
sudo apt install entr

💻 Create a Watch Script

We’ll create a shell script to watch your source files and restart Bun every time a change is detected.

# watch.sh
ls *.ts | entr -r bun index.ts

Make the script executable:

chmod +x watch.sh

Now run your dev server with:

./watch.sh

This will auto-restart Bun every time you modify and save any .ts file in the project directory. 💨

🧰 Using Node-based Tools (Optional)

If you're on Windows or want more cross-platform compatibility, you can use Node-based watchers like nodemon.

Even though it’s built for Node.js, it can run Bun commands too:

npm install -g nodemon

Then create a config:

# nodemon.json
{
  "watch": ["index.ts"],
  "ext": "ts",
  "exec": "bun index.ts"
}

Run it with:

nodemon

🔄 Watching Multiple Files and Directories

You can extend entr or nodemon to watch subdirectories:

# Find all .ts files recursively and watch them
find . -name "*.ts" | entr -r bun index.ts

⚡ Pro Tip: Auto Reload with HTTP Server

If you're building a web server, combine hot reload with browser auto-refresh using packages like livereload or a proxy like vite (for front-end apps).

Bun can serve static files super fast, and with reload scripts, you’ll feel like you’re developing at light speed. 💡

📌 Final Thoughts

Hot reloading in Bun.js isn’t native yet—but with tools like entr or nodemon, you can easily simulate it. The result? A faster, smoother dev loop that lets you focus on building without the constant need to stop/start your server. ⏱️

As Bun continues to evolve, we expect native dev tools to integrate this feature even better—but for now, your dev experience can still be buttery smooth with these workarounds.

Happy coding with Bun.js! 🐰⚡