Hono es un web framework web pequeño, simple y ultrarrápido.

Introducción

Hono - means flame🔥 in Japanese - is a small, simple, and ultrafast web framework built on Web Standards. It works on any JavaScript runtime.

Using Hono is super easy. We can set up the project, write code, develop with a local server, and deploy quickly.

Crea una aplicación (con el template cloudflare-workers)

> bun create hono@latest hono
...
✔ Which template do you want to use? cloudflare-workers

Ejecuta el servidor en modo desarrollo:

> bun run dev                      
...
⎔ Starting local server...
[wrangler:inf] Ready on http://127.0.0.1:8787
...                                                                                          
╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│  [b] open a browser, [d] open devtools, [l] turn off local mode, [c] clear console, [x] to exit  |
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯

Aprieta la tecla b para abrir el navegador.

Puedes ver que el servidor devuelve el texto Hello Hono!:

The example below is a starter Hono application (src/index.ts):

import { Hono } from 'hono'

const app = new Hono()

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

export default app

Start the development server and access http://localhost:8787 with your browser.

bun run dev

Despliega el proyecto en Cloudflare:

> bun run deploy
...
Deployed hono triggers (2.64 sec)
  https://hono.optersoft.workers.dev
Current Version ID: bbaafdcb-5836-4ab8-a360-bc65832aabd2

Puedes ver que la aplicación se ha desplegado en Cloudflare Workers.

Rutas

Paràmetros

app.get('/student/:username', (c) => {
    const {username} = c.req.param()
    return c.json({"student": username})
})
> curl http://127.0.0.1:8787/student/eva

HTML

html Helper

The html Helper lets you write HTML in JavaScript template literal with a tag named html.

You have to escape these strings by yourself.

import { Hono } from 'hono'
import { html} from 'hono/html'

const app = new Hono()

app.get('/student/:username', (c) => {
  const { username } = c.req.param()
  return c.html(
      html`<!doctype html>
      <h1>Hello, ${username}!</h1>`
  )
})

Using raw(), the content will be rendered as is.

TSX

If you want to use JSX, rename the file to src/index.tsx and configure it (check with each runtime as it is different).

or using JSX syntax.

Below is an example using JSX.

const View = () => {
  return (
    <html>
      <body>
        <h1>Hello Hono!</h1>
      </body>
    </html>
  )
}

app.get('/page', (c) => {
  return c.html(<View />)
})

JSON

Returning JSON is also easy.

The following is an example of handling a GET Request to /api/hello and returning an application/json Response.

import { Hono } from 'hono'

const app = new Hono()

app.get('/api/hello', (c) => {
  return c.json({
    ok: true,
    message: 'Hello Hono!',
  })
})

export default app

Request and Response

Getting a path parameter, URL query value, and appending a Response header is written as follows.

app.get('/posts/:id', (c) => {
  const page = c.req.query('page')
  const id = c.req.param('id')
  c.header('X-Message', 'Hi!')
  return c.text(`You want to see ${page} of ${id}`)
})

We can easily handle POST, PUT, and DELETE not only GET.

app.post('/posts', (c) => c.text('Created!', 201))
app.delete('/posts/:id', (c) =>
  c.text(`${c.req.param('id')} is deleted!`)
)

MongoDB

TODO