Cloudflare Developers•7mo ago

I must be missing a bit on CF Pages "functions" folder, it never works for me

pages.dev: https://a37dd34e.lkg-pages-hono.pages.dev deployment id: a37dd34e-3951-4c09-b03a-0ba7b7eca80c account id: 97b74a45f478725ddc37f3f1ddc20277 I have a fairly basic CFP project. It's Typescript, Hono, Drizzle, Tailwindcss with Vite and uses CF KV for auth/users/sessions. It's in really good shape and is fully functional but for one part I just can't seem to "wrangle" 😉 I'd like to move the code that talks to KV and later D1 into "functions". I mean I can certainly create a "repos" folder and put the db code in files there, but I thought it would be fun to try functions in CFP. I added a "functions" folder in project root. I put the example.ts file from the CF docs. I've tried other files too. So far, functions does nothing for me. No function ever works local or deploys and works. My build and deploy scripts in package.json are...

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "deploy:prev": "vite build && wrangler pages deploy --branch preview",
    "deploy:prod": "vite build && wrangler pages deploy --branch production"
  },

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "deploy:prev": "vite build && wrangler pages deploy --branch preview",
    "deploy:prod": "vite build && wrangler pages deploy --branch production"
  },

My vite.config.ts looks like...

import build from '@hono/vite-cloudflare-pages'
import devServer from '@hono/vite-dev-server'
import adapter from '@hono/vite-dev-server/cloudflare'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    build(),
    devServer({
      adapter,
      entry: 'src/index.tsx'
    })
  ]
})

import build from '@hono/vite-cloudflare-pages'
import devServer from '@hono/vite-dev-server'
import adapter from '@hono/vite-dev-server/cloudflare'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    build(),
    devServer({
      adapter,
      entry: 'src/index.tsx'
    })
  ]
})

I'm sure there is one magic step I'm not seeing in docs so here I am 🙂

3 Replies

Brutal Strike•6mo ago

i have also same problem i have put, functions/helloworld.js but https://df27b7ef.gptcall.pages.dev/helloworld returns 404(test)

locohost•6mo ago

@Brutal Strike Did you ever figure this out? I gave up. Zero replies doesn't bode well. For now I'm assuming it will only work with certain frontend frameworks. I'm worling with Hono JS which is technically a backend framework. As such, it really doesn't affect me much.

bebraw•6mo ago

@locohost can you get a basic hello world from https://developers.cloudflare.com/pages/functions/get-started/ going? reading from https://hono.dev/getting-started/cloudflare-workers, you should be able to import hono from a worker just for an experiment, i would try skipping vite at first for more complex routing, maybe having a catch-all worker at the root would be an option depending on your routing requirements

Gaming

Programming

I must be missing a bit on CF Pages "functions" folder, it never works for me