Use Supabase with SvelteKit

Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.

Set up a Supabase project with sample data

Create a new project in the Supabase Dashboard.

After your project is ready, create a table in your Supabase database using the SQL Editor in the Dashboard. Use the following SQL statement to create a countries table with some sample data.

SQL_EDITOR

-- Create the table
CREATE TABLE countries (
 id SERIAL PRIMARY KEY,
 name VARCHAR(255) NOT NULL
);
-- Insert some sample data into the table
INSERT INTO countries (name) VALUES ('United States');
INSERT INTO countries (name) VALUES ('Canada');
INSERT INTO countries (name) VALUES ('Mexico');

Create a SvelteKit app

Create a SvelteKit app using the npm create command.

Terminal

npm create svelte@latest myapp

Install the Supabase client library

The fastest way to get started is to use the supabase-js client library which provides a convenient interface for working with Supabase from a SvelteKit app.

Navigate to the SvelteKit app and install supabase-js.

Terminal

cd myapp && npm install @supabase/supabase-js

Create the Supabase client

Create a /src/lib directory in your SvelteKit app, create a file called supabaseClient.js and add the following code to initialize the Supabase client with your project URL and public API (anon) key:

Project URL

Anon key

src/lib/supabaseClient.js

  import { createClient } from '@supabase/supabase-js'

  export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')

Query data from the app

Use load method to fetch the data server-side and display the query results as a simple list.

Create +page.server.js file in the routes directory with the following code.

src/routes/+page.server.js

  import { supabase } from "$lib/supabaseClient";

  export async function load() {
    const { data } = await supabase.from("countries").select();
    return {
      countries: data ?? [],
    };
  }

Replace the existing content in your +page.svelte file in the routes directory with the following code.

src/routes/+page.svelte

  <script>
    export let data;
  </script>

  <ul>
    {#each data.countries as country}
      <li>{country.name}</li>
    {/each}
  </ul>

Start the app

Start the app and go to http://localhost:5173 in a browser and you should see the list of countries.

Terminal

npm run dev

Next steps

Set up Auth for your app
Insert more data into your database
Upload and serve static files using Storage

Edit this page on GitHub

Use Supabase with SvelteKit

Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.

Set up a Supabase project with sample data

Create a SvelteKit app

Install the Supabase client library

Create the Supabase client

Project URL

Anon key

Query data from the app

Start the app

Next steps#

Next steps