Pengaturan Lokal SvelteKit Supabase Sempurna di Tahun 2025

Selamat datang, pengembang! Anda ingin terjun ke dunia pengembangan web modern dengan tumpukan hebat SvelteKit dan Supabase? Anda berada di tempat yang tepat. Dalam panduan komprehensif ini, kita akan menavigasi lanskap pengaturan lokal SvelteKit dan Supabase yang terus berkembang pada tahun 2025. Kami akan menggali praktik terbaik, tip pro, dan solusi pemecahan masalah yang umum untuk memastikan pengalaman pengembangan yang mulus.

Mengapa SvelteKit dan Supabase?

Sebelum kita masuk ke detail teknis, mari kita tentukan mengapa kombinasi ini sangat kuat:

1. SvelteKit: Kerangka kerja web generasi berikutnya yang memungkinkan Anda membangun aplikasi yang sangat cepat dengan pengalaman pengembang yang luar biasa. Pendekatannya yang berbasis kompiler menghasilkan ukuran bundel yang lebih kecil dan kinerja yang lebih baik dibandingkan dengan kerangka kerja berbasis runtime tradisional.
2. Supabase: Alternatif sumber terbuka untuk Firebase yang menyediakan semua yang Anda butuhkan untuk memulai dan membangun aplikasi Anda. Termasuk database PostgreSQL, otentikasi, penyimpanan, fungsi, dan API real-time.

Bersama-sama, SvelteKit dan Supabase menawarkan pengalaman pengembangan yang sangat baik untuk membangun aplikasi web modern yang cepat, terukur, dan aman. Dengan SvelteKit Anda mendapatkan performa dan kelincahan, dan dengan Supabase Anda mendapatkan infrastruktur back-end lengkap tanpa memerlukan kode backend yang ekstensif.

Prasyarat

Sebelum kita mulai, pastikan Anda memiliki hal berikut yang terinstal di sistem Anda:

1. Node.js (versi 20 atau lebih tinggi): SvelteKit memerlukan Node.js untuk menjalankan alat build dan server pengembangan.
2. npm atau pnpm atau yarn: Manajer paket untuk menginstal dependensi. pnpm direkomendasikan untuk kecepatan dan efisiensi ruang disk.
3. Docker (opsional, tetapi sangat disarankan): Untuk menjalankan Supabase secara lokal menggunakan Docker Compose. Ini memastikan lingkungan yang konsisten dan mudah direproduksi.
4. Visual Studio Code (VS Code): Editor kode yang direkomendasikan dengan dukungan SvelteKit dan Supabase yang hebat melalui ekstensi.

Langkah 1: Membuat Proyek SvelteKit Baru

Mari kita mulai dengan membuat proyek SvelteKit baru. Buka terminal Anda dan jalankan perintah berikut:

npm create svelte@latest my-svelte-supabase-app
  cd my-svelte-supabase-app
  npm install
  npm run dev
  

Ini akan membuat proyek SvelteKit baru bernama “my-svelte-supabase-app”, menavigasi ke direktori tersebut, menginstal dependensi, dan memulai server pengembangan. Buka http://localhost:5173 di browser Anda untuk melihat aplikasi SvelteKit Anda yang berjalan.

Menggunakan pnpm:

pnpm create svelte@latest my-svelte-supabase-app
  cd my-svelte-supabase-app
  pnpm install
  pnpm run dev
  

Langkah 2: Menyiapkan Supabase Secara Lokal dengan Docker

Cara termudah untuk menyiapkan Supabase secara lokal adalah dengan menggunakan Docker. Jika Anda belum menginstal Docker, unduh dan instal dari situs web Docker.

1. Instal Supabase CLI:

npm install -g supabase
    

2. Inisialisasi Supabase di direktori proyek Anda:

supabase init
    

Ini akan membuat direktori `supabase` di proyek Anda.

3. Mulai Supabase menggunakan Docker:

supabase start
    

Perintah ini akan mengunduh dan memulai semua kontainer Docker yang diperlukan untuk Supabase, termasuk database PostgreSQL, server otentikasi, penyimpanan objek, dan lainnya. Ini mungkin membutuhkan beberapa menit untuk dijalankan pertama kali saat ia mengunduh gambar-gambar tersebut.

4. Dapatkan URL dan kunci anon: Setelah Supabase dimulai, CLI akan menampilkan URL dan kunci anon Anda. Simpan nilai-nilai ini, karena kita akan membutuhkannya nanti. Mereka akan terlihat seperti ini:

      supabase:   Local development setup is running.

        API URL:       http://localhost:54321
        GraphQL URL:   http://localhost:54321/graphql/v1
        anon key:      eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoic2VydmljZV9yb2xlIn0.WJalx_0E65-x9mrs2x7o2sbq00000000000000000
        service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoic2VydmljZV9yb2xlIn0.0000000000000000000000000000000000000000000000000000000000000000

      To stop the local setup, run supabase stop
    

