Online Tool Store
Vite Config Generator
Build a vite.config file with the aliases, build targets, proxy rules, and environment handling a project actually needs.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Developer
Vite Config Generator
Frontend preview — no upload or external service.
vite.config
React setup with an @ alias to src, a /api dev proxy to localhost:8000 with changeOrigin, modern build target, and sourcemaps enabled for production.
How the Vite Config Generator works
- Choose the framework and what the config needs to handle.
- Add path aliases so imports stop being relative chains — and remember to mirror them in tsconfig paths.
- Copy the config into the project root and restart the dev server; config changes are not hot-reloaded reliably.
FAQ
Why do aliases need setting in two places?
Vite resolves them at build time from vite.config; TypeScript resolves them at type-check time from tsconfig paths. Both need the same mapping or your editor and your build disagree.
When do I need a dev proxy?
When the frontend and API run on different ports in development. Proxying /api through the dev server avoids CORS locally without weakening anything in production.
Should sourcemaps be enabled in production?
For debugging, yes — but they expose your original source. Many teams generate them and upload to an error tracker rather than serving them publicly.
How we compare
| Feature | Online Tool Store | A CLI script | An IDE plugin |
|---|---|---|---|
| Aliases plus tsconfig note | ✓ | Manual | Varies |
| Dev proxy included | ✓ | ✓ | ✓ |
| No scaffolding a whole project | ✓ | ✗ | ✗ |
| Config stays local | ✓ | ✓ | ✗ |
Vite Config Generator covers the two-places problem with aliases, which is the config mistake that produces working builds and broken editors.