Introduction to Hono

Hono is a web framework that provides routing, middlewares, and other utilities that help in web development. A basic web application built with Hono looks as follows -- save the following to a file called app.js.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";

const app = new Hono();

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

Deno.serve(app.fetch);

When we start the server for the first time, we see that Deno downloads a bunch of dependencies. After this, the server starts and we can make requests to it.

deno run --allow-net --watch app.js
(... dependencies being loaded)
Watcher Process started.
Listening on http://localhost:8000/

When we open up another terminal and make a request to the server, we see that the server responds with the string "Hello world!".

curl localhost:8000
Hello World!

Let's decompose the application code, studying it line by line.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";

const app = new Hono();

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

Deno.serve(app.fetch);

On the first line, we import Hono from https://deno.land/x/hono@v3.12.11/mod.ts. When Deno executes the line, it loads the library from the given address, if it has not already been retrieved. On the next line, we create an instance of Hono, which we assign to app. This is followed by creating a route for the application -- all requests to the path / should be handled by the given function. Finally, we start the server, providing the fetch property of the application as a parameter to the Deno.serve command.

Like before, the (c) => c.text("Hello World!") is a shorthand for creating a function. Hono handles requests by calling the function, providing an object called a context as a parameter. The context contains information about the request and response, and provides methods for interacting with them, as outlined in Hono documentation. In the above case, the method text of the context is used to set the body of the response to "Hello World!".

The function and the mapping could have also been written out as follows:

// ...
const handleRequest = (c) => {
  return c.text("Hello World!");
}

app.get("/", handleRequest);
// ...

In addition to the method text, the context also contains other methods for setting the body of the response. We will look into these later on in the course.

import { Hono } from "https://deno.land/x/hono@v3.12.11/mod.ts";

const app = new Hono();

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

export default app;

import app from "./app.js";

Deno.serve(app.fetch);