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.

npm create hono@latest my-app

npm create hono@latest my-app

Move into my-app and install the dependencies.

cd my-app
npm i

cd my-app
npm i

2. Hello World

Edit netlify/edge-functions/index.ts:

import { Hono } from 'https://deno.land/x/hono/mod.ts'
import { handle } from 'https://deno.land/x/hono/adapter/netlify/mod.ts'

const app = new Hono()

app.get('/country', (c) =>
  c.json({
    message: 'Hello Netlify!',
  })
)

export default handle(app)

import { Hono } from 'https://deno.land/x/hono/mod.ts'
import { handle } from 'https://deno.land/x/hono/adapter/netlify/mod.ts'

const app = new Hono()

app.get('/country', (c) =>
  c.json({
    message: 'Hello Netlify!',
  })
)

export default handle(app)

3. Run

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

netlify dev

netlify dev

4. Deploy

You can deploy with a netlify deploy command.

netlify deploy --prod

netlify deploy --prod

`Context`

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

// netlify/edge-functions/index.ts
import { Hono } from 'https://deno.land/x/hono/mod.ts'
import { prettyJSON } from 'https://deno.land/x/hono/middleware.ts'

import { handle } from 'https://deno.land/x/hono/adapter/netlify/mod.ts'
import type { Env } from 'https://deno.land/x/hono/adapter/netlify/mod.ts'

const app = new Hono<Env>()

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

export default handle(app)

// netlify/edge-functions/index.ts
import { Hono } from 'https://deno.land/x/hono/mod.ts'
import { prettyJSON } from 'https://deno.land/x/hono/middleware.ts'

import { handle } from 'https://deno.land/x/hono/adapter/netlify/mod.ts'
import type { Env } from 'https://deno.land/x/hono/adapter/netlify/mod.ts'

const app = new Hono<Env>()

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

export default handle(app)

Netlify ​

1. Setup ​

2. Hello World ​

3. Run ​

4. Deploy ​

Context ​