feat: add static files to templates (#56)

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`)

templates/bun/src/index.tsx

@@ -1,4 +1,3 @@
-import { serve } from 'bun'
 import { Button, Frog, TextInput } from 'frog'
 
 export const app = new Frog({
@@ -56,8 +55,11 @@ app.frame('/', (c) => {
   })
 })
 
-serve({
-  fetch: app.fetch,
-  port: 3000,
-})
-console.log('Server is running on port 3000')
+if (typeof Bun !== 'undefined') {
+  app.use('/*', (await import('hono/bun')).serveStatic({ root: './public' }))
+  Bun.serve({
+    fetch: app.fetch,
+    port: 3000,
+  })
+  console.log('Server is running on port 3000')
+}

templates/bun/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "module": "NodeNext",
     "strict": true,
     "jsx": "react-jsx",
     "jsxImportSource": "hono/jsx"

templates/cloudflare-worker/src/index.tsx

@@ -1,4 +1,5 @@
 import { Button, Frog, TextInput } from 'frog'
+import { serveStatic } from 'hono/cloudflare-workers'
 
 export const app = new Frog({
   // Supply a Hub API URL to enable frame verification.
@@ -55,4 +56,13 @@ app.frame('/', (c) => {
   })
 })
 
+if (import.meta.env?.MODE !== 'development')
+  app.use(
+    '/*',
+    serveStatic({
+      root: './',
+      manifest: await import('__STATIC_CONTENT_MANIFEST'),
+    }),
+  )
+
 export default app

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/package.json

@@ -6,6 +6,7 @@
     "dev": "frog dev"
   },
   "dependencies": {
+    "@hono/node-server": "latest",
     "frog": "latest",
     "hono": "^4"
   },

templates/default/src/index.tsx

@@ -1,10 +1,13 @@
+import { serveStatic } from '@hono/node-server/serve-static'
 import { Button, Frog, TextInput } from 'frog'
 
 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 { serveStatic } from '@hono/node-server/serve-static'
 import { Button, Frog, TextInput } from 'frog'
 
 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",