2024年1月7日時点でのSupabase + ReactのチュートリアルをTypeScriptでやる

• Supabaseのアカウントは作成済み
• Node.js v20.9.0
• チュートリアルにはReactのプロジェクトを作る手順があるが自作テンプレートの上に実装する
• チュートリアルはJavaScriptだがTypeScriptを使う

Project setup

Create a project

アカウントを作成したばかりなので何もない状態からのスタート。
New Projectをクリック。

プロジェクトお好みの設定にしたらCreate new projectをクリック。

作成後、プロジェクトの画面に遷移しますがセットアップ中の表示になると思われる。
1分ほど待つとセットアップが終了し以下のような表示になった。

Set up the database schema

データベースを作成するためにSQL Editorを開く。サイドメニューの上から3つ目のアイコンをクリックするか、チュートリアルにあるリンクをクリックすることで開くことができる。開いたらQuickstartsをクリック。

User Management Starterをクリック。

RunをクリックしてSQLを実行。

Resultsに「Success. Norows returned」と表示されたら成功。

Get the API Keys

API Keyを確認します。Homeの真ん中当たりを見るか、チュートリアルにあるリンクをクリックすることで確認することができる。
チュートリアルではこのタイミングに組み込まれているが、後々アプリを作るときに使うのでその時に確認すればいい気がする。

Building the app

Initialize a React app

チュートリアルでは以下のコマンドでプロジェクトを作成することになっているが、自分は自作テンプレートの上に作っていく。

npm create vite@latest supabase-react -- --template react
cd supabase-react

supabase-jsをインストール。

npm install @supabase/supabase-js

envファイルにプロジェクトURLとAPI Keyを追加。
チュートリアル通り.env.localを作り保。

VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

src/supabaseClient.tsでenvファイルに追加したプロジェクトURLとAPI Keyを使ってSupabaseクライアントの初期化を定義。

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

以降はチュートリアルに書かれているコードをコピペしてTypeScriptに直していく作業になった。チュートリアルのコードはなるべくそのままにTypeScriptに書き直して無事動かすことに成功。リポジトリを作ってコミットしたのでコードはリポジトリ参照。

Bonus: Profile photos

とりあえずコピペしてみたけどうまく動いてないっぽい。仕組みや言語への理解が浅すぎて原因を理解するのに時間がかかりそうなのでので、一旦今回は置いといて出直すことにする。