Vite Config Builder

Vite Config Builder

Compose vite.config.ts with framework presets, plugins, server options, and SSR / library mode.

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";

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

Install command

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

What This Tool Does

Vite Config Builder is built for deterministic developer and agent workflows.

Compose vite.config.ts with framework presets (React/Vue/Svelte/Astro), plugins, server options, build options, and SSR/library mode. Outputs typed TypeScript.

Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

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.

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.

Frequently Asked Questions

What is Vite Config Builder?
A composer for vite.config.ts that handles framework presets, plugins, dev server options, build options, and SSR or library mode. The output is typed TypeScript using defineConfig.
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.