オレオレ Sveltekit セットアップ

さくっと Sveltekit アプリを立ち上げたいときのオレオレ手順書。UI framework はデザインにこだわりないので、とりあえず Skeleton.dev (以下 Skeleton) をずっと使い続けてる。

DISCLAIMER: 以下のコードは2024年8月のものです。最新版は各サイトを確認してね。

Skeleton が CLI を提供していて、これで Skeleton の入った Sveltekit アプリが立ち上げられる。

npm create skeleton-app@latest my-skeleton-app
    - Enable Typescript when prompted (recommended)
cd my-skeleton-app

Tailwind に限らずいつも CSS の書く順番に迷うので、Tailwind 用の Prettier plugin を入れて Cmd+S を押したらクラス名をソートしてくれるようにする。

npm install -D prettier prettier-plugin-tailwindcss

あとからアイコンを変えたいのでとりあえず iconify を入れている。Svelte でも Sveltekit でも同じパッケージで OK。

npm install --save-dev @iconify/svelte

(Cloudflare x GitHub integration の設定)

Cloudflare adapter をインストールして main branch に push しておく。

npm i -D @sveltejs/adapter-cloudflare

Cloudflare では Pages から新しい project を作成して、Sveltekit preset を選べばよしなに設定してくれる。Sveltekit アプリが subdirectory にあったり、 pnpm を使っている場合はこんな感じで設定する。

ポイントは2024年6月ごろだと、環境変数に NODE_VERSION を設定しないとなんかコケてた。執筆時、試行錯誤がめんどかったのでとりあえず入れておいたけど、場合によってはいらないかも。