mirror of
https://github.com/honojs/hono.git
synced 2024-11-24 11:07:29 +01:00
docs: update readme
This commit is contained in:
parent
04460a646f
commit
b9745e79c5
52
README.md
52
README.md
@ -20,7 +20,7 @@
|
||||
[![GitHub commit activity](https://img.shields.io/github/commit-activity/m/yusukebe/hono)](https://github.com/yusukebe/hono/pulse)
|
||||
[![GitHub last commit](https://img.shields.io/github/last-commit/yusukebe/hono)](https://github.com/yusukebe/hono/commits/master)
|
||||
|
||||
Hono - _**[炎] means flame🔥 in Japanese**_ - is small, simple, and ultrafast web framework for Cloudflare Workers and Fastly Compute@Edge.
|
||||
Hono - _**[炎] means flame🔥 in Japanese**_ - is a small, simple, and ultrafast web framework for Cloudflare Workers and Service Worker based serverless such as Fastly Compute@Edge.
|
||||
|
||||
```js
|
||||
import { Hono } from 'hono'
|
||||
@ -37,7 +37,7 @@ app.fire()
|
||||
- **Zero-dependencies** - using only Service Worker and Web standard API.
|
||||
- **Middleware** - built-in middleware and ability to extend with your own middleware.
|
||||
- **TypeScript** - first-class TypeScript support.
|
||||
- **Optimized** - for Cloudflare Workers.
|
||||
- **Optimized** - for Cloudflare Workers and Fastly Compute@Edge.
|
||||
|
||||
## Benchmark
|
||||
|
||||
@ -58,7 +58,41 @@ A demonstration to create an application for Cloudflare Workers with Hono.
|
||||
|
||||
![Demo](https://user-images.githubusercontent.com/10682/151973526-342644f9-71c5-4fee-81f4-64a7558bb192.gif)
|
||||
|
||||
Now, the named path parameter has types.
|
||||
## Not only fast
|
||||
|
||||
Hono is fast. But not only fast.
|
||||
|
||||
### Write Less, do more
|
||||
|
||||
Built-in middleware make _"**Write Less, do more**"_ in reality. You can use a lot of middleware without writing code from scratch. Below are examples.
|
||||
|
||||
- [Basic Authentication](https://github.com/yusukebe/hono/tree/master/src/middleware/basic-auth/)
|
||||
- [Cookie parsing / serializing](https://github.com/yusukebe/hono/tree/master/src/middleware/cookie/)
|
||||
- [CORS](https://github.com/yusukebe/hono/tree/master/src/middleware/cors/)
|
||||
- [ETag](https://github.com/yusukebe/hono/tree/master/src/middleware/etag/)
|
||||
- [GraphQL Server](https://github.com/yusukebe/hono/tree/master/src/middleware/graphql-server/)
|
||||
- [Logger](https://github.com/yusukebe/hono/tree/master/src/middleware/logger/)
|
||||
- [Mustache template engine](https://github.com/yusukebe/hono/tree/master/src/middleware/mustache/) (Only for Cloudflare Workers)
|
||||
- [JSON pretty printing](https://github.com/yusukebe/hono/tree/master/src/middleware/pretty-json/)
|
||||
- [Serving static files](https://github.com/yusukebe/hono/tree/master/src/middleware/serve-static/) (Only for Cloudflare Workers)
|
||||
|
||||
You can enable logger and CORS middleware with just this code.
|
||||
|
||||
```js
|
||||
import { Hono } from 'hono'
|
||||
import { cors } from 'hono/cors'
|
||||
import { logger } from 'hono/logger'
|
||||
|
||||
const app = new Hono()
|
||||
app.use('*', cors()).use(logger())
|
||||
```
|
||||
|
||||
### Developer Experience
|
||||
|
||||
And Hono provides fine _"**Developer Experience**"_. Easy access to Request/Response thanks to the `Context` object.
|
||||
Above all, Hono is written in TypeScript. So, Hono has _"**Types**"_!
|
||||
|
||||
For example, the named path parameters will be literal types.
|
||||
|
||||
![Demo](https://user-images.githubusercontent.com/10682/154179671-9e491597-6778-44ac-a8e6-4483d7ad5393.png)
|
||||
|
||||
@ -80,10 +114,10 @@ npm install hono
|
||||
|
||||
An instance of `Hono` has these methods.
|
||||
|
||||
- app.**HTTP_METHOD**(path, handler)
|
||||
- app.**all**(path, handler)
|
||||
- app.**HTTP_METHOD**(\[path,\] handler)
|
||||
- app.**all**(\[path,\] handler)
|
||||
- app.**route**(path)
|
||||
- app.**use**(path, middleware)
|
||||
- app.**use**(\[path,\] middleware)
|
||||
- app.**notFound**(handler)
|
||||
- app.**onError**(err, handler)
|
||||
- app.**fire**()
|
||||
@ -507,7 +541,7 @@ npx wrangler@beta publish index.js
|
||||
|
||||
## Starter template
|
||||
|
||||
You can start making your Cloudflare Workers application with [the starter template](https://github.com/yusukebe/hono-minimal). It is really minimal using TypeScript, esbuild, and Miniflare.
|
||||
You can start making your Cloudflare Workers application with [the starter template](https://github.com/yusukebe/hono-minimal). It is really minimal using TypeScript, esbuild, Miniflare, and Jest.
|
||||
|
||||
To generate a project skelton, run this command.
|
||||
|
||||
@ -529,7 +563,7 @@ Implementation of the original router `TrieRouter` is inspired by [goblin](https
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions Welcome! You can contribute by the following way.
|
||||
Contributions Welcome! You can contribute in the following ways.
|
||||
|
||||
- Write or fix documents
|
||||
- Write code of middleware
|
||||
@ -537,8 +571,6 @@ Contributions Welcome! You can contribute by the following way.
|
||||
- Refactor the code
|
||||
- etc.
|
||||
|
||||
Let's make Hono together!
|
||||
|
||||
## Contributors
|
||||
|
||||
Thanks to [all contributors](https://github.com/yusukebe/hono/graphs/contributors)!
|
||||
|
@ -20,7 +20,7 @@
|
||||
[![GitHub commit activity](https://img.shields.io/github/commit-activity/m/yusukebe/hono)](https://github.com/yusukebe/hono/pulse)
|
||||
[![GitHub last commit](https://img.shields.io/github/last-commit/yusukebe/hono)](https://github.com/yusukebe/hono/commits/master)
|
||||
|
||||
Hono - _日本語の\[炎\]に由来 🔥_ - はCloudflare WorkersやFastly Compute@Edge向けの小さくて、シンプルで、めちゃくちゃ速いWebフレームワークです。
|
||||
Hono - _日本語の\[炎\]に由来 🔥_ - はCloudflare WorkersやFastly Compute@Edgeなど、Service Workerベースのサーバーレス向けの小さくて、シンプルで、めちゃくちゃ速いWebフレームワークです。
|
||||
|
||||
```js
|
||||
import { Hono } from 'hono'
|
||||
@ -58,7 +58,42 @@ Honoを使って、Cloudflare Workersのアプリケーションを作ってい
|
||||
|
||||
![Demo](https://user-images.githubusercontent.com/10682/151973526-342644f9-71c5-4fee-81f4-64a7558bb192.gif)
|
||||
|
||||
名前付きパラメーターにも型がつきます。
|
||||
## 速いだけじゃない
|
||||
|
||||
Honoは速いけど、速いだけではありません。
|
||||
|
||||
### Write Less, do more
|
||||
|
||||
ビルトイン・ミドルウェアが「**_Write Less, do more_**」を実現します。
|
||||
たくさんのミドルウェアを1からコードを書くことなく、使えます。
|
||||
例えば、以下のミドルウェアがあります。
|
||||
|
||||
- [Basic認証](https://github.com/yusukebe/hono/tree/master/src/middleware/basic-auth/)
|
||||
- [Cookieパース/シリアライゼーション](https://github.com/yusukebe/hono/tree/master/src/middleware/cookie/)
|
||||
- [CORS](https://github.com/yusukebe/hono/tree/master/src/middleware/cors/)
|
||||
- [ETag](https://github.com/yusukebe/hono/tree/master/src/middleware/etag/)
|
||||
- [GraphQLサーバー](https://github.com/yusukebe/hono/tree/master/src/middleware/graphql-server/)
|
||||
- [ロガー](https://github.com/yusukebe/hono/tree/master/src/middleware/logger/)
|
||||
- [Mustacheを使ったテンプレート](https://github.com/yusukebe/hono/tree/master/src/middleware/mustache/) (Cloudflare Workersのみ)
|
||||
- [JSON pretty](https://github.com/yusukebe/hono/tree/master/src/middleware/pretty-json/)
|
||||
- [静的ファイルのサーブ](https://github.com/yusukebe/hono/tree/master/src/middleware/serve-static/) (Cloudflare Workersのみ)
|
||||
|
||||
たったこれだけのコードでロガーとCORSミドルウェアを使うことができます。
|
||||
|
||||
```js
|
||||
import { Hono } from 'hono'
|
||||
import { cors } from 'hono/cors'
|
||||
import { logger } from 'hono/logger'
|
||||
|
||||
const app = new Hono()
|
||||
app.use('*', cors()).use(logger())
|
||||
```
|
||||
|
||||
### Developer Experience
|
||||
|
||||
そして、Honoは優れた「**_Developer Experience_**」を提供します。`Context` オブジェクトのおかげで、Request/Responseへのアクセスが簡単です。なにより、HonoはTypeScriptで書かれています。そう、Honoは「**_型_**」を持っているのです!
|
||||
|
||||
例えば、名前付きパラメーターにもリテラル型がつきます。
|
||||
|
||||
![Demo](https://user-images.githubusercontent.com/10682/154179671-9e491597-6778-44ac-a8e6-4483d7ad5393.png)
|
||||
|
||||
@ -80,10 +115,10 @@ npm install hono
|
||||
|
||||
`Hono`のインスタンスには以下のメソッドがあります。
|
||||
|
||||
- app.**HTTP_METHOD**(path, handler)
|
||||
- app.**all**(path, handler)
|
||||
- app.**HTTP_METHOD**(\[path,\] handler)
|
||||
- app.**all**(\[path,\] handler)
|
||||
- app.**route**(path)
|
||||
- app.**use**(path, middleware)
|
||||
- app.**use**(\[path,\] middleware)
|
||||
- app.**notFound**(handler)
|
||||
- app.**onError**(err, handler)
|
||||
- app.**fire**()
|
||||
@ -127,6 +162,21 @@ app.get('/post/:date{[0-9]+}/:title{[a-z]+}', (c) => {
|
||||
})
|
||||
```
|
||||
|
||||
### チェインされたルート
|
||||
|
||||
```js
|
||||
app
|
||||
.get('/endpoint', (c) => {
|
||||
return c.text('GET /endpoint')
|
||||
})
|
||||
.post((c) => {
|
||||
return c.text('POST /endpoint')
|
||||
})
|
||||
.delete((c) => {
|
||||
return c.text('DELETE /endpoint')
|
||||
})
|
||||
```
|
||||
|
||||
### ネストされたルート
|
||||
|
||||
```js
|
||||
@ -175,6 +225,9 @@ const app = new Hono()
|
||||
|
||||
app.use('*', poweredBy())
|
||||
app.use('*', logger())
|
||||
// もしくはこのようにも書けます。
|
||||
// app.use('*', poweredBy()).use(logger())
|
||||
|
||||
app.use(
|
||||
'/auth/*',
|
||||
basicAuth({
|
||||
|
@ -5,26 +5,25 @@
|
||||
index.js:
|
||||
|
||||
```js
|
||||
describe('CORS by Middleware', () => {
|
||||
const app = new Hono()
|
||||
const app = new Hono()
|
||||
|
||||
app.use('/api/*', cors())
|
||||
app.use(
|
||||
'/api2/*',
|
||||
cors({
|
||||
origin: 'http://example.com',
|
||||
allowHeaders: ['X-Custom-Header', 'Upgrade-Insecure-Requests'],
|
||||
allowMethods: ['POST', 'GET', 'OPTIONS'],
|
||||
exposeHeaders: ['Content-Length', 'X-Kuma-Revision'],
|
||||
maxAge: 600,
|
||||
credentials: true,
|
||||
})
|
||||
)
|
||||
app.use('/api/*', cors())
|
||||
app.use(
|
||||
'/api2/*',
|
||||
cors({
|
||||
origin: 'http://example.com',
|
||||
allowHeaders: ['X-Custom-Header', 'Upgrade-Insecure-Requests'],
|
||||
allowMethods: ['POST', 'GET', 'OPTIONS'],
|
||||
exposeHeaders: ['Content-Length', 'X-Kuma-Revision'],
|
||||
maxAge: 600,
|
||||
credentials: true,
|
||||
})
|
||||
)
|
||||
|
||||
app.all('/api/abc', (c) => {
|
||||
return c.json({ success: true })
|
||||
})
|
||||
app.all('/api2/abc', (c) => {
|
||||
return c.json({ success: true })
|
||||
})
|
||||
app.all('/api/abc', (c) => {
|
||||
return c.json({ success: true })
|
||||
})
|
||||
app.all('/api2/abc', (c) => {
|
||||
return c.json({ success: true })
|
||||
})
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user