89 lines
1.7 KiB
Plaintext
89 lines
1.7 KiB
Plaintext
---
|
|
title: Build a frontend using Vite and Bun
|
|
sidebarTitle: "Vite with Bun"
|
|
mode: center
|
|
---
|
|
|
|
<Note>
|
|
You can use Vite with Bun, but many projects get faster builds & drop hundreds of dependencies by switching to [HTML
|
|
imports](/bundler/fullstack).
|
|
</Note>
|
|
|
|
---
|
|
|
|
Vite works with Bun with no extra configuration. Get started with one of Vite's templates.
|
|
|
|
```bash terminal icon="terminal"
|
|
bun create vite my-app
|
|
```
|
|
|
|
```txt
|
|
◇ Select a framework:
|
|
│ React
|
|
│
|
|
◇ Select a variant:
|
|
│ TypeScript
|
|
│
|
|
◇ Which linter to use?
|
|
│ Oxlint
|
|
│
|
|
◇ Install with bun and start now?
|
|
│ No
|
|
│
|
|
◇ Scaffolding project in /path/to/my-app...
|
|
```
|
|
|
|
---
|
|
|
|
Then `cd` into the project directory and install dependencies.
|
|
|
|
```bash terminal icon="terminal"
|
|
cd my-app
|
|
bun install
|
|
```
|
|
|
|
---
|
|
|
|
Start the development server with the `vite` CLI using `bunx`.
|
|
|
|
The `--bun` flag tells Bun to run Vite's CLI using `bun` instead of `node`. By default, Bun respects Vite's `#!/usr/bin/env node` [shebang line](<https://en.wikipedia.org/wiki/Shebang_(Unix)>).
|
|
|
|
```bash terminal icon="terminal"
|
|
bunx --bun vite
|
|
```
|
|
|
|
---
|
|
|
|
To simplify this command, update the `"dev"` script in `package.json` to the following.
|
|
|
|
```json package.json icon="file-json"
|
|
"scripts": {
|
|
"dev": "vite", // [!code --]
|
|
"dev": "bunx --bun vite", // [!code ++]
|
|
"build": "tsc -b && vite build",
|
|
"lint": "oxlint",
|
|
"preview": "vite preview"
|
|
},
|
|
// ...
|
|
```
|
|
|
|
---
|
|
|
|
Now you can start the development server with `bun run dev`.
|
|
|
|
```bash terminal icon="terminal"
|
|
bun run dev
|
|
```
|
|
|
|
---
|
|
|
|
Build your app for production.
|
|
|
|
```sh terminal icon="terminal"
|
|
bunx --bun vite build
|
|
```
|
|
|
|
---
|
|
|
|
For more information, see the [Vite documentation](https://vite.dev/guide/).
|