Vite config generator — vite.config for React, Vue, Svelte or Preact

How to use the Vite config generator

1. Choose the Framework: React, Vue, Svelte, Preact or Vanilla. Keep TypeScript config file ticked for vite.config.ts.
2. Set the Dev server port (default 5173), and tick Open the browser on start or Expose on the local network if you want them.
3. Keep @ alias for ./src to import with @/components/....
4. Enter an API proxy as path -> target, or clear the field.
5. Adjust Public base path, Build output folder, Production source maps and Tailwind CSS v4 plugin, then save the file in the project root and run the install command.

What it does and when to use it

npm create vite gives you a minimal config. Most projects soon need more: a fixed port, a proxy to the backend, an import alias, a sub-folder deployment or source maps for debugging production. This tool writes those settings with the correct imports, which is handy when adding Vite to an existing project or cleaning up a config copied from an older version.

Related setup files work alongside it. Use the tsconfig generator with its bundler preset for the TypeScript side, the Tailwind config generator for the CSS file the Tailwind plugin reads, and the ESLint config generator for linting.

How it works

The file imports defineConfig from Vite and the plugin for your framework: @vitejs/plugin-react, @vitejs/plugin-vue, @sveltejs/vite-plugin-svelte or @preact/preset-vite. Vanilla adds no plugin. Tailwind adds @tailwindcss/vite.

Settings that equal Vite’s defaults are left out: base when it is /, and the build block unless the output folder is not dist or source maps are on. The alias uses fileURLToPath(new URL('./src', import.meta.url)), which works in ES module configs. The proxy accepts ->, => or a space between path and target; a lone URL is proxied from /api. Option names follow the Vite config reference; the tool targets Vite 8.

Worked examples

The default React setup:

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    port: 5173,
    strictPort: true,
    proxy: {
      '/api': { target: 'http://localhost:3000', changeOrigin: true },
    },
  },
});

Vue with Tailwind, JavaScript file. No alias or proxy: vite.config.js contains plugins: [vue(), tailwindcss()], and the install line adds tailwindcss @tailwindcss/vite.

Svelte in a sub-folder. Port 3000, network access on, base /app/, output build, source maps on. The file imports import { svelte } from '@sveltejs/vite-plugin-svelte';, sets base: '/app/', host: true, and a build block with outDir: 'build' and sourcemap: true.

Limits and tips

• One proxy rule only. Add more entries inside proxy by hand.
• Exposing the server on the network lets anyone on the same Wi-Fi open it; avoid it on public networks.
• Production source maps reveal your original source to visitors unless you upload them to an error tracker and keep them off the public server.