How to use Supabase with SvelteKit?

 

Step 1: Set up a new SvelteKit project

 

First, ensure you have Node.js and npm installed. Then create a new SvelteKit project by opening your terminal and running:

npm init svelte@next my-supabase-sveltekit-app

Navigate into the project directory:

cd my-supabase-sveltekit-app

Install the necessary dependencies:

npm install

 

Step 2: Add Supabase to your project

 

Install the Supabase JavaScript client library:

npm install @supabase/supabase-js

Now, you have Supabase available in your SvelteKit project.

 

Step 3: Set up Supabase credentials

 

Create a new file in the root of your project called .env. This file will be used to store your Supabase credentials:

VITE_SUPABASE_URL='your-supabase-url'
VITE_SUPABASE_ANON\_KEY='your-supabase-anon-key'

Replace 'your-supabase-url' and 'your-supabase-anon-key' with the credentials from your Supabase dashboard under the "API" settings.

 

Step 4: Initialize Supabase in your project

 

Create a new file called supabaseClient.js in the src/lib directory with the following content:

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

This file initializes the Supabase client using the environment variables you set in the .env file.

 

Step 5: Use Supabase in a Svelte component

 

Now that Supabase is initialized, you can use it in any Svelte component. For example, to fetch data from a table:

Create a new Svelte file in the src/routes directory, named index.svelte:

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

  let data = [];

  const fetchData = async () => {
    const { data: items, error } = await supabase
      .from('your-table-name')
      .select('\*');

    if (error) {
      console.error(error);
    } else {
      data = items;
    }
  };

  fetchData();
</script>

<style>
  /_ Add your styles here _/
</style>

<main>
  <h1>Supabase Data</h1>
  <ul>
    {#each data as item}
      <li>{item.name}</li>
    {/each}
  </ul>
</main>

Make sure to replace 'your-table-name' with the actual table name from your Supabase database.

 

Step 6: Running Your Application

 

To see your SvelteKit and Supabase app in action, start the development server:

npm run dev

Open your browser and navigate to the provided URL, usually http://localhost:3000, to view your application.

 

This will give you a starting point to work with Supabase in a SvelteKit app, allowing you to perform operations such as reading data from your Supabase database.