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

はじめに

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

手順

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

プロジェクトの作成

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

bunx sv create svelte-sample

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

┌  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 も出力してくれてますね。(この記事残す意味あるのか...?)

１回起動してみる

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

bun --bun run dev

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

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 の追加

   bun add -D svelte-adapter-bun
   

2. svelte.config.js の修正

   // 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;
   

ビルド

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

bun --bun run build

今度は正常にビルドされました。

> Using svelte-adapter-bun
  ✔ Start server with: bun ./build/index.js
  ✔ done

起動してみます。

bun ./build/index.js
#Listening on 0.0.0.0:3000

オプション指定していないと変なアドレスで起動していますが、無事にビルドした資材も起動できています。

終わり

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