Skip to content

Vite Config Builder

Build a typed vite.config.ts for React, Vue, Svelte, Preact or Solid with plugins, aliases, a dev server proxy, build options and SSR or library mode.

Vite Config Builder

Framework & mode

framework
mode

Plugins

Dev server

Build

Resolve aliases

→

Defines

Compile-time replacements. e.g. __APP_VERSION__ → "1.0.0"

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { fileURLToPath } from "node:url";

export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },
  server: {
    port: 5173
  },
  build: {
    sourcemap: true
  }
});

Install command

npm i -D vite @vitejs/plugin-react vite-tsconfig-paths

Updated . Provided as is. Check the output before you rely on it in production.

How to use Vite Config Builder

  1. 1

    Pick framework and mode

    Choose React, Vue, Svelte, Astro, Preact, Solid, or vanilla. Then select SPA, SSR, or library mode. The right framework plugin imports automatically.

  2. 2

    Add plugins

    Toggle plugins like vite-tsconfig-paths, vite-plugin-checker for parallel tsc, vite-plugin-pwa, compression, mkcert for HTTPS, and visualizer for bundle treemaps.

  3. 3

    Configure dev server

    Set port, strictPort, open, host exposure for LAN testing, and a /api proxy with a target like http://localhost:3000 for backend integration during development.

  4. 4

    Tune build options

    Set outDir, target, minify (esbuild, terser, or off), sourcemap, and manualChunks. Use one line per chunk: name: pkg1, pkg2 to split vendors deterministically.

  5. 5

    Configure SSR or library

    In SSR mode, list packages that must be bundled via ssr.noExternal. In library mode, set entry, name, fileName, formats (es/cjs/umd/iife), and externalize peer dependencies.

Questions and answers

What is Vite Config Builder?
vite.config.ts is where a Vite project declares its framework plugin, dev server, aliases and build settings inside defineConfig. This builder generates it for React, Vue, Svelte, Preact, Solid or vanilla, adds common plugins, aliases and an API proxy, switches to SSR or library mode and prints the npm install command.
Which frameworks are supported?
React, Vue, Svelte, Preact, Solid, and vanilla. Astro is shown as a reference target since Astro manages its own Vite config via astro.config.mjs.
Does it generate the install command?
Yes. Below the config preview, the tool prints an npm i -D command containing every plugin and framework package referenced by the generated file, ready to copy and run.
Does it send my data to a server?
No. All composition happens in your browser. Your framework choice, plugin selection, and aliases never leave the page.
Can it produce SSR or library configs?
Yes. Switch the mode to ssr to expose ssr.noExternal options, or to library to set entry, name, fileName, formats (es/cjs/umd/iife), and externalize peer dependencies through rollupOptions.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/vite-config-builder/

For automation planning, fetch the canonical contract at /api/tool/vite-config-builder.json.