149 lines
4.7 KiB
Plaintext
149 lines
4.7 KiB
Plaintext
---
|
|
title: Build an app with SvelteKit and Bun
|
|
sidebarTitle: "SvelteKit with Bun"
|
|
mode: center
|
|
---
|
|
|
|
Use `sv create my-app` to create a SvelteKit project with the Svelte CLI. Answer the prompts to select a template and set up your development environment.
|
|
|
|
```sh terminal icon="terminal"
|
|
bunx sv create my-app
|
|
```
|
|
|
|
```txt
|
|
┌ Welcome to the Svelte CLI! (v0.5.7)
|
|
│
|
|
◇ Which template would you like?
|
|
│ SvelteKit demo
|
|
│
|
|
◇ Add type checking with Typescript?
|
|
│ Yes, using Typescript syntax
|
|
│
|
|
◆ Project created
|
|
│
|
|
◇ What would you like to add to your project?
|
|
│ none
|
|
│
|
|
◇ Which package manager do you want to install dependencies with?
|
|
│ bun
|
|
│
|
|
◇ Successfully installed dependencies
|
|
│
|
|
◇ Project next steps ─────────────────────────────────────────────────────╮
|
|
│ │
|
|
│ 1: cd my-app │
|
|
│ 2: git init && git add -A && git commit -m "Initial commit" (optional) │
|
|
│ 3: bun run dev -- --open │
|
|
│ │
|
|
│ To close the dev server, hit Ctrl-C │
|
|
│ │
|
|
│ Stuck? Visit us at https://svelte.dev/chat │
|
|
│ │
|
|
├──────────────────────────────────────────────────────────────────────────╯
|
|
│
|
|
└ You're all set!
|
|
```
|
|
|
|
---
|
|
|
|
Once the project is initialized, `cd` into the new project. The dependencies are already installed, so you don't need to run `bun install`.
|
|
|
|
Then start the development server with `bun --bun run dev`.
|
|
|
|
To run the dev server with Node.js instead of Bun, omit the `--bun` flag.
|
|
|
|
```sh terminal icon="terminal"
|
|
cd my-app
|
|
bun --bun run dev
|
|
```
|
|
|
|
```txt
|
|
$ vite dev
|
|
Forced re-optimization of dependencies
|
|
|
|
VITE v5.4.10 ready in 424 ms
|
|
|
|
➜ Local: http://localhost:5173/
|
|
➜ Network: use --host to expose
|
|
➜ press h + enter to show help
|
|
```
|
|
|
|
---
|
|
|
|
Visit [http://localhost:5173](http://localhost:5173/) in a browser to see the template app.
|
|
|
|
<Frame>
|
|
|
|
</Frame>
|
|
|
|
---
|
|
|
|
Edit and save `src/routes/+page.svelte` and the dev server hot-reloads your changes in the browser.
|
|
|
|
---
|
|
|
|
To build for production, you need a SvelteKit adapter. We recommend `svelte-adapter-bun`; install it with `bun add -D svelte-adapter-bun`.
|
|
|
|
Then make the following changes to your `vite.config.ts` (or `vite.config.js`). If your project configures SvelteKit in a `svelte.config.js` instead, swap the adapter import there.
|
|
|
|
```ts vite.config.ts icon="/icons/typescript.svg"
|
|
import adapter from "@sveltejs/adapter-auto"; // [!code --]
|
|
import adapter from "svelte-adapter-bun"; // [!code ++]
|
|
import { sveltekit } from "@sveltejs/kit/vite";
|
|
import { defineConfig } from "vite";
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
sveltekit({
|
|
compilerOptions: {
|
|
// Force runes mode for the project, except for libraries. Can be removed in svelte 6.
|
|
runes: ({ filename }) => (filename.split(/[/\\]/).includes("node_modules") ? undefined : true),
|
|
},
|
|
|
|
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
|
|
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
|
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
|
|
adapter: adapter(),
|
|
}),
|
|
],
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
To build a production bundle:
|
|
|
|
```sh terminal icon="terminal"
|
|
bun --bun run build
|
|
```
|
|
|
|
```txt
|
|
$ vite build
|
|
vite v5.4.10 building SSR bundle for production...
|
|
"confetti" is imported from external module "@neoconfetti/svelte" but never used in "src/routes/sverdle/+page.svelte".
|
|
✓ 130 modules transformed.
|
|
vite v5.4.10 building for production...
|
|
✓ 148 modules transformed.
|
|
...
|
|
✓ built in 231ms
|
|
...
|
|
✓ built in 899ms
|
|
|
|
Run npm run preview to preview your production build locally.
|
|
|
|
> Using svelte-adapter-bun
|
|
✔ done
|
|
```
|
|
|
|
---
|
|
|
|
Then start the production server with `bun ./build/index.js`. It listens on port `3000` by default; set the `PORT` environment variable to change it.
|
|
|
|
```sh terminal icon="terminal"
|
|
bun ./build/index.js
|
|
```
|
|
|
|
```txt
|
|
Listening on http://0.0.0.0:3000/
|
|
```
|