入门

¥Getting Started

使用 Hono 非常简单。我们可以设置项目、编写代码、使用本地服务器进行开发并快速部署。相同的代码可以在任何运行时上运行，只是入口点不同。让我们看看 Hono 的基本用法。

¥Using Hono is super easy. We can set up the project, write code, develop with a local server, and deploy quickly. The same code will work on any runtime, just with different entry points. Let's look at the basic usage of Hono.

入门

¥Starter

每个平台都有入门模板。使用以下 "create-hono" 命令。

¥Starter templates are available for each platform. Use the following "create-hono" command.

npm create hono@latest my-app

yarn create hono my-app

pnpm create hono@latest my-app

bun create hono@latest my-app

deno init --npm hono@latest my-app

然后会询问你要使用哪个模板。让我们为这个例子选择 Cloudflare Workers。

¥Then you will be asked which template you would like to use. Let's select Cloudflare Workers for this example.

? Which template do you want to use?
    aws-lambda
    bun
    cloudflare-pages
❯   cloudflare-workers
    deno
    fastly
    nextjs
    nodejs
    vercel

模板将被拉入 my-app，因此请转到它并安装依赖。

¥The template will be pulled into my-app, so go to it and install the dependencies.

npmyarnpnpmbun

cd my-app
npm i

cd my-app
yarn

cd my-app
pnpm i

cd my-app
bun i

软件包安装完成后，运行以下命令启动本地服务器。

¥Once the package installation is complete, run the following command to start up a local server.

npmyarnpnpmbun

npm run dev

yarn dev

pnpm dev

bun run dev

Hello World

你可以使用 Cloudflare Workers 开发工具 "Wrangler"、Deno、Bun 或其他工具以 TypeScript 编写代码，而无需注意转译。

¥You can write code in TypeScript with the Cloudflare Workers development tool "Wrangler", Deno, Bun, or others without being aware of transpiling.

在 src/index.ts 中使用 Hono 编写你的第一个应用。以下示例是入门级 Hono 应用。

¥Write your first application with Hono in src/index.ts. The example below is a starter Hono application.

import 和最终的 export default 部分可能因运行时而异，但所有应用代码将在任何地方运行相同的代码。

¥The import and the final export default parts may vary from runtime to runtime, but all of the application code will run the same code everywhere.

import { Hono } from 'hono'

const app = new Hono()

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

export default app

启动开发服务器并使用浏览器访问 http://localhost:8787。

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

npmyarnpnpmbun

npm run dev

yarn dev

pnpm dev

bun run dev

返回 JSON

¥Return JSON

返回 JSON 也很容易。以下是处理对 /api/hello 的 GET 请求并返回 application/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.

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

请求和响应

¥Request and Response

获取路径参数、URL 查询值并附加响应标头的写法如下。

¥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}`)
})

我们可以轻松处理 POST、PUT 和 DELETE，而不仅仅是 GET。

¥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!`)
)

返回 HTML

¥Return HTML

你可以使用 html 助手或 JSX 语法编写 HTML。如果要使用 JSX，请将文件重命名为 src/index.tsx 并进行配置（请检查每个运行时，因为它们不同）。下面是使用 JSX 的示例。

¥You can write HTML with the html Helper or using JSX syntax. If you want to use JSX, rename the file to src/index.tsx and configure it (check with each runtime as it is different). Below is an example using JSX.

tsx

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

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

返回原始响应

¥Return raw Response

你还可以返回原始响应。

¥You can also return the raw Response.

app.get('/', () => {
  return new Response('Good morning!')
})

使用中间件

¥Using Middleware

中间件可以为你完成艰苦的工作。例如，添加基本身份验证。

¥Middleware can do the hard work for you. For example, add in Basic Authentication.

import { basicAuth } from 'hono/basic-auth'

// ...

app.use(
  '/admin/*',
  basicAuth({
    username: 'admin',
    password: 'secret',
  })
)

app.get('/admin', (c) => {
  return c.text('You are authorized!')
})

有有用的内置中间件，包括 Bearer 和使用 JWT、CORS 和 ETag 的身份验证。Hono 还使用外部库（如 GraphQL Server 和 Firebase Auth）提供第三方中间件。你可以制作自己的中间件。

¥There are useful built-in middleware including Bearer and authentication using JWT, CORS and ETag. Hono also provides third-party middleware using external libraries such as GraphQL Server and Firebase Auth. And, you can make your own middleware.

适配器

¥Adapter

有用于平台相关函数的适配器，例如处理静态文件或 WebSocket。例如，要在 Cloudflare Workers 中处理 WebSocket，请导入 hono/cloudflare-workers。

¥There are Adapters for platform-dependent functions, e.g., handling static files or WebSocket. For example, to handle WebSocket in Cloudflare Workers, import hono/cloudflare-workers.

import { upgradeWebSocket } from 'hono/cloudflare-workers'

app.get(
  '/ws',
  upgradeWebSocket((c) => {
    // ...
  })
)

下一步

¥Next step

大多数代码可以在任何平台上运行，但每个平台都有指南。例如，如何设置项目或如何部署。请参阅你要用于创建应用的确切平台的页面！

¥Most code will work on any platform, but there are guides for each. For instance, how to set up projects or how to deploy. Please see the page for the exact platform you want to use to create your application!

入门 ​

入门 ​

Hello World ​

返回 JSON ​

请求和响应 ​

返回 HTML ​

返回原始响应 ​

使用中间件 ​

适配器 ​

下一步 ​

入门

入门

Hello World

返回 JSON

请求和响应

返回 HTML

返回原始响应

使用中间件

适配器

下一步