はじめに
SvelteKitは昨年12月にバージョン1.0に到達しました！
今後、Webアプリケーションを作っていく選択肢の1つとしてとSvelteKitを使って開発していくというのはありだと思っています。
SvelteKitにPrismaとSupabaseを組み合わせた開発というのは鉄板の構成の1つになりそうなのでセットアップ方法を紹介します！
SvelteKitの初期設定
SvelteKitの新規プロジェクトをCLIを使って作成します。
$ npm create svelte@latest sveltekit-prisma-supabase
今回はTypeScriptを使用する前提で記事を書いていきますのでTypeScriptのみ選択しました。
他に、ESLint,Prettier,Playwright,Vitestを使用するか選択することができます！
今回の記事では言及しませんが、使用したい場合は選択しましょう。
create-svelte version 2.3.1
Welcome to SvelteKit!
✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No
✔ Add Prettier for code formatting? … No
✔ Add Playwright for browser testing? … No
✔ Add Vitest for unit testing? … No
$ cd sveltekit-prisma-supabase
$ npm install
$ npm run dev
http://localhost:5173/にアクセスし、Welcome to SvelteKitの画面が表示されたらSvelteKitのセットアップは完了です。
Supabaseの初期設定
Supabaseを利用するにはGitHubアカウントでログインするか、アカウント登録が必要なのでどちらかを選んでログインしましょう。
new projectでプロジェクトを作成します。
プロジェクトの名前とデータベースのパスワードを設定して、リージョンは特別理由がない限りは、Northeast Asia(Tokyo)を選択するといいと思います。 料金プランはFreeを選択します。
シャドウデータベースを作成する
この問題はissueが立っているので今後解消されて、シャドウデータベースを作成する必要がなくなる可能性があります。
Prismaのマイグレーションはpostgresデータベースを削除しようする影響で、Supabaseデータベースとの競合を引き起こす可能性があります。その回避策として今回は、Prisma Shadow Databasesを使用する為、シャドウデータベースを作成します。
Settings -> Database -> Connection String -> PSQLの文字列をコピーして、psql CLIを使って接続します。
$ psql -h db.[YOUR-PROJECT-REF].supabase.co -p 5432 -d postgres -U postgres
接続できたら、データベースを作成します。
postgres=> CREATE DATABASE postgres_shadow;
postgres=> exit;
これでシャドウデータベースの作成は完了です。
Prismaの初期設定
まずは必要なパッケージをインストールします。
$ npm install prisma --save-dev
$ npm install @prisma/client
次に、prismaのセットアップをします。
$ npx prisma init
実行するとprisma/schema.prismaと.envが自動的に作成されると思いますので、次はこれらのファイルを編集していきます。
DBのマイグレーション
prisma/schema.prismaに以下のようなスキーマを定義します。
モデルは今回適当に用意したものを使います。
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
.envは以下のように定義します。
[YOUR-PASSWORD]と[YOUR-PROJECT-REF]は適宜書き換えてください。
DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"
SHADOW_DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres_shadow"
最後にPrismaのマイグレーションコマンドを実行します。
$ npx prisma migrate dev --name init
Supabaseのダッシュボードの Database -> Tablesを確認するとスキーマ定義どおりにテーブルが作成されているのがわかります。
SvelteKit + Prismaを使ってデータ取得、表示
src/lib/server/prisma.tsを作成します。
SvelteKitではファイル名に.serverをつけるかsrc/lib/server内にファイルを置くことでサーバーでのみ実行できるように制限することができます。
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export default prisma;
まずはデータを取得します。src/routes/+page.server.tsを作成します。
PrismaのfindMany()を使ってuserテーブルから複数のレコードを取得して返します。
import prisma from '$lib/server/prisma';
import type { PageServerLoad } from './$types';
export const load = (async () => {
return {
users: await prisma.user.findMany()
};
}) satisfies PageServerLoad;
次に、このままだとDBのuserテーブルが空で何も表示できないのでSupabaseのTable Editor -> Insert rowからいくつかデータを追加しておきましょう。
最後に出力側です。src/routes/+page.svelteを編集します。
+page.server.tsで取得して返したデータがdataに格納されているのでdataからusersを取り出して表示させてみます。
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
const { users } = data;
</script>
<ul>
{#each users as user}
<li>id: {user.id}</li>
<li>email: {user.email}</li>
<li>name: {user.name}</li>
{/each}
</ul>
SupabaseのDBに接続し、SvelteKit + Prismaを使ってデータを取得、表示することができました！
おわりに
すごく簡単にSvelteKit + Prisma + Supabaseで開発できる環境をセットアップすることができました！
これからSvelteKitで開発してみたいよという方は是非参考にしてみてください！