feat: isomorphic serveStatic

src/cli/commands/dev.ts

@@ -12,13 +12,14 @@ type DevOptions = {
   host?: boolean
   port?: number
   proxy?: 'cloudflared' | 'ngrok'
+  staticPath?: string
 }
 
 export async function dev(
   entry_: string | undefined,
   options: DevOptions = {},
 ) {
-  const { host, port, proxy } = options
+  const { host, port, proxy, staticPath } = options
   const entry = entry_ || (await findEntrypoint())
 
   const entry_resolved = resolve(join(process.cwd(), entry))
@@ -31,8 +32,12 @@ export async function dev(
       host,
       port,
     },
+    publicDir: staticPath ?? 'public',
     plugins: [
       devServer({
+        exclude: [
+          /.+\.(gif|jpe?g|tiff?|png|webp|bmp|woff|eot|woff2|ttf|otf|ico|txt)$/,
+        ],
         entry: entry_resolved,
         // Note: we are not relying on the default export so we can be compatible with
         // runtimes that rely on it (ie. Vercel Serverless Functions).

src/cli/index.ts

@@ -19,6 +19,7 @@ cli
     '-P, --proxy [string]',
     'Start proxy for dev server (experimental). Valid options are `cloudflared` and `ngrok`.',
   )
+  .option('-s, --staticPath [string]', 'Path to static files (default: public)')
   .example((name) => `${name} dev --host`)
   .example((name) => `${name} dev --port 6969`)
   .example((name) => `${name} dev --proxy ngrok`)

src/package.json

@@ -39,6 +39,12 @@
       "types": "./_lib/next/index.d.ts",
       "default": "./_lib/next/index.js"
     },
+    "./serve-static": {
+      "types": "./_lib/serve-static/index.d.ts",
+      "bun": "./_lib/serve-static/bun.js",
+      "worker": "./_lib/serve-static/worker.js",
+      "default": "./_lib/serve-static/index.js"
+    },
     "./vercel": {
       "types": "./_lib/vercel/index.d.ts",
       "default": "./_lib/vercel/index.js"
@@ -56,6 +62,7 @@
   "dependencies": {
     "@bufbuild/protobuf": "^1.7.2",
     "@farcaster/core": "^0.13.7",
+    "@hono/node-server": "^1.8.2",
     "@hono/vite-dev-server": "0.7.0",
     "@ngrok/ngrok": "^1.1.0",
     "@noble/curves": "^1.3.0",

src/serve-static/bun.ts

@@ -0,0 +1 @@
+export { serveStatic } from 'hono/bun'

src/serve-static/index.ts

@@ -0,0 +1 @@
+export { serveStatic } from '@hono/node-server/serve-static'

src/serve-static/package.json

@@ -0,0 +1,5 @@
+{
+  "type": "module",
+  "types": "../_lib/serve-static/index.d.ts",
+  "module": "../_lib/serve-static/index.js"
+}

src/serve-static/worker.ts

@@ -0,0 +1,8 @@
+import { serveStatic as serveStatic_ } from 'hono/cloudflare-workers'
+
+export const serveStatic: typeof serveStatic_ = (parameters) =>
+  serveStatic_({
+    ...parameters,
+    // @ts-expect-error
+    manifest: import('__STATIC_CONTENT_MANIFEST'),
+  })

templates/bun/src/index.tsx

@@ -1,11 +1,13 @@
-import { serve } from 'bun'
 import { Button, Frog, TextInput } from 'frog'
+import { serveStatic } from 'frog/serve-static'
 
 export const app = new Frog({
   // Supply a Hub API URL to enable frame verification.
   // hubApiUrl: 'https://api.hub.wevm.dev',
 })
 
+app.use('/*', serveStatic({ root: './public' }))
+
 app.frame('/', (c) => {
   const { buttonValue, inputText, status } = c
   const fruit = inputText || buttonValue
@@ -56,8 +58,10 @@ app.frame('/', (c) => {
   })
 })
 
-serve({
-  fetch: app.fetch,
-  port: 3000,
-})
-console.log('Server is running on port 3000')
+if (typeof Bun !== 'undefined') {
+  Bun.serve({
+    fetch: app.fetch,
+    port: 3000,
+  })
+  console.log('Server is running on port 3000')
+}

templates/cloudflare-worker/src/index.tsx

@@ -1,10 +1,18 @@
 import { Button, Frog, TextInput } from 'frog'
+import { serveStatic } from 'frog/serve-static'
 
 export const app = new Frog({
   // Supply a Hub API URL to enable frame verification.
   // hubApiUrl: 'https://api.hub.wevm.dev',
 })
 
+app.use(
+  '/*',
+  serveStatic({
+    root: './',
+  }),
+)
+
 app.frame('/', (c) => {
   const { buttonValue, inputText, status } = c
   const fruit = inputText || buttonValue

templates/cloudflare-worker/wrangler.toml

@@ -1,6 +1,9 @@
 name = "frog-template"
 compatibility_date = "2023-12-01"
 
+[site]
+bucket = "./public"
+
 # [vars]
 # MY_VARIABLE = "production_value"
 

templates/default/src/index.tsx

@@ -1,10 +1,13 @@
 import { Button, Frog, TextInput } from 'frog'
+import { serveStatic } from 'frog/serve-static'
 
 export const app = new Frog({
   // Supply a Hub API URL to enable frame verification.
   // hubApiUrl: 'https://api.hub.wevm.dev',
 })
 
+app.use('/*', serveStatic({ root: './public' }))
+
 app.frame('/', (c) => {
   const { buttonValue, inputText, status } = c
   const fruit = inputText || buttonValue

templates/next/app/api/[[...routes]]/route.tsx

@@ -4,6 +4,7 @@ import { Button, Frog, TextInput } from 'frog'
 import { handle } from 'frog/next'
 
 const app = new Frog({
+  assetsPath: '/',
   basePath: '/api',
   // Supply a Hub API URL to enable frame verification.
   // hubApiUrl: 'https://api.hub.wevm.dev',

templates/node/src/index.tsx

@@ -1,11 +1,14 @@
 import { serve } from '@hono/node-server'
 import { Button, Frog, TextInput } from 'frog'
+import { serveStatic } from 'frog/serve-static'
 
 export const app = new Frog({
   // Supply a Hub API URL to enable frame verification.
   // hubApiUrl: 'https://api.hub.wevm.dev',
 })
 
+app.use('/*', serveStatic({ root: './public' }))
+
 app.frame('/', (c) => {
   const { buttonValue, inputText, status } = c
   const fruit = inputText || buttonValue

templates/vercel/api/index.tsx

@@ -7,6 +7,7 @@ import { handle } from 'frog/vercel'
 // }
 
 export const app = new Frog({
+  assetsPath: '/',
   basePath: '/api',
   // Supply a Hub API URL to enable frame verification.
   // hubApiUrl: 'https://api.hub.wevm.dev',

tsconfig.json

@@ -1,7 +1,7 @@
 {
   // This configuration is used for local development and type checking.
   "extends": "./tsconfig.base.json",
-  "exclude": ["templates/next", "create-frog/templates"],
+  "exclude": ["templates/*", "create-frog/templates"],
   "include": ["create-frog", "examples", "templates", "src"],
   "compilerOptions": {
     "jsx": "react-jsx",