SvelteKit with Vercel and Supabase

jdwright

Jonathan D. Wright

Posted on November 11, 2022

SvelteKit with Vercel and Supabase

I've been learning how to create SvelteKit apps with Vercel and Supabase, and although the Supabase docs are great, there's a couple gotchas. If you follow the Supabase Quickstart for SvelteKit, it starts by asking you to create a SvelteKit Skeleton Project. It says you don't need typescript, which is true in general, but the example files in the quickstart do use typescript. So to start off as smoothly as possible, you should choose Yes, using Typescript syntax when creating the SveltkeKit app.

The most important gotcha is in creating src/lib/supabaseClient.ts, which according to the quickstart should be

import { createClient } from '@supabase/auth-helpers-sveltekit'
import { env } from '$env/dynamic/public'

export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
Enter fullscreen mode Exit fullscreen mode

My experience was this worked locally but not in production, and I couldn't definitively determine why. I believe it has to do with server side rendering working differently in the two environments. You get a supabaseUrl is required error, and there are various reports of problems around this scenario online. Some of the solutions seems to be red herrings for this exact configuration, like using .env.local rather than .env, or prefixing the environment variables with NEXT_, which don't apply to SvelteKit. I got it working with the following supabaseClient.ts

import { createClient } from '@supabase/auth-helpers-sveltekit'
import {PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY} from '$env/static/public'

export const supabaseClient = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY)
Enter fullscreen mode Exit fullscreen mode

It's not clear why the server side version is necessary; it may have to do with the build process, and something that needs to be done differently with Vercel. Note that I also had to add these two environment variables to the Vercel settings. That may be fairly obvious, but still worth noting when just following the Supabase quickstart guide.

💖 💪 🙅 🚩
jdwright
Jonathan D. Wright

Posted on November 11, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

SvelteKit with Vercel and Supabase
sveltekit SvelteKit with Vercel and Supabase

November 11, 2022