Skip to content

Cloudflare Workers

Cloudflare Workers enable you to deploy serverless code instantly across the globe to give it exceptional performance, reliability, and scale.

Quick Start

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

npm
npm init frog -- -t cloudflare-worker

Manual Installation

Install Wrangler

npm install wrangler --save-dev

Build your Frame

Next, scaffold your frame:

src/index.tsx
import { Button, Frog } from 'frog'
 
export const app = new Frog({ 
  // Supply a Hub API URL to enable frame verification.
  // hubApiUrl: 'https://api.hub.wevm.dev',
})
 
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>
    ]
  })
})

Export Default

After that, we export our app via the default export.

src/index.tsx
import { Button, Frog } from 'frog'
 
export const app = new Frog({ 
  // Supply a Hub API URL to enable frame verification.
  // hubApiUrl: 'https://api.hub.wevm.dev',
})
 
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>
    ]
  })
})
 
export default app

Add Scripts to package.json

Then we will add a Wrangler scripts to our package.json:

{
  "scripts": {
    "dev": "frog dev",
    "wrangler:dev": "wrangler dev src/index.tsx",
    "wrangler:deploy": "wrangler deploy --minify src/index.tsx"
  },
  "dependencies": {
    "hono": "latest",
    "frog": "latest"
  },
  "devDependencies": {
    "@types/bun": "latest",
    "wrangler": "latest",
  }
}

Navigate to Frame

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

npm run dev

http://localhost:5173

Bonus: Deploy

When ready, we can deploy our application.

This example deploys to Cloudflare via the Wrangler CLI (wrangler).

npm run wrangler:deploy

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',
  // Supply a Hub API URL to enable frame verification.
  // hubApiUrl: 'https://api.hub.wevm.dev',
})
 
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>
    ]
  })
})
 
export default app