Build vite.config.ts with framework presets, plugin setup, build options, and proxy configuration.
Generates a vite.config.ts for the Vite build tool from choices you make in a form: framework preset, plugin list, build output options, and a dev-server proxy table. Each selection maps to the corresponding documented Vite option, so the file it returns drops straight into a project root. What surprises people: the config is inert on its own. The plugins it imports, such as @vitejs/plugin-react, must still be installed with a package manager, and the proxy entries only take effect in the dev server, never in the production build.
A concrete input and expected output from the current implementation.
Input
Framework: React (with TypeScript). Build: outDir "build". Proxy: /api -> http://localhost:3000, changeOrigin on.
Expected output
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
outDir: 'build',
},
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
},
},
},
}) Each form selection becomes the matching documented option: the React preset emits the react() plugin import, outDir: 'build' tells vite build where to write output, and the proxy block forwards dev-server requests whose path starts with /api to http://localhost:3000 while rewriting the Host header to the target.
Choosing a framework emits the matching plugin import and call, because Vite itself is framework-agnostic. React adds @vitejs/plugin-react, Vue adds @vitejs/plugin-vue, Svelte adds @vitejs/plugin-svelte, and the rest of the config stays identical, so changing the preset changes only the plugins array. The generator writes the file but never installs packages; those imports must be added to the project's dependencies separately.
Each proxy row becomes a server.proxy key: the path prefix is the key, and target, changeOrigin, and an optional rewrite become its options. The dev server forwards requests starting with that prefix to the target, rewriting the Host header when changeOrigin is true. A rewrite entry carries a regex such as ^/api that strips the prefix, so the backend receives only the rest of the path.
Yes. The tool emits configuration only; vite.config.ts cannot install the plugins it imports. Run npm install or your package manager's equivalent, for example npm i -D @vitejs/plugin-react for the React preset, before starting the dev server. A missing plugin makes vite dev fail on startup.
Because server.proxy configures only the Vite dev server. A production build is a folder of static files with no routing or proxying, so /api requests are answered by whatever hosts the build. In production, point the API prefix at your backend with a reverse proxy, a server rewrite rule, or same-origin endpoints.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.