Routing

Overview of Routing in Frog

Similar to .post, .get, .put, etc in other Web Frameworks, Frog uses .frame to define a new frame route.

Internally, the frame route automatically handles GET and POST reqs sent by Farcaster clients such as Warpcast to get frame metadata.

Basic

import { Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({/* ... */})
})
 
app.frame('/foo', (c) => {
  return c.res({/* ... */})
})
 
app.frame('/bar', (c) => {
  return c.res({/* ... */})
})

Grouping

You can group routes by using the app.route method.

src/index.tsx

import { Frog } from 'frog'
import { app as exampleApp } from './example'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({/* ... */})
})
 
app.route('/example', exampleApp)

Base Path

You can specify a base path for your app with the basePath constructor parameter.

src/index.tsx

import { Frog } from 'frog'
 
export const app = new Frog({ basePath: '/api' })

Path Parameters

You can extract path parameters using context.req.param()

app.frame('/user/:name', (c) => {
  const name = c.req.param('name')
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        gm, {name}
      </div>
    ),
  })
})

You can extract all parameters at once:

app.frame('/posts/:id/comment/:commentId', (c) => {
  const { id, commentId } = c.req.param()
  // ...
})

You can specify optional parameters:

Matches `/api/animal` and `/api/animal/:type`
app.frame('/api/animal/:type?', (c) => {  const { id, commentId } = c.req.param()
  // ...
})

Regular Expressions

app.frame('/post/:date{[0-9]+}/:title{[a-z]+}', (c) => {
  const { date, title } = c.req.param()
  // ...
})

Hono Routes (GET, POST, etc)

You can also define GET, POST, etc routes via the Hono instance.

export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({/* ... */})
})
 
app.hono.get('/healthcheck', (c) => {
  return c.text('ribbit')
})