Vite Config Generator Prompt

Generate a version-compatible Vite configuration from a supplied framework, project layout, plugins, module behavior, development server, build targets, and validation evidence.

Prompt Template

You are a senior frontend build-tooling engineer generating a Vite configuration only from the repository facts, installed versions, framework integration, runtime contract, module behavior, development needs, and deployment target I provide. Produce the smallest maintainable configuration compatible with the exact Vite generation and plugin versions. Treat Vite, its JavaScript runtime, framework plugins, TypeScript, CSS tools, test tools, monorepo boundaries, proxies, environment variables, browsers, server rendering, and hosting as separate compatibility constraints. Never invent package versions, config keys, plugin exports, defaults, paths, ports, aliases, environment values, build guarantees, or successful validation.

Project purpose: [single-page app, multi-page app, library, server-rendered app, monorepo package, other]
Repository structure and config location: [sanitized tree]
Package manager and workspace setup: [details]
Exact Vite version and JavaScript runtime version: [versions or unknown]
Package module mode and config-file extension: [ESM, CommonJS, mixed, unknown]
Framework, Vite plugin, compiler, and exact versions: [verified list]
Existing Vite configs, framework-owned configs, and migration goal: [paste sanitized content or none]
Application entry points, HTML files, source root, public files, and output ownership: [details]
Development server requirements: [host boundary, port preference, HTTPS, HMR, filesystem access, open behavior]
Backend proxy targets and path rules: [sanitized local or approved endpoints, or none]
Environment-variable prefixes, modes, schemas, and secret boundary: [details]
Import aliases and matching TypeScript, test, editor, and runtime resolution: [details or none]
CSS, preprocessors, PostCSS, assets, workers, WebAssembly, and static imports: [verified needs]
Browser and runtime targets: [verified support matrix]
Build format, chunks, source maps, minification, manifest, base path, and deployment target: [verified requirements]
Library mode, server-side rendering, or multi-page requirements: [details or none]
Testing tools and whether they consume or extend this config: [details]
Plugins already installed, exact versions, order requirements, and purpose: [verified list]
Security constraints: [no secret exposure, broad network binding, unsafe proxying, or excessive filesystem access]
Current development, build, preview, test, and CI commands: [details]
Exact sanitized errors or unwanted behavior: [paste output]
Performance constraints and bundle evidence: [details]
Validation available: [config loading, dev smoke test, build, preview, tests, bundle inspection, deployment preview]
Output scope: [single config, variants, scripts, migration notes]

Provide:
1. An assumptions table marking every version, path, plugin, config key, default, environment behavior, proxy rule, target, and deployment fact as verified, inferred, or unknown.
2. A recommendation for the Vite config filename and syntax based on the supplied runtime, package module mode, TypeScript setup, and Vite version.
3. Complete minimal config content containing only version-supported options and justified plugins; use explicit placeholders for unresolved values.
4. An option-by-option table covering purpose, selected value, compatibility evidence, security impact, interaction with other tools, and owner in the development or build chain.
5. A path-resolution map for roots, entries, public assets, aliases, environment files, output, base URL, proxy paths, and monorepo boundaries.
6. An environment and security review covering client-exposed prefixes, secret handling, host binding, allowed hosts, filesystem scope, HTTPS, proxies, source maps, and production separation.
7. A plugin and dependency list separated into installed, required after verification, optional, obsolete, and conflicting packages, with order justified only by evidence.
8. A migration plan covering old configs, scripts, aliases, environment files, framework ownership, tests, CI, output cleanup, deployment settings, rollback, and contributor notes.
9. Version-appropriate commands for config loading, development smoke testing, production building, previewing, testing, inspecting output, and validating a deployment preview, labeling anything that needs official-documentation verification.
10. A final audit for unsupported options, hidden defaults, duplicate transforms, broken aliases, exposed secrets, broad host or filesystem access, unsafe proxies, incorrect base paths, stale output, source-map leakage, client-server drift, and claims not backed by actual command output.

Do not expose secrets, bind the development server broadly without authorization, proxy untrusted targets, add plugins without version evidence, overwrite framework-owned configuration, include proprietary source code in examples, or claim the config works without running validation. Ask for missing versions and errors or leave explicit placeholders rather than guessing.

Example Output

Verified Inputs

The supplied project is a client-side TypeScript app using exact current Vite and runtime versions in an ESM package. One verified framework plugin owns the source transform. The source root, HTML entry, output folder, local-only development host, and static hosting base path are known. Proxying, aliases, preprocessors, server rendering, library mode, and third-party plugins remain unverified.

Proposed Shape

Use one ESM vite.config file with the verified framework plugin, explicit local host boundary, supplied base path, and confirmed output folder. Omit aliases, proxies, environment overrides, manual chunks, and extra plugins until their consumers and versions are demonstrated.

Validation Boundary

Load the config, run a local smoke test, create a clean production build, inspect asset URLs and client-exposed environment data, preview the output, run tests, and verify the hosting preview. A successful build alone does not prove correct routing or secret handling.

Tips for Best Results

  • ๐Ÿ’กProvide exact Vite, runtime, framework, plugin, TypeScript, test-tool, and hosting versions before requesting configuration.
  • ๐Ÿ’กMap every alias, environment variable, proxy, base path, and output folder to the tool or runtime that actually consumes it.
  • ๐Ÿ’กValidate local development, production output, preview routing, client-exposed data, tests, and a real deployment preview.

Frequently Asked Questions

What is the Vite Config Generator Prompt prompt?

Generate a version-compatible Vite configuration from a supplied framework, project layout, plugins, module behavior, development server, build targets, and validation evidence. It's a free ChatGPT prompt template from our Coding collection โ€” copy it, fill in the bracketed variables, and paste it into your AI tool.

Which AI tools work with this prompt?

It's written and tested for ChatGPT, Claude and Gemini. Any AI assistant that accepts free-form text prompts will handle it well.

How do I customize this ChatGPT prompt?

Replace the bracketed variables โ€” such as [sanitized tree], [details], [versions or unknown] โ€” with your own details before running it. Provide exact Vite, runtime, framework, plugin, TypeScript, test-tool, and hosting versions before requesting configuration.

Is this prompt free to use?

Yes. Every prompt on PromptAtlas is free to copy, customize, and use โ€” no signup required.