Hono Tutorial Pt. 1

Aug 2, 2024

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

Create a new file with the 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! Here, we 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 response (don’t forget to return the response otherwise it throws 404 error).

import { Hono } from 'hono';

const app = new Hono();

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

Here, c is context and .text() returns a plain text response Hello!

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

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

const app = new Hono();

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

Use this serve method as follows.

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

const app = new Hono();

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

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

Created Hono instance should be the first argument of the serve() function and second argument is the callback function with info as the parameter that has a port attribute. If you don’t define the port value, the default is 3000.

Before we go further and run this 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 a module. Also, update the main entry to app.js file.

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

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

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

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 browser and we should see Hello! as the plain text. If that is the case, congratulations! You have just made a first Hono application in Node.js.

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

Tags: hono

Kiran Chauhan