Hono Basics
Hono Basics
Hono Basics
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
Starter templates are available for each platform. Use the following "create-hono"
command.
::: code-group
```sh [npm]
npm create hono@latest my-app
```
```sh [yarn]
yarn create hono my-app
```
```sh [pnpm]
pnpm create hono my-app
```
```sh [bun]
bunx create-hono my-app
```
```sh [deno]
deno run -A npm:create-hono my-app
```
:::
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
```
::: code-group
```sh [npm]
cd my-app
npm i
```
```sh [yarn]
cd my-app
yarn
```
```sh [pnpm]
cd my-app
pnpm i
```
```sh [bun]
cd my-app
bun i
```
:::
Once the package installation is complete, run the following command to start up a
local server.
::: code-group
```sh [npm]
npm run dev
```
```sh [yarn]
yarn dev
```
```sh [pnpm]
pnpm dev
```
```sh [bun]
bun run dev
```
:::
## Hello World
You can write code in TypeScript with the Cloudflare Workers development tool
"Wrangler", Deno, Bun, or others without being aware of transpiling.
Write your first application with Hono in `src/index.ts`. The example below is a
starter Hono application.
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.
```ts
import { Hono } from 'hono'
Start the development server and access `http://localhost:8787` with your browser.
::: code-group
```sh [npm]
npm run dev
```
```sh [yarn]
yarn dev
```
```sh [pnpm]
pnpm dev
```
```sh [bun]
bun run dev
```
:::
## Return 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.
```ts
app.get('/api/hello', (c) => {
return c.json({
ok: true,
message: 'Hello Hono!',
})
})
```
Getting a path parameter, URL query value, and appending a Response header is
written as follows.
```ts
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 see ${page} of ${id}`)
})
```
We can easily handle POST, PUT, and DELETE not only GET.
```ts
app.post('/posts', (c) => c.text('Created!', 201))
app.delete('/posts/:id', (c) => c.text(`${c.req.param('id')} is deleted!`))
```
## Return HTML
Hono is also suitable for returning a little HTML. Rename the file to
`src/index.tsx` and configure it to use JSX (check with each runtime as it is
different). You don't need to use a huge front-end framework.
```tsx
const View = () => {
return (
<html>
<body>
<h1>Hello Hono!</h1>
</body>
</html>
)
}
```ts
app.get('/', (c) => {
return new Response('Good morning!')
})
```
## Using Middleware
```ts
import { basicAuth } from 'hono/basic-auth'
// ...
app.use(
'/admin/*',
basicAuth({
username: 'admin',
password: 'secret',
})
)
## Adapter
There are Adapters for platform-dependent functions, e.g., handling static files.
For example, to handle static files in Cloudflare Workers, import `hono/cloudflare-
workers`.
```ts
import { serveStatic } from 'hono/cloudflare-workers'
## 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!