2021-12-17 07:53:31 +01:00
|
|
|
# Hono
|
2021-12-14 21:17:56 +01:00
|
|
|
|
2021-12-17 07:53:31 +01:00
|
|
|
Hono [炎] - Tiny web framework for Cloudflare Workers and others.
|
|
|
|
|
|
|
|
```js
|
2022-01-01 07:29:41 +01:00
|
|
|
const { Hono } = require('hono')
|
|
|
|
const app = new Hono()
|
2021-12-17 07:53:31 +01:00
|
|
|
|
2021-12-20 23:34:38 +01:00
|
|
|
app.get('/', () => new Response('Hono!!'))
|
2021-12-17 07:53:31 +01:00
|
|
|
|
|
|
|
app.fire()
|
|
|
|
```
|
|
|
|
|
2022-01-02 14:46:36 +01:00
|
|
|
![carbon](https://user-images.githubusercontent.com/10682/147877725-bce9bd46-953d-4d70-9c2b-3eae47ad4df9.png)
|
|
|
|
|
2021-12-17 07:53:31 +01:00
|
|
|
## Feature
|
|
|
|
|
|
|
|
- Fast - the router is implemented with Trie-Tree structure.
|
|
|
|
- Portable - zero dependencies.
|
2021-12-21 09:37:02 +01:00
|
|
|
- Flexible - you can make your own middlewares.
|
2022-01-05 10:41:29 +01:00
|
|
|
- Easy - simple API, builtin middleware, and TypeScript support.
|
|
|
|
- Optimized - for Cloudflare Workers or Fastly Compute@Edge.
|
2021-12-14 21:17:56 +01:00
|
|
|
|
2021-12-27 17:34:09 +01:00
|
|
|
## Benchmark
|
|
|
|
|
2022-01-05 10:41:29 +01:00
|
|
|
Hono is fastest!!
|
|
|
|
|
2021-12-27 17:34:09 +01:00
|
|
|
```
|
2022-01-05 10:41:29 +01:00
|
|
|
hono x 758,264 ops/sec ±5.41% (75 runs sampled)
|
|
|
|
itty-router x 158,359 ops/sec ±3.21% (89 runs sampled)
|
|
|
|
sunder x 297,581 ops/sec ±4.74% (83 runs sampled)
|
2021-12-27 17:34:09 +01:00
|
|
|
Fastest is hono
|
2022-01-05 10:41:29 +01:00
|
|
|
✨ Done in 42.84s.
|
2021-12-27 17:34:09 +01:00
|
|
|
```
|
|
|
|
|
2021-12-14 21:17:56 +01:00
|
|
|
## Install
|
|
|
|
|
2021-12-20 23:34:38 +01:00
|
|
|
```
|
2021-12-14 21:17:56 +01:00
|
|
|
$ yarn add hono
|
|
|
|
```
|
|
|
|
|
|
|
|
or
|
|
|
|
|
|
|
|
```sh
|
|
|
|
$ npm install hono
|
|
|
|
```
|
|
|
|
|
2021-12-20 03:58:40 +01:00
|
|
|
## Methods
|
|
|
|
|
2022-01-05 10:41:29 +01:00
|
|
|
- app.**HTTP_METHOD**(path, handler)
|
|
|
|
- app.**all**(path, handler)
|
2021-12-20 03:58:40 +01:00
|
|
|
- app.**route**(path)
|
2021-12-20 23:34:38 +01:00
|
|
|
- app.**use**(path, middleware)
|
2021-12-20 03:58:40 +01:00
|
|
|
|
2021-12-17 07:53:31 +01:00
|
|
|
## Routing
|
|
|
|
|
|
|
|
### Basic
|
2021-12-14 21:17:56 +01:00
|
|
|
|
2021-12-20 03:58:40 +01:00
|
|
|
`app.HTTP_METHOD`
|
|
|
|
|
2021-12-14 21:17:56 +01:00
|
|
|
```js
|
2021-12-20 23:34:38 +01:00
|
|
|
// HTTP Methods
|
|
|
|
app.get('/', () => new Response('GET /'))
|
|
|
|
app.post('/', () => new Response('POST /'))
|
|
|
|
|
|
|
|
// Wildcard
|
2021-12-21 09:37:02 +01:00
|
|
|
app.get('/wild/*/card', () => {
|
2021-12-21 10:37:24 +01:00
|
|
|
return new Response('GET /wild/*/card')
|
2021-12-20 23:34:38 +01:00
|
|
|
})
|
2021-12-17 07:53:31 +01:00
|
|
|
```
|
2021-12-14 21:17:56 +01:00
|
|
|
|
2021-12-20 03:58:40 +01:00
|
|
|
`app.all`
|
|
|
|
|
|
|
|
```js
|
2021-12-20 23:34:38 +01:00
|
|
|
// Any HTTP methods
|
2021-12-22 20:24:14 +01:00
|
|
|
app.all('/hello', () => new Response('ALL Method /hello'))
|
2021-12-20 03:58:40 +01:00
|
|
|
```
|
|
|
|
|
2021-12-17 07:53:31 +01:00
|
|
|
### Named Parameter
|
2021-12-14 21:17:56 +01:00
|
|
|
|
2021-12-17 07:53:31 +01:00
|
|
|
```js
|
2021-12-21 09:37:02 +01:00
|
|
|
app.get('/user/:name', (c) => {
|
|
|
|
const name = c.req.params('name')
|
2021-12-17 07:53:31 +01:00
|
|
|
...
|
|
|
|
})
|
|
|
|
```
|
|
|
|
|
|
|
|
### Regexp
|
|
|
|
|
|
|
|
```js
|
2021-12-21 09:37:02 +01:00
|
|
|
app.get('/post/:date{[0-9]+}/:title{[a-z]+}', (c) => {
|
|
|
|
const date = c.req.params('date')
|
|
|
|
const title = c.req.params('title')
|
2021-12-17 07:53:31 +01:00
|
|
|
...
|
2021-12-14 21:17:56 +01:00
|
|
|
```
|
|
|
|
|
2021-12-17 07:53:31 +01:00
|
|
|
### Chained Route
|
|
|
|
|
|
|
|
```js
|
|
|
|
app
|
|
|
|
.route('/api/book')
|
2021-12-21 09:37:02 +01:00
|
|
|
.get(() => {...})
|
|
|
|
.post(() => {...})
|
|
|
|
.put(() => {...})
|
2021-12-17 07:53:31 +01:00
|
|
|
```
|
2021-12-14 20:26:22 +01:00
|
|
|
|
2022-01-03 10:11:46 +01:00
|
|
|
## Async
|
|
|
|
|
|
|
|
```js
|
|
|
|
app.get('/fetch-url', async () => {
|
|
|
|
const response = await fetch('https://example.com/')
|
|
|
|
return new Response(`Status is ${response.status}`)
|
|
|
|
})
|
|
|
|
```
|
|
|
|
|
2021-12-20 03:58:40 +01:00
|
|
|
## Middleware
|
|
|
|
|
2022-01-01 08:22:35 +01:00
|
|
|
### Builtin Middleware
|
|
|
|
|
|
|
|
```js
|
|
|
|
const { Hono, Middleware } = require('hono')
|
|
|
|
|
|
|
|
...
|
|
|
|
|
2022-01-05 10:41:29 +01:00
|
|
|
app.use('*', Middleware.poweredBy())
|
|
|
|
app.use('*', Middleware.logger())
|
2022-01-01 08:22:35 +01:00
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
### Custom Middleware
|
|
|
|
|
2021-12-20 03:58:40 +01:00
|
|
|
```js
|
2022-01-05 10:41:29 +01:00
|
|
|
// Custom logger
|
|
|
|
app.use('*', async (c, next) => {
|
2021-12-21 09:37:02 +01:00
|
|
|
console.log(`[${c.req.method}] ${c.req.url}`)
|
2022-01-03 10:11:46 +01:00
|
|
|
await next()
|
2022-01-05 10:41:29 +01:00
|
|
|
})
|
2021-12-20 03:58:40 +01:00
|
|
|
|
2022-01-05 10:41:29 +01:00
|
|
|
// Add custom header
|
|
|
|
app.use('/message/*', async (c, next) => {
|
2022-01-03 10:11:46 +01:00
|
|
|
await next()
|
|
|
|
await c.res.headers.add('x-message', 'This is middleware!')
|
2022-01-05 10:41:29 +01:00
|
|
|
})
|
2021-12-20 18:35:03 +01:00
|
|
|
|
|
|
|
app.get('/message/hello', () => 'Hello Middleware!')
|
2021-12-20 03:58:40 +01:00
|
|
|
```
|
|
|
|
|
2022-01-01 14:54:29 +01:00
|
|
|
### Custom 404 Response
|
|
|
|
|
|
|
|
```js
|
2022-01-05 10:41:29 +01:00
|
|
|
app.use('*', async (c, next) => {
|
2022-01-03 10:11:46 +01:00
|
|
|
await next()
|
2022-01-01 14:54:29 +01:00
|
|
|
if (c.res.status === 404) {
|
|
|
|
c.res = new Response('Custom 404 Not Found', { status: 404 })
|
|
|
|
}
|
2022-01-05 10:41:29 +01:00
|
|
|
})
|
2022-01-01 14:54:29 +01:00
|
|
|
```
|
|
|
|
|
2022-01-03 10:11:46 +01:00
|
|
|
### Complex Pattern
|
|
|
|
|
|
|
|
```js
|
2022-01-05 10:41:29 +01:00
|
|
|
// Output response time
|
2022-01-03 10:11:46 +01:00
|
|
|
app.use('*', async (c, next) => {
|
|
|
|
await next()
|
|
|
|
const responseTime = await c.res.headers.get('X-Response-Time')
|
|
|
|
console.log(`X-Response-Time: ${responseTime}`)
|
|
|
|
})
|
|
|
|
|
|
|
|
// Add X-Response-Time header
|
|
|
|
app.use('*', async (c, next) => {
|
|
|
|
const start = Date.now()
|
|
|
|
await next()
|
|
|
|
const ms = Date.now() - start
|
|
|
|
await c.res.headers.append('X-Response-Time', `${ms}ms`)
|
|
|
|
})
|
|
|
|
```
|
|
|
|
|
2021-12-21 09:37:02 +01:00
|
|
|
## Context
|
|
|
|
|
|
|
|
### req
|
|
|
|
|
|
|
|
```js
|
2022-01-05 10:41:29 +01:00
|
|
|
|
|
|
|
// Get Request object
|
2021-12-21 09:37:02 +01:00
|
|
|
app.get('/hello', (c) => {
|
2022-01-01 16:32:01 +01:00
|
|
|
const userAgent = c.req.headers.get('User-Agent')
|
2021-12-21 09:37:02 +01:00
|
|
|
...
|
|
|
|
})
|
2022-01-05 10:41:29 +01:00
|
|
|
|
|
|
|
// Query params
|
|
|
|
app.get('/search', (c) => {
|
|
|
|
const query = c.req.query('q')
|
|
|
|
...
|
|
|
|
})
|
|
|
|
|
|
|
|
// Captured params
|
|
|
|
app.get('/entry/:id', (c) => {
|
|
|
|
const id = c.req.params('id')
|
|
|
|
...
|
|
|
|
})
|
2021-12-21 09:37:02 +01:00
|
|
|
```
|
|
|
|
|
|
|
|
### res
|
|
|
|
|
|
|
|
```js
|
2022-01-05 10:41:29 +01:00
|
|
|
// Response object
|
2022-01-01 16:29:03 +01:00
|
|
|
app.use('/', (c, next) => {
|
2021-12-21 09:37:02 +01:00
|
|
|
next()
|
2022-01-01 16:29:03 +01:00
|
|
|
c.res.headers.append('X-Debug', 'Debug message')
|
2021-12-21 09:37:02 +01:00
|
|
|
})
|
|
|
|
```
|
|
|
|
|
2022-01-05 10:41:29 +01:00
|
|
|
### text
|
2021-12-20 03:58:40 +01:00
|
|
|
|
|
|
|
```js
|
2022-01-05 10:41:29 +01:00
|
|
|
app.get('/say', (c) => {
|
|
|
|
return c.text('Hello!')
|
2021-12-20 03:58:40 +01:00
|
|
|
})
|
|
|
|
```
|
|
|
|
|
2022-01-05 19:22:53 +01:00
|
|
|
### json
|
|
|
|
|
|
|
|
```js
|
|
|
|
app.get('/api', (c) => {
|
|
|
|
return c.json({ message: 'Hello!' })
|
|
|
|
})
|
|
|
|
```
|
|
|
|
|
2022-01-02 19:15:16 +01:00
|
|
|
## Hono in 1 minute
|
2022-01-02 14:46:36 +01:00
|
|
|
|
|
|
|
Create your first Cloudflare Workers with Hono from scratch.
|
|
|
|
|
2022-01-05 14:15:20 +01:00
|
|
|
![Demo](https://user-images.githubusercontent.com/10682/148223268-2484a891-57c1-472f-9df3-936a5586f002.gif)
|
2022-01-02 14:46:36 +01:00
|
|
|
|
|
|
|
### 1. Install Wrangler
|
|
|
|
|
|
|
|
Install Cloudflare Command Line "[Wrangler](https://github.com/cloudflare/wrangler)"
|
|
|
|
|
|
|
|
```sh
|
|
|
|
$ npm i @cloudflare/wrangler -g
|
|
|
|
```
|
|
|
|
|
|
|
|
### 2. `npm init`
|
|
|
|
|
|
|
|
Make npm skeleton directory.
|
|
|
|
|
|
|
|
```sh
|
|
|
|
$ mkdir hono-example
|
|
|
|
$ ch hono-example
|
|
|
|
$ npm init -y
|
|
|
|
```
|
|
|
|
|
|
|
|
### 3. `wrangler init`
|
|
|
|
|
|
|
|
Init as a wrangler project.
|
|
|
|
|
|
|
|
```sh
|
|
|
|
$ wrangler init
|
|
|
|
```
|
|
|
|
|
|
|
|
### 4. `npm install hono`
|
|
|
|
|
|
|
|
Install `hono` from npm repository.
|
|
|
|
|
|
|
|
```
|
|
|
|
$ npm i hono
|
|
|
|
```
|
|
|
|
|
|
|
|
### 5. Write your app
|
|
|
|
|
|
|
|
Only 4 line!!
|
|
|
|
|
|
|
|
```js
|
|
|
|
const { Hono } = require('hono')
|
|
|
|
const app = new Hono()
|
|
|
|
|
|
|
|
app.get('/', () => new Response('Hello! Hono!'))
|
|
|
|
|
|
|
|
app.fire()
|
|
|
|
```
|
|
|
|
|
|
|
|
### 6. Run!
|
|
|
|
|
|
|
|
Run the development server locally.
|
|
|
|
|
|
|
|
```sh
|
|
|
|
$ wrangler dev
|
|
|
|
```
|
|
|
|
|
2021-12-14 21:31:37 +01:00
|
|
|
## Related projects
|
|
|
|
|
2021-12-20 23:34:38 +01:00
|
|
|
- koa <https://github.com/koajs/koa>
|
|
|
|
- express <https://github.com/expressjs/express>
|
2021-12-22 19:08:44 +01:00
|
|
|
- oak <https://github.com/oakserver/oak>
|
2021-12-17 07:53:31 +01:00
|
|
|
- itty-router <https://github.com/kwhitley/itty-router>
|
2021-12-20 03:58:40 +01:00
|
|
|
- Sunder <https://github.com/SunderJS/sunder>
|
|
|
|
- goblin <https://github.com/bmf-san/goblin>
|
2021-12-14 21:31:37 +01:00
|
|
|
|
2021-12-14 20:26:22 +01:00
|
|
|
## Author
|
|
|
|
|
|
|
|
Yusuke Wada <https://github.com/yusukebe>
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
MIT
|