Experiments >

Svelte-kit supabase preset

Experiment #1108th April, 2021by Joshua Nussbaum

There’s a handy tool for svelte-kit called svelte-add, which can quickly configure svelte-kit to do different things with presets. ie setup tailwind, bulma, etc

Figured it would be cool to support supabase too. So I created a project to that.


Install svelte-kit:

npm init svelte@next

Configure supabase:

npx svelte-add joshnuss/svelte-supabase

That will add the @supabase/supabase-js npm project, and configure a .env file for you.


In the future it could also bootstrap the data access code.

I think there 3 ways to configure that:

  • Public access: using public key, server-side or client-side.
  • Private access: using private key, only available server-side.
  • Impersonating: using the accessToken of the user, this only works server-side. The access token would need to be first verified via jsonwebtoken.


Full version

// preset.js
import { Preset, color } from 'apply'

Preset.editNodePackages().addDev("@supabase/supabase-js", "^1.8.0").withTitle("Installing `@supabase/supabase-js`")

  .set('VITE_SUPABASE_URL', '<your-supabase-url>')
  .set('VITE_SUPABASE_PUBLIC_KEY', '<your-supabase-public-key>')
  .set('SUPABASE_PRIVATE_KEY', '<your-supabase-private-key>')
  .set('SUPABASE_JWT_SECRET', '<your-supabase-jwt-secret>')

Preset.edit('.gitignore').update(content => {
  if (content.match(/^.env/m)) {
    return content

  return content + ".env\n"

  `Run ${color.magenta("npm install")}, ${color.magenta("pnpm install")}, or ${color.magenta("yarn")} to install dependencies`,
  `Add your supabase keys to your ${color.green('.env')} file`
]).withHeading('Completing setup')
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow