Vite Config Generator

You’re setting up a new Vite project with React, and the default vite.config.ts is 5 lines. But you need: a dev server proxy to localhost:3001/api, resolve aliases for @/components, CSS preprocessor configuration for Sass, build output to dist/, and environment variable prefixes. The Vite docs spread these across 15 different pages.

Why This Generator (Not the Webpack Config Generator)

PureDevTools has a Webpack Config Generator for webpack projects. This tool generates vite.config.ts files — with framework plugins (React, Vue, Svelte, Solid), server port and proxy, build options, CSS preprocessors, resolve aliases, and more. Visual form with all common options on one page. Everything runs in your browser.

What Is Vite?

Vite (French for “fast”) is a next-generation frontend build tool created by Evan You, the author of Vue. It serves source files over native ES modules during development — giving instant server start and near-zero latency hot module replacement (HMR) regardless of app size. For production, Vite bundles your code with Rollup, pre-configured to output highly optimized static assets.

A vite.config.ts file in your project root tells Vite which framework plugin to use, how to run the dev server, how to build for production, and which third-party plugins to activate. Without a config file, Vite uses sensible defaults — but almost every real project needs at least a framework plugin configured.

How to Use This Tool

1. Select your framework — Choose React, Vue, Svelte, Solid, Preact, or vanilla (none).
2. Configure server options — Set the dev server port, toggle browser auto-open, and add API proxy rules.
3. Set build options — Change the output directory and source map strategy.
4. Enable plugins — Toggle legacy browser support, compression, PWA, SVG components, or Markdown imports.
5. Configure CSS — Enable CSS Modules and choose a preprocessor (Sass, Less, or Stylus).
6. Add resolve aliases — Map short import paths like @ to ./src.
7. Copy the config — Click Copy to copy the generated vite.config.ts to your clipboard.
8. Run the install command — Copy and run the install command to add required packages.

All generation happens entirely in your browser. No data is sent to any server.

Framework Plugins Explained

Vite’s framework integration is provided through official first-party plugins. Each plugin enables HMR, JSX/TSX transformation, and framework-specific optimizations.

React Fast Refresh vs. full HMR

@vitejs/plugin-react uses Babel to power React Fast Refresh — component state is preserved across hot reloads. If you need faster transforms at the cost of some edge cases, @vitejs/plugin-react-swc is an alternative that uses SWC instead of Babel.

Server Configuration

Dev Server Port

Vite’s default port is 5173. If that port is in use, Vite will automatically try the next available port. To hard-pin a port (useful in Docker or CI environments), set server.port explicitly.

API Proxy

The server.proxy option lets you forward API requests from your dev server to a backend, avoiding CORS issues during development. For example, a rule for /api forwarded to http://localhost:3000 means any request to http://localhost:5173/api/users is transparently forwarded to http://localhost:3000/api/users.

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      rewrite: (p) => p.replace(/^\/api/, ''),
    },
  },
},

• changeOrigin: true — Changes the Host header to match the target. Required when the backend checks the Host header.
• rewrite — Strips the proxy prefix from the path. Use this when your backend doesn’t have an /api prefix.

Build Options

Output Directory

The build.outDir option sets where Vite writes the production bundle. The default is dist. Common alternatives include build, public, or out.

Source Maps

CSS Configuration

CSS Modules

When css.modules is enabled, Vite processes .module.css (and .module.scss, etc.) files as CSS Modules, locally scoping class names by default. The localsConvention: 'camelCase' option lets you import class names as camelCase JavaScript properties even if the CSS uses kebab-case.

/* button.module.css */
.submit-button { color: blue; }

import styles from './button.module.css'
// With localsConvention: 'camelCase':
styles.submitButton // → "button_submitButton_a1b2c"

CSS Preprocessors

Vite has built-in support for Sass, Less, and Stylus — you just need to install the preprocessor package alongside Vite:

No plugin needed. Once the package is installed, Vite processes .scss, .less, and .styl files automatically. The css.preprocessorOptions block passes options directly to the preprocessor compiler.

Resolve Aliases

Path aliases let you write cleaner imports. Instead of ../../components/Button, you can write @/components/Button. The alias is resolved in vite.config.ts using path.resolve:

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'),
  },
},

Common alias conventions:

Plugins Reference

@vitejs/plugin-legacy — Legacy Browser Support

Adds support for browsers that do not support native ESM. The plugin uses Babel to produce a separate legacy bundle and nomodule script tags so modern browsers load the standard bundle while old browsers load the legacy one.

legacy({ targets: ['defaults', 'not IE 11'] })

Use this when your analytics show traffic from browsers like Chrome 60 or Safari 11.

vite-plugin-compression — Asset Compression

Generates .gz and/or .br compressed versions of build outputs. When paired with a server configured to serve pre-compressed files (Nginx gzip_static on), this eliminates runtime compression overhead.

vite-plugin-pwa — Progressive Web App

Generates a service worker and Web App Manifest. The registerType: 'autoUpdate' option automatically updates the service worker without requiring user interaction. Combines well with the Web App Manifest Generator tool for icon configuration.

vite-plugin-svgr — SVG as React Components

Allows importing SVG files as React components with full TypeScript support:

import { ReactComponent as Logo } from './logo.svg'
// or (Vite 4+ default transform query)
import Logo from './logo.svg?react'

vite-plugin-md — Markdown as Components

Imports .md files as Vue or React components. Useful for documentation sites, blogs, and content-driven applications that want to colocate content with code.

Environment Variables

Vite exposes environment variables prefixed with VITE_ (the default envPrefix) to client-side code via import.meta.env. Variables without the prefix are only available on the server side (e.g., in vite.config.ts) for security reasons.

# .env.development
VITE_API_URL=http://localhost:3000
DATABASE_URL=postgres://...   # NOT exposed to the browser

To use a different prefix (e.g., for a migration from Create React App’s REACT_APP_), set envPrefix:

envPrefix: 'REACT_APP_',

Base URL

The base option sets the public base path for all assets and routes. Use / (default) for root-deployed apps. Change it when deploying to a sub-path:

// Deployed at https://example.com/my-app/
base: '/my-app/',

GitHub Pages deployments often require base: '/repo-name/'.

Frequently Asked Questions

Do I need a vite.config.ts file? Only if you need to deviate from Vite’s defaults. A React project needs at minimum @vitejs/plugin-react registered in plugins. Vanilla JS/TS projects with no proxy, no aliases, and no CSS preprocessors can run without any config file.

What is the difference between vite.config.ts and vite.config.js? Functionally identical. vite.config.ts gives you TypeScript type checking for the config object via defineConfig. Since Vite supports TypeScript natively, there is no compilation step needed — Vite reads vite.config.ts directly.

Why does my API proxy return a 404 in development? Common causes: (1) The rewrite function strips a prefix the backend doesn’t expect. (2) changeOrigin is needed but not set. (3) The backend URL in target is wrong (check that the backend is actually running on that port).

Can I use multiple framework plugins together? Generally no. Framework plugins are designed for one framework per project. The exception is Preact, which can coexist with other tools via its compatibility layer.

Is my configuration data sent to a server? No. All config generation happens entirely in your browser. Nothing is transmitted to any server and nothing is tracked.

How do I migrate from Create React App to Vite? Replace react-scripts with vite and @vitejs/plugin-react. Move public/index.html to the project root and replace %PUBLIC_URL% with /. Rename REACT_APP_ env vars to VITE_ (or set envPrefix: 'REACT_APP_' to keep them as-is temporarily). Update package.json scripts to use vite, vite build, and vite preview.