Hono Tutorial Pt. 1

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

Create a new folder with the name hono-app.

mkdir hono-app

Go inside the created hono-app folder.

cd hono-app

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

npm init -y

Let’s install the hono package.

npm i -E hono

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

npm i -E @hono/node-server

Finally, let’s install nodemon to ease the development. We should install this as a development dependency (-D).

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 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 in Node, 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 this 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.

Note: The code is available at GitHub. Checkout chapter01 branch for the code of this chapter.

· Tags: hono