Handle API routes in Vike

[rtritto]

Packages

• universal-autorouter-hono: load API routes in Hono (HMR available)
• vite-plugin-build-routes: build API routes

Use case with Vite plugin

Repro can be found in vite-autorouter branch.

Usage (draft and outdated)

Show

// ./vite.config.ts

import vike from 'vike/plugin'
import { vikeNode } from 'vike-node/plugin'
import vikeSolid from 'vike-solid/vite'
import type { UserConfig } from 'vite'
import viteApiAutoloader from 'vite-plugin-api-autorouter/vite'

export default {
  plugins: [
    vike(),
    vikeSolid(),
    vikeNode('server/index.ts'),
    viteApiAutoloader('server/api')
  ]
} satisfies UserConfig

// ./server/index.ts

import path from 'node:path'
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import vike from 'vike-node/hono'
import viteApiAutoloader from 'vite-plugin-api-autorouter/server'

const app = new Hono()

app.use(viteApiAutoloader({
  app,
  prefix: '/api',
  routesDir: path.resolve(import.meta.dirname, 'api'),
  viteDevServer: globalThis.__vikeNode?.viteDevServer
}))

app.use(vike())

const port = +(process.env.PORT || 3000)

serve({
  fetch: app.fetch,
  port
}, () => console.log(`Server running at http://localhost:${port}`))

// vite-plugin-api-autorouter/vite

import fs from 'node:fs'
import path from 'node:path'
import { build, type Plugin } from 'vite'

type PluginOptions = {
  entry: string // File path to bundle
  pattern?: string // File path pattern to bundle
}

export default function bundleFilesPlugin(options: string | PluginOptions): Plugin {
  let isBuild: boolean
  let config: ResolvedConfig
  return {
    name: 'vite-plugin-api-autorouter',
    apply: 'build',
    enforce: 'post',
    configResolved: (config_) => {
      config = config_
    },
    async buildStart() {
      const { entry, pattern = '**/*.ts' } = typeof options === 'string' ? { entry: options } : (options as PluginOptions)

      const entryFull = path.resolve(config.root, entry)
      const outFull = path.resolve(config.root, config.build.outDir)

      const filepaths = fs.globSync(pattern, { cwd: entryFull })

      // Create an input map for Rollup
      const entries: Record<string, string> = {}
      for (const rawFilepath of filepaths) {
        // Normalize file paths for Windows
        const filepath = rawFilepath.replaceAll('\\', '/')
        // Use relative paths as keys to preserve directory structure
        const resolvedFilepath = path.resolve(entryFull, filepath)
        const relativePath = filepath.replace(/\.ts$/, '')
        entries[relativePath] = resolvedFilepath
      }

      // Run a build for each file
      await build({
        configFile: false, // Avoid conflicts with the main Vite config
        build: {
          ssr: true,
          target: 'esnext',
          rollupOptions: {
            input: entries,
            output: {
              dir: outFull, // Directory for this specific file
              format: 'esm',
              sanitizeFileName: false,
              entryFileNames: 'api/[name].mjs', // File name pattern
              chunkFileNames: 'chunks/chunk-[hash].mjs' // Output for chunks
            }
          },
          emptyOutDir: false // Do not clear the output folder for incremental builds
        },
        ...config.resolve && { resolve: config.resolve }
      })
    }
  }
}

// vite-plugin-api-autorouter/server

import autoloadRoutes from 'universal-autorouter'

export default ({ app, prefix, routesDir, viteDevServer }) => {
  const pattern = process.env.NODE_ENV === 'production' ? '**/*.mjs' : '**/*.ts'
  await autoloadRoutes(app, {
    pattern,
    prefix,
    routesDir,
    viteDevServer
  })
}

