Let’s jump right in and create our first Hono app.

One particular thing about Hono is that it supports a ton of different server runtimes, including Node.js and Bun.

I will use Bun for this project because we have to use a little bit less code, but nothing prevents you to use Node.js. Just follow this page on the official docs.

Go into the folder where you keep your dev projects, and from the terminal run:

bun create hono <app-name>

or

bunx create-hono <app-name>

You can also run bunx create-hono, it will ask you in which directory you want to install Hono.

Select the Bun template during the installation phase:

That’s it:

Now go in that folder and run bun i to install all packages.

Now run

bun run dev

Here we go:

Those lines of code in index.ts do a lot behind the scenes.

First, we import the Hono package and we instantiate an application by calling the Hono() method.

Once we have the application object, we tell it to listen for GET requests on the / path, using the get() method.

There is a method for every HTTP verb: get(), post(), put(), delete():

app.get('/', c => { ... })
app.post('/', c => { ... })
app.put('/', c => { ... })
app.delete('/', c => { ... })

Those methods accept a callback function, which is called when a request is started and we need to handle it.

you can use async functions too, in case you need to use await in a request handler:

app.get('/', async c => { ... })
app.post('/', async c => { ... })
app.put('/', async c => { ... })
app.delete('/', async c => { ... })

The callback function receives a context object, which we call c.

Through this object we have access to the request via c.req and the response through c.res.

Request is the HTTP request. It gives us all the request information, including the request parameters, the headers, the body of the request, and more.

Response is the HTTP response object that we’ll send to the client.

Both are standards and you can read more on them here:

• https://developer.mozilla.org/en-US/docs/Web/API/Request
• https://developer.mozilla.org/en-US/docs/Web/API/Response

And we have a lot of utility methods.

For example we can set the response headers using c.header() and the response status using c.status().

And we can set the body using c.body().

What we do in the app.get() callback in the example is to send the ‘Hello, World!’ string to the client, using the c.text() method.

The last line of the example, serve(app), actually starts the server.

Note that this:

app.get('/', (c) => c.text('Hello, World!'))

is a shorthand arrow function with implicit return. You can of course do more in the callback function, and then return when we want to send the request:

app.get('/', (c) => {
  return c.text('Hello, World!')
})

In this case don’t forget to return at the end, or your client will just see a 404 error instead of the response.

Lessons in this unit: