Cloudflare Worker

Looking for a quick start? See Getting Started - Cloudflare.

Run Mokup in Workers with mokup/server/fetch. The mokup/server/worker entry is still available for a more compact Worker wrapper.

1. Worker entry (virtual bundle)

When you use mokup/vite, import the virtual bundle generated by Vite:

import { createMokupWorker } from 'mokup/server/worker'
import mokupBundle from 'virtual:mokup-bundle'

export default createMokupWorker(mokupBundle)

2. Wrangler config

{
  "name": "web-mokup-worker",
  "main": "worker/src/index.ts",
  "compatibility_date": "2025-01-15"
}

3. Build & deploy

vite dev
vite build
wrangler deploy

No extra moduleBase or moduleMap wiring is required when using the bundle.

Here is a plain fetch example without any framework:

import { createFetchHandler } from 'mokup/server/fetch'
import mokupBundle from 'virtual:mokup-bundle'

const handler = createFetchHandler(mokupBundle)

export default {
  fetch: async (request: Request) => {
    const url = new URL(request.url)
    if (url.pathname === '/health') {
      return new Response('ok')
    }
    return (await handler(request)) ?? new Response('Not Found', { status: 404 })
  },
}

Also valid (explicit fields):

import { createFetchHandler } from 'mokup/server/fetch'
import mokupBundle from 'virtual:mokup-bundle'

const handler = createFetchHandler({
  manifest: mokupBundle.manifest,
  moduleMap: mokupBundle.moduleMap,
  moduleBase: mokupBundle.moduleBase,
})

You can also combine Mokup with Hono routes (install hono if needed):

import { Hono } from 'hono'
import { createFetchHandler } from 'mokup/server/fetch'
import mokupBundle from 'virtual:mokup-bundle'

const handler = createFetchHandler(mokupBundle)

const app = new Hono()

app.get('/health', c => c.text('ok'))
app.use('*', async (c, next) => {
  const response = await handler(c.req.raw)
  if (response) {
    return response
  }
  return next()
})

export default app