Skip to content
ToapiToapi

@toapi/vite-plugin

@toapi/vite-plugin bundles a Toapi REST API alongside your Vite frontend in a single project. In dev and preview modes the API is served as middleware on the same port as the frontend — no CORS configuration needed. For production, vite build emits a deployable server bundle.

Installation

Section titled “Installation”
Terminal window
pnpm add -D @toapi/vite-plugin
pnpm add @toapi/server srvx

Peer dependencies: vite ^8 and @toapi/server.

Quick start

Section titled “Quick start”

Add the plugin to your Vite config:

vite.config.ts
import { defineConfig } from "vite";
import toapi from "@toapi/vite-plugin";


export default defineConfig({
  plugins: [toapi()],
});

The plugin expects src/api.ts to export api (an ApiDefinition):

src/api.ts
import { defineApi, defineHandler, TResponse } from "@toapi/server";


export const api = defineApi().route("/hello", {
  GET: defineHandler({ authorize: () => true }, async () => {
    return TResponse.json({ message: "hello" });
  }),
});

In dev (vite) and preview (vite preview) modes, the plugin attaches a middleware to Vite’s server that handles requests at the configured basePath (default /api). The same Vite server serves both the frontend and the API on a single port.

Features

Section titled “Features”
  • Single-port dev — frontend and API are served on the same port in dev and preview, so there is no CORS to configure.
  • Isolated build output — vite build writes dist/client/ (static assets) and dist/server.js (server bundle) separately, so server secrets never leak to the static host.
  • Env file support — .env files are loaded and mirrored into process.env during development, covering server-side libraries that read process.env directly.
  • Service-worker ready — composes cleanly with vite-plugin-pwa to add offline support and tag-based cache revalidation.

Guides

Section titled “Guides”