Skip to content
FrogUI

Bun

Bun is a JavaScript runtime (similar to Node.js & Deno) designed speed, complete with a bundler, test runner, and Node.js-compatible package manager.

Quick Start

You can scaffold a Frog project with Bun integrated via the create-frog CLI:

npm
npm init frog -- -t bun

Manual Installation

Install Bun

If Bun is not already installed on your system, you will need to install it:

curl -fsSL https://bun.sh/install | bash

Build your Frame

Next, scaffold your frame:

src/index.tsx
import { Button, Frog } from 'frog'
// import { neynar } from 'frog/hubs'
 
export const app = new Frog({
  // Supply a Hub to enable frame verification.
  // hub: neynar({ apiKey: '' }),
  title: 'Frog Frame',
})
 
app.frame('/', (c) => {
  const { buttonValue, status } = c
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        {status === 'initial' ? (
          'Select your fruit!'
        ) : (
          `Selected: ${buttonValue}`
        )}
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>,
      <Button value="banana">Banana</Button>,
      <Button value="mango">Mango</Button>
    ]
  })
})

Add Bun Server

After that, we will append a Bun server to the file.

src/index.tsx
import { Button, Frog } from 'frog'
 
export const app = new Frog({
  title: 'Frog Frame',
})
 
app.frame('/', (c) => {
  const { buttonValue, status } = c
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        {status === 'initial' ? (
          'Select your fruit!'
        ) : (
          `Selected: ${buttonValue}`
        )}
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>,
      <Button value="banana">Banana</Button>,
      <Button value="mango">Mango</Button>
    ]
  })
})
 
Bun.serve({
  fetch: app.fetch,
  port: 3000,
})
console.log('Server is running on port 3000')

Setup Devtools

Add Frog Devtools after all frames are defined. This way the devtools can automatically discover all your frames.

src/index.tsx
import { Button, Frog } from 'frog'
import { devtools } from 'frog/dev'
import { serveStatic } from 'hono/bun'
 
export const app = new Frog({
  title: 'Frog Frame',
})
 
app.frame('/', (c) => {
  ...
})
 
devtools(app, { serveStatic })

^ Devtools should be called after all frames are defined.
 Bun.serve({
  fetch: app.fetch,
  port: 3000,
})
console.log('Server is running on port 3000')

Add Scripts to package.json

Then we will add a serve script to serve our Bun server.

{
  "scripts": {
    "dev": "frog dev",
    "serve": "bun run src/index.tsx"
  },
  "dependencies": {
    "hono": "latest",
    "frog": "latest"
  },
  "devDependencies": {
    "@types/bun": "latest"
  }
}

Navigate to Frame

Then, we can navigate to our frame in the browser:

npm run dev

http://localhost:5173

Bonus: Deploy

You can deploy your Bun application to any platform that supports the Bun runtime, such as:

Bonus: Browser Redirects

If a user navigates to your frame in the browser, we may want to redirect them to another webpage that corresponds to the frame.

In the example below, when a user navigates to the /frame/foo path of the website via their web browser, they will be redirected to the /foo path.

Read more on Browser Redirects

src/index.tsx
import { Button, Frog } from 'frog'
 
export const app = new Frog({
  browserLocation: '/:path',
  title: 'Frog Frame',
})
 
app.frame('/frame/:path', (c) => {
  const { buttonValue, status } = c
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        {status === 'initial' ? (
          'Select your fruit!'
        ) : (
          `Selected: ${buttonValue}`
        )}
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>,
      <Button value="banana">Banana</Button>,
      <Button value="mango">Mango</Button>
    ]
  })
})
 
Bun.serve({
  fetch: app.fetch,
  port: 3000,
})
console.log('Server is running on port 3000')