---
title: "Use Vite to build and serve the front end · Agent Wranglers"
url: https://agentwranglers.se/playbook/stack/web-frameworks/vite
updated: 2026-10-21
licence: "All rights reserved"
---

# Use Vite to build and serve the front end

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- Level: Recommended
- Chapter: [Web frameworks](https://agentwranglers.se/playbook/stack/web-frameworks)
- Rule: Use Vite as the development server and build tool for any front end that is not inside a full-stack framework.
- Cost: Open source. MIT licence, free to run on your own machines and build servers.
- How: Vite's first stable version, 2.0, came out in February 2021. Version 8.3.5 shipped in October 2026. The project publishes which versions get fixes, and today that is 8.3, with security patches back to 6.4. It has about 119 million weekly npm downloads and an MIT licence. A new project runs with one command, and the config is a short file. Choose something else when you use a full-stack framework such as Next.js, which brings its own build. It builds the front end that [Use React for the front end](https://agentwranglers.se/playbook/stack/web-frameworks/react) picks.
- Check: The project has one build tool in package.json, and its Vite version is inside the supported list on the Vite releases page.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### TypeScript example

```ts
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({ plugins: [react()], build: { sourcemap: true } });
```

### Python example

```python
import json

BUILD_TOOLS = {"vite", "webpack", "parcel", "@rsbuild/core", "react-scripts"}

def build_tools_in(package_json: str) -> set[str]:
    data = json.load(open(package_json))
    deps = {**data.get("dependencies", {}), **data.get("devDependencies", {})}
    return BUILD_TOOLS & deps.keys()
```

## Sources

- [Vite guide](https://vite.dev/guide/)
- [Vite releases](https://vite.dev/releases)

## Related rules

- [Use React for the front end](https://agentwranglers.se/playbook/stack/web-frameworks/react) in Software choices

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/stack/web-frameworks/vite">Agent Wranglers software choices playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Use React for the front end](https://agentwranglers.se/playbook/stack/web-frameworks/react)
- Next: [Use Next.js when React pages need a server](https://agentwranglers.se/playbook/stack/web-frameworks/nextjs)
- [Web frameworks](https://agentwranglers.se/playbook/stack/web-frameworks)