Erste Schritte

Hono ist sehr einfach zu verwenden. Wir können ein Projekt einrichten, Code schreiben, mit einem lokalen Server entwickeln und die Anwendung schnell bereitstellen. Derselbe Code funktioniert auf jeder Laufzeitumgebung, lediglich die Einstiegspunkte unterscheiden sich. Sehen wir uns die grundlegende Verwendung von Hono an.

Projektvorlagen

Für jede Plattform stehen Projektvorlagen zur Verfügung. Verwende den folgenden Befehl „create-hono“.

npm

npm create hono@latest my-app

yarn

yarn create hono my-app

pnpm

pnpm create hono@latest my-app

bun

bun create hono@latest my-app

deno

deno init --npm hono@latest my-app

Anschließend wirst du gefragt, welche Vorlage du verwenden möchtest. Wähle für dieses Beispiel Cloudflare Workers aus.

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

Die Vorlage wird nach my-app heruntergeladen. Wechsle in dieses Verzeichnis und installiere die Abhängigkeiten.

npm

cd my-app
npm i

yarn

cd my-app
yarn

pnpm

cd my-app
pnpm i

bun

cd my-app
bun i

Sobald die Paketinstallation abgeschlossen ist, starte mit dem folgenden Befehl einen lokalen Server.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

Hello World

Mit dem Cloudflare-Workers-Entwicklungswerkzeug „Wrangler“, Deno, Bun und anderen Werkzeugen kannst du TypeScript-Code schreiben, ohne dich um die Transpilierung kümmern zu müssen.

Schreibe deine erste Hono-Anwendung in src/index.ts. Das folgende Beispiel ist eine einfache Hono-Anwendung für den Einstieg.

Die import-Anweisung und der abschließende Teil mit export default können je nach Laufzeitumgebung unterschiedlich sein, der Anwendungscode selbst funktioniert jedoch überall unverändert.

import { Hono } from 'hono'

const app = new Hono()

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

export default app

Starte den Entwicklungsserver und öffne http://localhost:8787 in deinem Browser.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

JSON zurückgeben

Auch die Rückgabe von JSON ist einfach. Das folgende Beispiel verarbeitet eine GET-Anfrage an /api/hello und gibt eine Antwort vom Typ application/json zurück.

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

Anfrage und Antwort

So kannst du einen Pfadparameter und den Wert eines URL-Abfrageparameters abrufen sowie einen Antwortheader hinzufügen.

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

Neben GET können wir auch POST, PUT und DELETE einfach verarbeiten.

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

HTML zurückgeben

Du kannst HTML mit dem html-Helfer oder mit JSX-Syntax schreiben. Wenn du JSX verwenden möchtest, benenne die Datei in src/index.tsx um und passe die Konfiguration an. Sieh dir dazu die Anleitung der jeweiligen Laufzeitumgebung an, da sich die Einstellungen unterscheiden. Unten findest du ein Beispiel mit JSX.

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

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

Eine unveränderte Response zurückgeben

Du kannst auch direkt die native Response zurückgeben.

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

Middleware verwenden

Middleware kann dir aufwendige Arbeit abnehmen. Zum Beispiel kannst du Basic-Authentifizierung hinzufügen.

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

// ...

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

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

Es gibt nützliche integrierte Middleware, unter anderem für Bearer- und JWT-Authentifizierung, CORS und ETag. Hono bietet außerdem Drittanbieter-Middleware mit externen Bibliotheken wie GraphQL Server und Firebase Auth. Du kannst auch eigene Middleware erstellen.

Adapter

Für plattformspezifische Funktionen gibt es Adapter, etwa für statische Dateien oder WebSocket. Diese werden als separate Pakete veröffentlicht. Um beispielsweise WebSocket in Cloudflare Workers zu verwenden, installiere und importiere @hono/cloudflare-workers.

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

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

Nächster Schritt

Der meiste Code funktioniert auf jeder Plattform, es gibt jedoch auch eigene Anleitungen für die einzelnen Plattformen. Darin wird etwa erklärt, wie du Projekte einrichtest oder Anwendungen bereitstellst. Sieh dir die Seite für die Plattform an, auf der du deine Anwendung erstellen möchtest!