Skip to content

Netlify

Netlify provides static site hosting and serverless backend services. Edge Functions enables us 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.

sh
npm create hono@latest my-app
sh
yarn create hono my-app
sh
pnpm create hono my-app
sh
bunx create-hono my-app
sh
deno run -A npm:create-hono my-app

Move into my-app.

2. Hello World

Edit netlify/edge-functions/index.ts:

ts
import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/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.

sh
netlify dev

4. Deploy

You can deploy with a netlify deploy command.

sh
netlify deploy --prod

Context

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

ts
import { Hono } from 'jsr:@hono/hono'
import { handle } from 'jsr:@hono/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)

Released under the MIT License.