How To Use HonoJS with Supabase Edge Functions

If you are currently thinking about building an api using Supabase edge functions i will help answer some questions.

My experience using multiple Edge Functions

First i had a few issues which made it extremely annoying

• Lack of rate limiting
• Confusing package manager
• Validation
• Authentication
• Middleware

I found myself repeating myself a lot and it got really annoying having to push individual functions.

Edge functions should be used for basic prototyping or one off use cases

My solution

Instead you should use HonoJS, then you can take advantage of easy validation using Zod and better middleware functionality

https://supabase.com/docs/guides/functions/quickstart

Create your Edge Function

First, name your edge function ‘api’ then open the index.ts file

supabase functions new api

Then you want to install Hono from JSR, import it, instantiate a object then serve it through deno like so

import { Hono } from 'jsr:@hono/hono'
import { ChatRoute } from './handlers/chat.ts'

const v1 = new Hono()

v1.route("/chat-openai", ChatRoute)

const app = new Hono()
app.route('/api/v1', v1) //its very important that the route begins with /api/ so it can be mounted correctly

Deno.serve(app.fetch)

Creating Handlers

Now i’ll teach you a nice way to make your handlers. First start by creating a folder called ‘handlers

└── supabase
    ├── config.toml
    └── functions
        └── api
            ├── config.ts
            ├── deno.json
            ├── deno.lock
            ├── handlers
            │   ├── chat.ts
            ├── index.ts
            ├── middleware
            │   └── check-auth.ts

//chat.ts

export const ChatRequestSchema = z.object({
    conversationId: z.string(),
    message: z.string().trim().min(1).max(500),
  })

async function HandleChat(c)  {
    const { message } = c.req.valid('json')

}

// Export the route
export const ChatRoute = new Hono()

ChatRoute.post('/', CheckUsage(), zValidator('json', ChatRequestSchema), HandleChat)