Hono Tutorial Pt. 1

This is the first article in the series where we are going to build a simple back-end application in Hono in Node.js environment.

mkdir hono-app

Go inside the created hone-app folder.

cd hono-app

Create a package.json file using npm with default values (-y).

npm init -y

Let's install hono package.

npm i -E hono

In order to use Hono in the Node.js environment, we need to install @hono/node-server package.

npm i -E @hono/node-server

Finally, let's install nodemon to ease the development. We should install nodemon as development dependency.

npm i -E -D nodemon

For now, we are done with setup. Let's move on to the coding side. Create a new file with name app.js.

touch app.js

Open this app.js file (or hono-app folder) in your favorite text-editor/IDE and write the following code.

import { Hono } from "hono";

const app = new Hono();

We are using the latest import...from syntax in our Node.js application! We have imported the Hono and then created an instance of the Hono() using a new keyword and saved it as an app.

Let's now define a root route and return a simple Hello! text as a response (don't forget to return the response).

import { Hono } from "hono";

const app = new Hono();

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

Here, c is a context and it contains both request and response in it with many useful methods such as .text(). The .text() method return response in plain text with string passed to it e.g. Hello!.

Now, to run the application on a given port, we need to use @hono/node-server package. Import serve from @hono/node-server package.

import { Hono } from "hono";
import { serve } from "@hono/node-server";

const app = new Hono();

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

Use the serve method as follows.

import { Hono } from "hono";
import { serve } from "@hono/node-server";

const app = new Hono();

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

serve(app, (info) => {
    console.log(`Listening on http://localhost:${info.port}`);
});

serve() function takes Hono instance as the first argument and second argument should be a callback function with info param that gives useful information such as port. If you don't define the port value as we did, the default is 3000.

Before we go further and run the application, we need to do some adjustment in the package.json file. As we are using the latest import...from syntax, we need to define type as module. Also, update the main entry point to app.js file.

{
    "name": "hono-app",
    "version": "1.0.0",
    "main": "app.js",
    "type": "module",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": "",
    "dependencies": {
        "@hono/node-server": "1.14.0",
        "hono": "4.7.5"
    },
    "devDependencies": {
        "nodemon": "3.1.9"
    }
}

Finally, let's add two scripts dev and start to run the app.js file with nodemon and node respectively.

{
    "name": "hono-app",
    "version": "1.0.0",
    "main": "app.js",
    "type": "module",
    "scripts": {
        "dev": "nodemon app.js",
        "start": "node app.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": "",
    "dependencies": {
        "@hono/node-server": "1.14.0",
        "hono": "4.7.5"
    },
    "devDependencies": {
        "nodemon": "3.1.9"
    }
}

With these changes, we are now ready to run the application. Run the following command in the terminal.

npm run dev
Listening on http://localhost:3000

Open http://localhost:3000 in the web browser and you should see Hello! as the plan text. If that is the case, congratulations! You have just created first Hono application in Node.js.