Experiments >

Svelte-kit supabase preset: boilerplate

Experiment #1138th April, 2021by Joshua Nussbaum

Continuing with the supabase preset for svelte-kit, figured it would be good to add a boilerplate connection.

This is done by calling createClient(url, key), where url and key come from the .env file.

So now when running:

npx svelte-add joshnuss/svelte-supabase

It adds a file src/lib/db.js, which looks like this:

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

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

export default suspabase

The any client code can import it:

<script>
  import db from '$lib/db'

  async function submit() {
    await db
      .from('products')
      .update({price: 1000000})
      .match({id: 1})
  }
</script>

Code

joshnuss/svelte-supabase@1ae9363

view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow