Build up a basic HTTP server with Bun and Hono

Bun and Hono are two relatively new products to the JavaScript ecosystem centered around being fast and lightweight. Using them you can create blazingly fast apps, beating out the performance of node.js and express.

Starting out

There are multiple different ways to install Bun. The recommended way is to run curl -fsSL https://bun.sh/install | bash. Another option is to install via npm with npm install -g bun. See other install options including Homebrew and Docker here.

After you've installed Bun you can create a Hono app and install dependencies by running the following commands(replace my-app with whatever you want your app to be named)

bun create hono my-app
cd my-app
bun install

You can then start your app by running bun run dev which will run the dev script in your package.json file. You could also just run bun run --hot src/index.ts in your terminal to start the server.

Congrats! You now have a basic server, go to http://localhost:3000 to see Hello Hono!

Configure environment variables

While we technically have a server running, it's not all that useful to use if it's just displaying a Hello World. Next we are going to configure the port through environment variables, add some routes, and return some data.

Using a .env file to control the port

To configure the port our server will run on, we need to download dotenv. Bun makes this super easy, just run bun add dotenv. We are then going to make a .env file at the root of our project, and add the following line to it

PORT=3001

In index.ts we are going to change it to the following

import "dotenv/config"
import { Hono } from "hono"

const app = new Hono()
const port = parseInt(process.env.PORT!)

app.get("/", (c) => c.text("Hello Hono!"))

export default {
  port,
  fetch: app.fetch,
}

Now, if you restart the server, you will see the port as whatever it's been assigned to in the .env file.

While not necessary for this application as the default port 3000 will work fine, it's nice to have this is as a configured option for if you were to run a frontend locally as well

Adding routes

Right now our server has a singular route returning some text to the user. Lets add some more routes. We're just going to make some simple GET requests, but we should understand the different types of data we can return off a GET request.

Hono has a few different options of what can be returned to the user, we are just going to focus on text(), json(), and html(). The rest of the options can be found here.

In our src/ folder, we are going to add a folder called routes and in that a file called users.ts. In the users file add the following:

import { Hono } from "hono"

const users = new Hono()

users.get("/", (c) => c.text("Alice, Bob"))

users.get("/json", (c) => c.json([{ name: "Alice" }, { name: "Bob" }]))

users.get("/html", (c) => c.html(" <ul><li>Alice</li><li>Bob</li></ul> "))

export default users

Then in index.ts add import users from "./routes/users" at the top and app.route("/users", users).

Now we can try out our new routes, accessible at http://localhost:3001/users, http://localhost:3001/users/json, and http://localhost:3001/html.

Finishing up

This is a very basic server with some simple routes to show how to set up a Hono server with a Bun runtime. Be sure to check out both their documentations at https://hono.dev/top and https://bun.sh/docs to learn more about what you can do with them.