@nestbridge/vite

A Vite plugin that lets frontend code import a NestJS controller or GraphQL resolver directly — keeping full TypeScript autocomplete against its real method signatures, while the browser only ever receives a generated fetch() call or GraphQL request. See the repository README for the full explanation of how NestJS is kept out of the client bundle.

This plugin is a thin vite binding around the bundler-agnostic @nestbridge/unplugin engine — the same one that @nestbridge/webpack wraps for webpack.

Install

yarn add -D @nestbridge/vite
yarn add @nestbridge/runtime

Setup

// vite.config.ts
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import { nestBridge } from '@nestbridge/vite';

export default defineConfig({
  resolve: {
    alias: {
      '@server': resolve(__dirname, '../server/src'),
    },
  },
  plugins: [
    nestBridge({
      controllers: '../server/src/**/*.controller.ts',
      resolvers: '../server/src/**/*.resolver.ts',
      baseURL: '/api',
    }),
  ],
});

resolvers is optional — omit it if your app has no GraphQL resolvers. The resolve.alias entry lets the bundler find the real controller and resolver files so the plugin can intercept them. A matching paths entry in tsconfig.json lets TypeScript find the generated declarations instead:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@server/*": ["./.nestbridge/server/src/*"]
    }
  }
}

Add .nestbridge/ (or your configured outputDir) to .gitignore — it's regenerated on every build and on every dev-server start.

NestBridgeOptions

interface NestBridgeOptions {
  controllers: string | string[]; // glob(s), resolved relative to the Vite root
  resolvers?: string | string[];   // glob(s) for GraphQL resolvers; defaults to none
  baseURL?: string;                // informational; call configureNestBridge for the runtime effect
  debug?: boolean;                 // logs discovery/analysis/HMR activity
  outputDir?: string;               // defaults to ".nestbridge"
}

Using webpack instead of Vite? See @nestbridge/webpack's README for the equivalent setup — same options, same generated output, different bundler.

Don't forget to call configureNestBridge from @nestbridge/runtime — this option only affects generated path text, not the runtime fetch()/GraphQL config (baseURL/graphqlEndpoint).

License

MIT