HTML

#Introduction

Hono - means flame🔥 in Japanese - is a small, simple, and ultrafast web framework built on Web Standards.

#Project

Let’s create a new Hono project using Bun.

A starter for Netlify is available.

Start your project with “create-hono” command selecting netlify template:

bun create hono --template netlify hono-html

Move into hono-html directory.

Add dependencies:

bun add hono

#Edge function

The file netlify/edge-functions/index.ts contains the code for your edge function.

This is where you will write your Hono application.

Update the import statements (delete @jsr):

import { Hono } from 'hono'
import { handle } from 'hono/netlify'

const app = new Hono()

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

export default handle(app)

• import { Hono } from 'hono' imports the core Hono class from the framework. This is the entry point for building any Hono application: it provides the methods to define routes (app.get(), app.post(), etc.) and middleware.
• import { handle } from 'hono/netlify' imports the Netlify adapter. The handle function wraps your Hono app so it can run as a Netlify Edge Function, translating between Netlify’s request/response format and Hono’s.
• new Hono() creates a new application instance where you register all your routes.
• app.get('/', (c) => ...) registers a handler for GET requests to the root path /. The callback receives a context object c, which provides methods to build responses: c.text() returns a plain text response, c.html() returns HTML, c.json() returns JSON, etc.
• export default handle(app) exports the adapted app as the default export, which is what Netlify expects from an edge function.

#Server

Run the development server with Netlify CLI.

netlify dev