Netlify

Netlify provides static site hosting and serverless backend services. Edge Functions enables us to make the web pages dynamic.

Edge Functions support writing in Deno and TypeScript, and deployment is made easy through the Netlify CLI. With Hono, you can create the application for Netlify Edge Functions.

1. Setup

A starter for Netlify is available. Start your project with "create-hono" command. Select netlify template for this example.

npm

npm create hono@latest my-app

yarn

yarn create hono my-app

pnpm

pnpm create hono my-app

bun

bun create hono@latest my-app

deno

deno init --npm hono my-app

Move into my-app.

2. Hello World

Edit netlify/edge-functions/index.ts:

import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/netlify'

const app = new Hono()

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

export default handle(app)

3. Run

Run the development server with Netlify CLI. Then, access http://localhost:8888 in your Web browser.

netlify dev

4. Deploy

You can deploy with a netlify deploy command.

netlify deploy --prod

Context

You can access the Netlify's Context through c.env:

import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/netlify'

// Import the type definition
import type { Context } from 'https://edge.netlify.com/'

export type Env = {
  Bindings: {
    context: Context
  }
}

const app = new Hono<Env>()

app.get('/country', (c) =>
  c.json({
    'You are in': c.env.context.geo.country?.name,
  })
)

export default handle(app)