メモ：Bunを使ってSvelte+SvelteKit環境構築

# はじめに

https://qiita.com/grhg/items/6234d5e225ffd948df93

に続けて、SvelteKit の環境構築をしていきます。

# 手順

以下に沿ってやれば簡単に構築できます。

https://bun.sh/guides/ecosystem/sveltekit

## プロジェクトの作成

以下のコマンドを実行します。
```bash
bunx sv create svelte-sample
```

すると対話形式で作成を進められます。
基本的にデフォルトを選択して、ライブラリは「prettier」と「eslint」だけ入れています。

```bash
┌  Welcome to the Svelte CLI! (v0.6.6)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  prettier, eslint
│
◇  Which package manager do you want to install dependencies with?
│  bun
│
◆  Successfully setup add-ons
│
◆  Successfully installed dependencies
│
◇  Successfully formatted modified files
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd svelte-sample                                                     │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: bun dev --open                                                       │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!
```

ご丁寧に next steps も出力してくれてますね。(この記事残す意味あるのか...?)

## １回起動してみる

以下のコマンドを実行してサーバーを起動します。

```bash
bun --bun run dev
```

出力されたURLにアクセスすると無事に起動していることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294382/ecefd132-51a1-5af5-c597-1d7dc18f1a3f.png)

## SvelteKit adapter の変更

この状態でビルドすると以下の警告が出ます。
```
> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://svelte.dev/docs/kit/adapters to learn how to configure your app to run on the platform of your choosing
```

> To build for production, you'll need to add the right SvelteKit adapter. Currently we recommend the
> 
> bun add -D svelte-adapter-bun.

SvelteKit adapter をbun用のものに変更する必要があるそうなので、この通りにします。

1. svelte-adapter-bun の追加  
    ```bash
    bun add -D svelte-adapter-bun
    ```
1. svelte.config.js の修正
    ```typescript
    // 1行目のimportを'@sveltejs/adapter-auto' => "svelte-adapter-bun" にする
    // import adapter from '@sveltejs/adapter-auto';
    import adapter from "svelte-adapter-bun";
    import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
    
    /** @type {import('@sveltejs/kit').Config} */
    const config = {
    	// Consult https://svelte.dev/docs/kit/integrations
    	// for more information about preprocessors
    	preprocess: vitePreprocess(),
    
    	kit: {
    		// 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()
    	}
    };
    
    export default config;
    ```

## ビルド

以下のコマンドを実行します。

```bash
bun --bun run build
```

今度は正常にビルドされました。
```
> Using svelte-adapter-bun
  ✔ Start server with: bun ./build/index.js
  ✔ done
```


起動してみます。
```bash
bun ./build/index.js
#Listening on 0.0.0.0:3000
```

オプション指定していないと変なアドレスで起動していますが、無事にビルドした資材も起動できています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294382/28fec2c1-dee0-a82d-9fbd-f0cdd55f46c0.png)


# 終わり

今回は Svelte の起動までやってみました。
開発環境を整えていきたいと思います。