Skip to content

sveltekit.mdx

Latest commit

 

History

History
157 lines (109 loc) · 4.15 KB

sveltekit.mdx

File metadata and controls

157 lines (109 loc) · 4.15 KB
Raw
title Use Supabase with SvelteKit
subtitle Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.
breadcrumb Framework Quickstarts

<$Partial path="quickstart_db_setup.mdx" />

3. Create a SvelteKit app

Create a SvelteKit app using the sv CLI.

npx sv create my-app

4. Set up AI tooling (optional)

<$Partial path="quickstart_ai_tooling.mdx" />

5. 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.

cd my-app && npm install @supabase/supabase-js

6. Declare Supabase environment variables

Create a .env file at the root of your project and populate with your Supabase connection variables that you can get from the helper below, or from the project Connect panel:

Open Connect panel 
PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>

<$Partial path="api_settings.mdx" variables={{ "framework": "sveltekit", "tab": "frameworks" }} />

7. 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:

<$CodeTabs>

import { createClient } from '@supabase/supabase-js'
import { PUBLIC_SUPABASE_PUBLISHABLE_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'

export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY)
import { createClient } from '@supabase/supabase-js'
import { PUBLIC_SUPABASE_PUBLISHABLE_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'

export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY)

</$CodeTabs>

8. Query data from the app

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

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

<$CodeTabs>

import { supabase } from '$lib/supabaseClient'

export async function load() {
  const { data, error } = await supabase.from('instruments').select()

  if (error) {
    console.error('Error loading instruments:', error.message)
    return { instruments: [], error: error.message }
  }

  return {
    instruments: data ?? [],
    error: null,
  }
}
import { supabase } from '$lib/supabaseClient'

import type { PageServerLoad } from './$types'

type Instrument = {
  id: number
  name: string
}

export const load: PageServerLoad = async () => {
  const { data, error } = await supabase.from('instruments').select<'*', Instrument>()

  if (error) {
    console.error('Error loading instruments:', error.message)
    return { instruments: [], error: error.message }
  }

  return {
    instruments: data ?? [],
    error: null,
  }
}

</$CodeTabs>

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

<script>
  let { data } = $props();
</script>

{#if data.error}
  <p>Error loading instruments: {data.error}</p>
{:else}
  <ul>
    {#each data.instruments as instrument}
      <li>{instrument.name}</li>
    {/each}
  </ul>
{/if}

9. Start the app

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

npm run dev

<$Partial path="quickstart_going_to_production.mdx" />

Next steps