HonoNetlify
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.
txt
npm create hono@latest my-appnpm create hono@latest my-apptxt
yarn create hono my-appyarn create hono my-apptxt
pnpm create hono my-apppnpm create hono my-apptxt
bunx create-hono my-appbunx create-hono my-apptxt
deno run -A npm:create-hono my-appdeno run -A npm:create-hono my-appMove into my-app and install the dependencies.
txt
cd my-app
npm icd my-app
npm itxt
cd my-app
yarncd my-app
yarntxt
cd my-app
pnpm icd my-app
pnpm itxt
cd my-app
bun icd my-app
bun i2. Hello World
Edit netlify/edge-functions/index.ts:
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 devnetlify dev4. Deploy
You can deploy with a netlify deploy command.
netlify deploy --prodnetlify deploy --prodContext
You can access the Netlify's Context through c.env:
ts
// 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)