Langkah 3: Menginstal Pustaka Klien Supabase JavaScript

Untuk berinteraksi dengan Supabase dari aplikasi SvelteKit Anda, Anda perlu menginstal pustaka klien Supabase JavaScript:

npm install @supabase/supabase-js
  

atau

pnpm install @supabase/supabase-js
  

Langkah 4: Mengonfigurasi Supabase di SvelteKit

Buat file `.env` di direktori root proyek Anda (jika belum ada) dan tambahkan variabel lingkungan berikut, mengganti placeholder dengan URL dan kunci anon yang sebenarnya dari keluaran `supabase start`:

    VITE_SUPABASE_URL=http://localhost:54321
    VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoic2VydmljZV9yb2xlIn0.WJalx_0E65-x9mrs2x7o2sbq00000000000000000
  

Penting: Jangan pernah menyimpan kunci API Anda langsung di kode Anda, terutama dalam lingkungan produksi. Selalu gunakan variabel lingkungan.

Sekarang, buat file `supabaseClient.js` (atau `supabaseClient.ts` jika Anda menggunakan TypeScript) di direktori `src/lib`:

    // src/lib/supabaseClient.js
    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)
  

File ini menginisialisasi pustaka klien Supabase dengan URL dan kunci anon Anda, dan mengekspor instance `supabase` sehingga Anda dapat menggunakannya di seluruh aplikasi Anda.

Jika Anda menggunakan TypeScript, file `supabaseClient.ts` akan terlihat seperti ini:

    // src/lib/supabaseClient.ts
    import { createClient } from '@supabase/supabase-js'
    import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'

    const supabaseUrl = PUBLIC_SUPABASE_URL
    const supabaseAnonKey = PUBLIC_SUPABASE_ANON_KEY

    export const supabase = createClient(supabaseUrl, supabaseAnonKey)
  

Pastikan bahwa variabel lingkungan Anda diawali dengan `PUBLIC_` agar dapat diakses di browser. Anda juga harus memperbarui file `.env` Anda untuk mencerminkan perubahan ini:

    PUBLIC_SUPABASE_URL=http://localhost:54321
    PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoic2VydmljZV9yb2xlIn0.WJalx_0E65-x9mrs2x7o2sbq00000000000000000
  

Langkah 5: Menggunakan Supabase di Komponen SvelteKit Anda

Sekarang, mari kita gunakan Supabase di salah satu komponen SvelteKit Anda. Sebagai contoh, kita akan membuat halaman sederhana yang menampilkan daftar item dari database Supabase Anda.

Pertama, buat tabel di database Supabase Anda. Anda dapat melakukannya menggunakan antarmuka Supabase Studio. Buka http://localhost:54323 di browser Anda (gunakan kata sandi `postgres` jika diminta) dan buat tabel bernama `items` dengan kolom berikut:

• `id` (UUID, Primary Key)
• `name` (text)
• `created_at` (timestamp)

Selanjutnya, masukkan beberapa data contoh ke dalam tabel `items`.