Use case with Vike plugin (it's only an example and will not be implemented; see "Use case with Vite plugin")

Use case to create a Vike plugin (eg vike-api-routes) for API routes.

Usage (draft)

Show

// ./vite.config.ts

import vike from 'vike/plugin'
import { vikeNode } from 'vike-node/plugin'
import vikeSolid from 'vike-solid/vite'
import vikeApiRoutes from 'vike-api-routes/vite'
import type { UserConfig } from 'vite'

export default {
  plugins: [
    vike(),
    vikeSolid(),
    vikeNode('server/index.ts'),
    vikeApiRoutes({
      entry: 'server/api',
      outputDir: 'dist/server/api'
    })
  ]
} satisfies UserConfig

// ./server/index.ts

import path from 'node:path'
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import vikeApiRoutes from 'vike-api-routes/server'
import vike from 'vike-node/hono'

app.use(vikeApiRoutes({
  app,
  prefix: '/api',
  routesDir: path.resolve(import.meta.dirname, 'api')
}))

app.use(vike())

const port = +(process.env.PORT || 3000)

serve({
  fetch: app.fetch,
  port
}, () => console.log(`Server running at http://localhost:${port}`))

// vike-api-routes/vite

import fs from 'node:fs'
import path from 'node:path'
import { build, type Plugin } from 'vite'

interface BundleFilesOptions {
  entry: string // File path to bundle
  outputDir: string // Base output directory (e.g., 'dist')
}

export default function bundleFilesPlugin(options: BundleFilesOptions): Plugin {
  return {
    name: 'vite-plugin-bundle-files',
    enforce: 'post',
    async buildStart() {
      const { entry, outputDir } = options

      const cwd = process.cwd()
      const entryFull = path.resolve(cwd, entry)
      const outFull = path.resolve(cwd, outputDir)

      const filepaths = fs.globSync('**/*.ts', { cwd: entryFull })

      // Create an input map for Rollup
      const entryFilepathFull = {} as Record<string, string>
      for (const filepath of filepaths) {
        // Use relative paths as keys to preserve directory structure
        const resolvedFilepath = path.resolve(entryFull, filepath).replaceAll('\\', '/').replaceAll('[', '\[').replaceAll(']', '\]')
        // const relativePath = path.relative(entryFull, resolvedFilepath)
        const relativePath = filepath.replace(/\.ts$/, '').replaceAll('\\', '/')
        entryFilepathFull[relativePath] = resolvedFilepath
      }

      // Run a build for each file
      await build({
        configFile: false, // Avoid conflicts with the main Vite config
        build: {
          ssr: true,
          target: 'esnext',
          rollupOptions: {
            input: entryFilepathFull,
            output: {
              dir: outFull, // Directory for this specific file
              format: 'esm',
              entryFileNames: '[name].mjs' // File name pattern
            }
          }
        }
      })
    }
  }
}

// vike-api-routes/server

import autoloadRoutes from 'universal-autorouter'

export default ({ app, prefix, routesDir }) => {
  let pattern
  let viteDevServer
  if (process.env.NODE_ENV === 'production') {
    pattern = '**/*.mjs'
  } else {
    pattern = '**/*.ts'
    viteDevServer = globalThis.__vikeNode.viteDevServer
  }
  await autoloadRoutes(app, {
    pattern,
    prefix,
    routesDir,
    viteDevServer
  })
}

Related

• [Feature] Add option to bundle the directory of server routes vike-node#35
• An answer [Feature] Add option to bundle the directory of server routes vike-node#35 (comment)
• feat: API middleware vike-node#34
• Improve file system routing for APIs magne4000/universal-middleware#86
• Bundle api directory in `dist` #2025

PS: Feel free to ask anything and/or contribute.

[rtritto]

@Blankeos what do you think?

FYI @SleepyDeb

[brillout]

Official response here.

[rtritto]

Point 1. can be achieved using viteDevServer as parameter:

// ./server/index.ts

// ...
import viteApiAutoloader from 'vite-plugin-api-autorouter/server'
// ...

app.use(viteApiAutoloader({
  app,
  prefix: '/api',
  routesDir: path.resolve(import.meta.dirname, 'api'),
  viteDevServer: globalThis.__vikeNode?.viteDevServer
}))

PS: I updated the first comment ("Usage (draft)" section)

---

Point 2., Vite dedupe chunks in same folder.

Having ./utils/getData that is used by SSR and API routes:

// /utils/getData.ts
export default function getData() {
  return ['Hello', 'World']
}

// /pages/index/+data.ts
import getData from '../../utils/getData'

export const data = () => {
  const data = getData()
  return {
    data
  }
}

// /server/api/user/index.ts
import type { Context } from 'hono'

import getData from '../../../utils/getData'

export default (c: Context) => {
  const data = getData()
  return c.json(data)
}

Separated builds (build for pages as /dist/server/entries/pages_index.mjs + build for API routes as /dist/server/api/user/index.mjs) can't be used because the getData function is bundled in each mjs file.

So we need a single build to create a shared chunk where output will be:

• /dist/server/chunks/chunk-[hash].mjs that exports getData function
• /dist/server/entries/pages_index.mjs that imports getData function from /dist/server/chunks/chunk-[hash].mjs
• /dist/server/api/user/index.mjs that imports getData function from /dist/server/chunks/chunk-[hash].mjs

How the single build can be achieved? Maybe using some vite's hook in the vite's plugin that return the vite config or merge the vite config.

Note: After my reverse of Telefunc, for the single build I didn't find any answer

[rtritto]

Repro of current works: https://github.com/templates-ecosystem/template-vike-solid-daisyui-hono/tree/vite-autorouter

[brillout]

See Telefunc's usage of https://github.com/brillout/vite-plugin-server-entry.

[rtritto]

Package for vite-plugin-api-autorouter was released!

Some points:

1. For API routes files, to get the related dist as directory tree instead of single file, I have to replace the injected Vike config.build.rollupOptions.output.entryFileNames with '[name].mjs'. So now I have same behaviour with server (entries) pages:
   Eg:

   • /dist/server/entries/pages/index.mjs instead of /dist/server/entries/pages_index.mjs
   • /dist/server/entries/pages/user/@id.mjs instead of /dist/server/entries/pages_user_-id.mjs

   The directory tree instead of single file can break some Vike's ecosystem or something else?

2. Files in /dist/server/entries use .mjs extensions.
   Why files in /dist/server/chunks don't use .mjs extensions?

PS: @brillout Thanks for help and support!

[brillout]

Congrats 🚀

[rtritto]

New package universal-autorouter-hono released 🚀
Load (with HMR) inside Hono all API routes using filesystem.
Under the hood, on change of a file handler, inject it into Hono to use HMR (not supported by Hono).

Related Hono feature request honojs/hono#3817

[brillout]

Neat!

[rtritto]

I have a route handler src/server/api/user/index.ts that uses the file /src/utils.ts.

viteDevServer.watcher.on('change', async (file) => {
  // handle file change
})

When I update the file /src/utils.ts, there is an easy way with Vite to get the file src/server/api/user/index.ts that is previously loaded with ssrLoadModule?

[rtritto]

@brillout how is this achieved by Vike?

Example

// /src/pages/index/+Page.tsx
import { getMSG } from '../../utils.ts'

function Page() {
  return (
    <button onClick={() => alert(getMSG())}>Click me</button>
  )
}

export { Page }

// /src/utils.ts
export const getMSG = () => 'Hello Word!'

Steps:

• vike dev
• go to http://localhost:3000
• click the button in the page and an the alert of Hello Word! is displayed
• change the Hello Word! value in getMSG and save file utils.ts
• reload page
• click the button in the page and an the alert message is displayed with the new value

How is the Page reloaded with the new code imported from utils.ts?

[brillout]

https://vite.dev/guide/ssr.html#server-side-rendering-ssr

[rtritto]

I solved using viteDevServer.moduleGraph.getModulesByFile (commit) from https://vite.dev/guide/api-environment-instances.html#separate-module-graphs