Sekarang, buat file `src/routes/+page.svelte` dengan kode berikut:

    <script>
      import { supabase } from '$lib/supabaseClient';
      import { onMount } from 'svelte';

      let items = [];
      let loading = true;
      let error = null;

      onMount(async () => {
        try {
          const { data, error: dbError } = await supabase
            .from('items')
            .select('*')
            .order('created_at', { ascending: false });

          if (dbError) {
            throw dbError;
          }

          items = data;
        } catch (e) {
          error = e.message;
          console.error('Error fetching items:', e);
        } finally {
          loading = false;
        }
      });
    </script>

    <h1>Items</h1>

    {#if loading}
      <p>Loading...</p>
    {:else if error}
      <p style="color: red;">Error: {error}</p>
    {:else}
      <ul>
        {#each items as item (item.id)}
          <li>{item.name}</li>
        {/each}
      </ul>
    {/if}
  

Kode ini melakukan hal berikut:

1. Mengimpor instance `supabase` dari `src/lib/supabaseClient.js`.
2. Menggunakan fungsi `onMount` Svelte untuk mengambil data dari tabel `items` saat komponen dipasang.
3. Menggunakan Supabase Client untuk meminta data dari database.
4. Menetapkan data yang diambil ke variabel `items`.
5. Menampilkan daftar item di halaman menggunakan blok `{#each}` Svelte.
6. Menangani kesalahan dan menampilkan pesan kesalahan jika ada kesalahan yang terjadi.

Buka http://localhost:5173 di browser Anda. Anda akan melihat daftar item yang diambil dari database Supabase Anda.

Langkah 6: Menangani Otentikasi

Supabase menyediakan sistem otentikasi bawaan yang mudah diintegrasikan ke dalam aplikasi SvelteKit Anda. Mari kita tambahkan otentikasi sederhana ke aplikasi kita.

1. Aktifkan Otentikasi Email di Supabase: Di antarmuka Supabase Studio, buka bagian “Authentication” dan aktifkan penyedia “Email”.
2. Buat Komponen Otentikasi: Buat komponen baru di `src/lib` bernama `Auth.svelte`:

      <script>
        import { supabase } from '$lib/supabaseClient';
        import { goto } from '$app/navigation';
        import { page } from '$app/stores';

        let email = '';
        let password = '';
        let loading = false;
        let error = null;

        async function signUp() {
          loading = true;
          error = null;
          try {
            const { data, error: signUpError } = await supabase.auth.signUp({
              email,
              password,
              options: {
                redirectTo: `${$page.url.origin}/profile`,
              },
            });

            if (signUpError) {
              throw signUpError;
            }

            alert('Periksa email Anda untuk tautan verifikasi.');

          } catch (e) {
            error = e.message;
            console.error('Sign up error:', e);
          } finally {
            loading = false;
          }
        }

        async function signIn() {
          loading = true;
          error = null;
          try {
            const { data, error: signInError } = await supabase.auth.signInWithPassword({
              email,
              password,
            });

            if (signInError) {
              throw signInError;
            }

            goto('/profile');

          } catch (e) {
            error = e.message;
            console.error('Sign in error:', e);
          } finally {
            loading = false;
          }
        }
      </script>

      {#if error}
        <p style="color: red;">Error: {error}</p>
      {/if}

      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" bind:value={email} />
      </div>

      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" bind:value={password} />
      </div>

      <div>
        <button on:click={signUp} disabled={loading}>
          {#if loading}
            Signing Up...
          {:else}
            Sign Up
          {/if}
        </button>
        <button on:click={signIn} disabled={loading}>
          {#if loading}
            Signing In...
          {:else}
            Sign In
          {/if}
        </button>
      </div>
    

Komponen ini menyediakan formulir untuk pengguna untuk mendaftar dan masuk.

3. Buat Halaman Profil: Buat halaman baru di `src/routes/profile/+page.svelte`:

      <script>
        import { supabase } from '$lib/supabaseClient';
        import { onMount } from 'svelte';
        import { goto } from '$app/navigation';

        let session = null;
        let user = null;

        onMount(async () => {
          const { data: { session: initialSession } } = await supabase.auth.getSession()
          session = initialSession
          supabase.auth.onAuthStateChange((_event, _session) => {
            session = _session
          })
        });

        async function signOut() {
          await supabase.auth.signOut();
          goto('/');
        }
      </script>

      {#if session}
        <h1>Profile</h1>
        <p>Welcome, {session.user.email} !</p>
        <button on:click={signOut}>Sign Out</button>
      {:else}
        <p>Not logged in.</p>
      {/if}
    

Halaman ini memeriksa apakah pengguna masuk dan menampilkan informasi profil mereka. Jika pengguna tidak masuk, itu menampilkan pesan yang meminta mereka untuk masuk.

4. Buat Halaman Masuk: Buat halaman baru di `src/routes/+page.svelte` dan gunakan komponen `Auth.svelte`:

      <script>
        import Auth from '$lib/Auth.svelte';
      </script>

      <h1>Welcome!</h1>

      <Auth />
    

Halaman ini menampilkan komponen `Auth.svelte`, yang menyediakan formulir pendaftaran dan masuk.

Sekarang, buka http://localhost:5173 di browser Anda. Anda akan melihat formulir pendaftaran dan masuk. Setelah Anda mendaftar dan masuk, Anda akan dialihkan ke halaman profil Anda.

Langkah 7: Keamanan

Keamanan adalah yang terpenting ketika bekerja dengan database. Supabase menawarkan beberapa fitur keamanan yang dapat Anda manfaatkan untuk melindungi data Anda:

1. Kebijakan Tingkat Baris (RLS): RLS memungkinkan Anda untuk mengontrol akses ke data di database Anda pada tingkat baris. Ini berarti Anda dapat menentukan siapa yang dapat membaca, menulis, dan menghapus data berdasarkan kriteria tertentu.
2. Otentikasi: Seperti yang kita lihat sebelumnya, Supabase menyediakan sistem otentikasi bawaan yang memudahkan untuk mengelola pengguna dan mengautentikasi mereka.
3. Auditing: Supabase mengaudit semua aktivitas database, sehingga Anda dapat melacak siapa yang mengakses data Anda dan kapan.

Pastikan untuk memanfaatkan fitur keamanan ini untuk melindungi data Anda. Khususnya, pelajari tentang Kebijakan Tingkat Baris (RLS) dan bagaimana mereka dapat membantu Anda mengamankan aplikasi Anda. Ini akan menjadi sangat penting saat Anda bergerak melampaui pengaturan prototipe sederhana.

Praktik Terbaik Tambahan untuk Tahun 2025

Seiring berkembangnya pengembangan web, berikut adalah beberapa praktik terbaik tambahan untuk dipertimbangkan pada tahun 2025:

1. TypeScript: Gunakan TypeScript untuk meningkatkan kualitas kode dan kemampuan pemeliharaan Anda. TypeScript menambahkan pengetikan statis ke JavaScript, yang dapat membantu Anda menangkap kesalahan lebih awal dan membuat kode Anda lebih mudah dipahami dan dipelihara.
2. Uji: Tulis pengujian untuk aplikasi Anda untuk memastikan bahwa itu berfungsi dengan benar. Uji dapat membantu Anda menangkap kesalahan lebih awal dan mencegah regresi.
3. Otomatisasi: Otomatiskan proses build, penyebaran, dan pengujian Anda menggunakan alat seperti GitHub Actions atau GitLab CI/CD. Otomatisasi dapat membantu Anda menghemat waktu dan memastikan bahwa aplikasi Anda selalu disebarkan dengan benar.
4. Pemantauan: Pantau aplikasi Anda di produksi untuk memastikan bahwa itu berfungsi dengan benar. Pemantauan dapat membantu Anda mengidentifikasi dan menyelesaikan masalah dengan cepat.
5. GraphQL: Pertimbangkan untuk menggunakan GraphQL sebagai alternatif untuk REST API. GraphQL memungkinkan Anda untuk mengambil hanya data yang Anda butuhkan, yang dapat meningkatkan kinerja aplikasi Anda. Supabase juga mendukung GraphQL API yang dapat Anda manfaatkan.
6. Edge Functions: Gunakan edge functions untuk menjalankan kode lebih dekat ke pengguna Anda. Fungsi edge dapat membantu Anda meningkatkan kinerja aplikasi Anda dengan mengurangi latensi. Supabase mendukung fungsi edge melalui Deno.
7. Server Component (SvelteKit): Manfaatkan server component untuk meningkatkan performa dan SEO. Server component memungkinkan Anda untuk merender komponen di server, yang dapat meningkatkan kinerja dan SEO.

Pemecahan Masalah yang Umum

Berikut adalah beberapa masalah umum yang mungkin Anda temui saat menyiapkan SvelteKit dan Supabase secara lokal, dan cara memperbaikinya:

1. “Koneksi ditolak” atau kesalahan terkait database: Pastikan bahwa Supabase sedang berjalan di Docker dan bahwa Anda telah mengonfigurasi URL dan kunci anon Supabase dengan benar di file `.env` Anda. Periksa apakah port yang digunakan oleh Supabase (biasanya 54321) tidak digunakan oleh proses lain.
2. Masalah otentikasi: Pastikan bahwa Anda telah mengaktifkan penyedia otentikasi yang sesuai di antarmuka Supabase Studio dan bahwa Anda telah mengonfigurasi URL pengalihan dengan benar. Pastikan bahwa Anda menggunakan kunci anon dan URL Supabase yang benar.
3. Variabel lingkungan tidak terdefinisi: Pastikan bahwa Anda telah mengonfigurasi variabel lingkungan dengan benar di file `.env` Anda dan bahwa Anda mengaksesnya dengan benar di kode Anda. Jika Anda menggunakan Vite, pastikan bahwa variabel lingkungan Anda diawali dengan `VITE_` atau `PUBLIC_`.
4. Kesalahan modul tidak ditemukan: Pastikan bahwa Anda telah menginstal semua dependensi yang diperlukan menggunakan `npm install` atau `pnpm install`. Jika Anda masih mengalami kesalahan, coba hapus direktori `node_modules` dan instal ulang dependensi.

Kesimpulan

Selamat! Anda telah berhasil menyiapkan lingkungan pengembangan lokal untuk SvelteKit dan Supabase. Anda sekarang dapat mulai membangun aplikasi web yang kuat dengan tumpukan modern ini. Ingatlah untuk mengikuti praktik terbaik yang dibahas dalam panduan ini untuk memastikan aplikasi Anda aman, terukur, dan mudah dipelihara. Selamat coding!