SvelteKit and Supabase Deep Dive
Vložit
- čas přidán 4. 06. 2024
- Today we are going deep into a project build with SvelteKit and Supabase. This video does NOT focus on syntax or anything like that, but is rather a more conceptual breakdown to help you understand all of the things that make this app work. I would love feedback on what you guys think of this style of breakdown, if me writing the code as I go or focusing more on syntax would help please let me know!
PROJECT REPO: github.com/bmdavis419/encelad...
JOIN THE DISCORD: / discord
USEFUL DOCS I HIGHLY RECOMMEND
Sveltekit Routing: kit.svelte.dev/docs/routing
Sveltekit Data Loading: kit.svelte.dev/docs/load
Supabase CLI (VERY IMPORTANT): supabase.com/docs/guides/cli/...
Supabase GitHub Auth: supabase.com/docs/guides/auth...
Supabase & Sveltekit: supabase.com/docs/guides/auth...
my stuff
twitter (X): / benjamin41902
insiderviz: www.insiderviz.com
timestamps
0:00 intro
1:35 client/server discussion
2:55 sveltekit files discussion
14:03 supabase intro
16:15 app intro
18:50 database migrations
25:20 drizzle setup
28:00 auth
36:30 profile creation
39:10 generate image
46:20 image details page
50:30 outro
#sveltejs #supabase #webdev - Věda a technologie
Like I said I would love your thoughts on this format! I apologize this took so long to get out, I have been bed ridden with covid for the last week or so (I was just starting to come down with it while shooting this video lol). Also make sure to join the discord if you have questions, that is the best place for discussion, it is really hard to track back and forth replies in the comments on my end!
Hey there, may I learn why you didn't choose a framework like pocketbase, a lot more concurrency, rps and size capacity?
It's awesome. It's always nice to see when anyone is trying to break down some architecture stuff and tech stack. Always a plenty to learn. It is packed with a lots of info, and delivered in relatively short amount of time. There is a repo with code to follow up for sure. Thank you for putting an effort!
@@greendsnow For me is that PB doesn't offer hosting right away, also I want to learn about edge functions and that is not provided yet. But mainly, pocketbase is not v1 yet. I'll keep an eye on it as I think it's quite promising, but is a smaller project, maybe that's good and in the end it wins me.
I just saw part of the video and then started to check the code in the repo and noticed that the main branch uses prisma, what made you decide to change from drizzle?
Ben: Publishes the first long-form SvelteKit w/commercial-DB tutorial on CZcams and then apologizes about it being late.
Bruh you're golden! No apologies necessary, especially for the zero we're paying you to do this!
Is it really the first lol? Is there really this big of a gap in content for Go/Svelte/Supabase past like “its neat here is a todo app”
I haven't seen any others, but that's just me. Certainly nowhere nearly as much out there as there is for React...
@Huntabyte & @JamesQQuick come to my mind in this regard, not with GO, but there is not much of it in this video. In any case, SB has made some changes and it is always nice to see and up to date video. Apart from that, I think is awesome to watch the thinking behind instead of just the implementation.
This is a good format honestly, it’s hard to find information about something and not have it be a step step hand hold of writing out code with no explanation
Please make more
longer videos.
Just make it.
Your way of explaining is awesome.
real and true
I was earlier using drizzle or prisma for all thing database .. but in the end, I moved to using supabase migration approach and supabase libraries with typesafe generation.. Less things to handle, and follows RLS. I watched few videos where they compared performance between different orms .. supabase was the faster than prisma. so went supabase route. Overall great video.. Keep going
You're one of my favorites to just listen to your take on all these developer topics
Been looking forward to this since your last supabase video, super excited to start watching!
Went through the sveltekit tutorial these past few days and I have to say this is the absolute BEST complimentary material for learning the ins and outs of this meta-framework. Keep up the good work!
seems like a pretty straight forward approach to web dev
surely a lot less code compared to react
thanks for the video and insights!
Awesome stuff! This is a great format when looking to see some more advanced examples of code instead of just beginner tutorials, without having to spend like 5 hours on a tutorial. Really loved it! :)
Such an awesome video. I've been enjoying all of your SvelteKit/Supabase vids. You really helped me solve a few issues I was hitting with oAuth with Google and local development. Thanks so much.
Thank you!
Subscribed. Love this format, looking forward for more.
Amazing content, much appreciated!
Really great video and information, format was excellent, thanks so much for all the time you spent on this very detailed video 💯😃👍
Perfect timing! I’m looking at this stack rn
It's really, really, good
Thank you for the great video. It helps me so much on coding with SvelteKit. :)
Really helpful video Ben!
Fun little easter egg because you mentioned it at 35:36.
5173 is Leet speak for SITE.
Love your videos ! I also struggle choosing how to run my migrations. I agree with you on the single source of truth, which is the raw sql migration ! What i end up doing is still use my "orm" (in my case kysely) to run the migations but with a raw sql which works pretty well. You have the power of your migrations per env and with ups and downs and the raw sql file
Loved it, thanks for doing this but still would prefer rather step by step as I like to type it out and follow along.
Hey Ben, just found your channel and I really like the way you explain things! I've been enjoying the Next 13/14 + Supabase stack recently and I'm curious why you prefer svelte over other frameworks like Next?
Great stuff, subscribed!
Great work. Kudos
Thanks for the tut. A bit of an architecture related question. For your insiderviz startup, what do you use as the backend db for the analytics part, is it still supabase/postgres or supabase is used only for auth, login, stripe subscriptions? I understand it's a tick unrelated to this video, but since you are discussing supabase I want to understand the use case for it. Is it for all aspects of a data heavy app or postgres would be slow for that and therefore is only used for auth and subscription? and for data and analytics part you use duckdb or clickhouse or some other fast db? Thanks
FYI, FWIW, I like this presentation style personally much better than someone just typing out code because and talking over it superficially because I like to understand things and this makes understanding easier and give really good explanations of what is happening. With the code examples, the explanation quality varies. For instance, Corey Schafer is super good at explaining and typing at the same time because he always takes a rest and explains what he's doing and why. That said, most people are not good at it, because they assume understanding on the viewer's end and go quickly/superficially but somebody coming at a video like this usually lack the understanding, so explaining is kinda the point. This is the first video of you that I watch and so far, so good, this one was excellent!
Love this. Thank you so much. Have you done a video on why you switched out Drizzle for Prisma?
I actually have an updated version of this video coming out sometime this week which has a ton of updates to how this is done, as for drizzle I'm not sure if I have a video, the main reason for the switch is because its lighter weight and closer to SQL
cant believe i'm just seeing this. 💯
Going to have a new version soon!
Thank you for this great video. I like both the content and the format. As a kinda newbie in it all, I'm still missing the reason to use ORM over supabase-js. Is that just your preference or there's something more behind that decision.
Cheers.
U can for sure use the supabase-js instead, I personally just prefer drizzle because it’s what I use regardless of database and it’s closer to SQL
As a non-beginner, this is a really useful format since I don't need to be taught how to write code (I can just check the docs for that), I need help understanding how everything fits together (something that, most of the time, is either not explained in the docs, or that is explained but difficult to grasp from it without seeing into an actual project).
Great video Ben! Thank you for posting! I also love your vscode setup. Would you mind sharing the names of both the theme and the editor font you are using. If I am not mistaken, the terminal seems to be using Jetbrains Mono. Please correct me if it is not. 🙏🏼
Hi Ben. Thanks for the great video! I have a question about the login route (around the 28:50 mark). There in page.server.ts you are calling the getSession function coming from your hook to get the session, but you are also calling getSession in layout.server.ts which would then propagate down to the login route. So my question is are they really both necessary, or are we now getting the same session from Supabase twice for a single route. Wouldn’t it make more sense to get the session just once in the layout (or in hooks). Thanks!
The getSession in login/page.server.ts is only there to redirect the user to the profiles page if they are login. So for that use case, yes it is necessary. Notice how he did not return that session in that file, since the session is already being returned in layout.server.ts to be accessible to all the +page.svelte routes
Hope that made sense if not lmk
@@edwardspresume thank you! I now see the difference. I guess another part of my confusion came from thinking that the page.server.ts would automatically have access to data from parent server load functions (layout.server.ts), but I now see that is not the case to prevent waterfalls (unless you call await parent())
Nice one thanks.
I personally definitely prefer to see the process of the build. Ideally, the first time you ever build it, so I can see the mistakes you make on the way. That said, I realize there's a lot of that format so definitely understand if there is an audience for this
great video. btw, i hope you can do step by step as to see your thinking process when you actually implementing those things
Thanks! Definitely considering doing a live uncut version of me actually building out these examples for you guys to watch, then making a full deep dive like this
@@bmdavis419 lovely, hope you feeling well and do the live soon xD
at 22:00, "locking things with RLS so that everyone is just blocked 💥🔨", supabase exposes all tables in the public schema to the api, if you dont want that, create a new schema and it wont be exposed.
Great call!
THANKS MAAAAAN!!!
I'm confused about how supabase auth works... I know it just works, but I would like to learn how/why does those things. Can the client create a fake session? Do you have to recreate the supabase client in every request or can/should you store it? Would be better to have a server only auth?
I'm trying to list a bunch of image files from the bucket but it wont work. Do you know if its possible?
Hey just noticed your font looks really cool. Would you mind saying what font is it? 😅
Jetbrains mono nerd font!
@@bmdavis419 thank you so much ❤️
Question: Where did the migration file in the migrations folder come from? The name suggests it was automatically created, but I wanted to check.
Nevermind! I figured it out. I'm new to supabase so still learning. Awesome video so far, thanks!
hi ben, what do you use to implement search on a system, whether be it in ecommerce, docs or internal support. Am currently evaluating using an approach that utilizes embeddings and all the ai hype, do you have any advice for this or give me your opinion. Thanks for the content, you are looking fabulous! 😃
I actually don’t have any real experience with this, I’ve always used a service for my search (algolia or mongodb search)
@@bmdavis419 thanks 🤝
Not Ben but I've shipped algolia to prod. Create dev experience and the algolia recommended system is very very good. It's what makes algolia stay at the top. An opensource self hostable equivalent to algolia is meilisearch. Xata is also worth mentioning as it comes with postgres and elasticsearch out of the box
@@khalilbessaad5553 algolia becomes expensive once you become a serious app though it does understand the semantics behind the meaning of a word/sentence, meilisearch doesn't understand semantics but they are working on it. Though i've already found a solution that uses the CLIP AI model from openAi which is able to understand text but also most importantly images where you can have a flow like image -> vectorize -> use the vector to search through a vector database using cosine similarity, i found a good solution literally today but i still have to understand the system somewhat indepth so that I'm confident when it goes to prod, anyways Thanks alot for your feedback 😊
@bmdavis419 Thanks A LOT for your videos, you save me hours of very painful learning (now it's just painful 😅)
EdgeDB 4 arrives November 1st, I dream you'll play with it and Svelte/Kit !
Thanks
I keep getting comments about EdgeDB, never used it, but if I get a slow time I'll take a look
This is great thanks. Why not just remove drizzle?
Hey! Is there a specific reason you are not using explicit foreign keys and instead opting for relations?
Nope, either way works!
this was very good and useful but you did tend to assert that that's how sveltekit works in places, rather than explaining the underlying client server distinctions. that matters because Supabase have since changed to SSR Auth and those server and client differences are (for me) now even harder to follow and I fear your video hasn't fully equipped me for that
Yep I just saw that that change happened, will make a note of it!
supabase.com/docs/guides/auth/server-side/migrating-to-ssr-from-auth-helpers?framework=sveltekit
I've also been wondering about this as well
Great video! When you've decided on your migrations approach, could you pin/post somewhere. Would be interested to see what you settled on!
Working on it with the drizzle team now, sounds like there may be something far better in the future! :)
@@bmdavis419 I would like it vanilla. I'm still on the fence with orms.
26:16 I thought you were going to say that you didn't use drizzle for migrations because drizzle doesn't support RLS, triggers, functions.
(or do they?)
So good! but in the repo there isnt any drizzle, just prisma.
Its in a separate branch!
I need more of this. Prod concepts are hard to understand and it's hard to find the ressources for it.
Yea I rarely see stuff at this level, it’s usually todo apps and hello worlds
@@bmdavis419 Exactly. And then you find us struggling for months to implement supabase auth in Astro with no guidance lol
At least now this video could be a reference we could use
The thing I really dislike about file based routing is you end up with dozens upon dozens of “page.svelte” or “index.ts” files. You have to know/see the whole file path in order to get the correct file. In a large project it makes fuzzy finding the right file kind of annoying.
Yea u have to get used to looking for folders not files and looking at paths not files, it definitely can get weird but it seems like what most frameworks are doing these days
I think for complex saas and enterprise apps you should decouple sveltekit and the server API because it will be really chaotic to manage a really business logic heavy API inside sveltekit. Intermingling all those files Will be a nightmare
lessgo!!!
you censored your email but it's still visible during some transitions :P
shhhh
Good video, but you were blocking part of the screen
5173 .......... 'VITE' 👍
Ohhhh that’s why lol
Didnt watch it all. Looks very similar in flutter development. We use go_router, auto_route libraries and it looks sort of similar here.
50 min. Paused video. Make coffee. Play video. Like video. Life is sweet
All and all, it's just postgres
it's just postgres
I don't see any benefit of using Drizzle instead of Supabase SDK. You loose all of the great benefits like RLS and etc. And you do also have to manually rewrite the types to Drizzle format. Seems like extra unnecessary layer to me.
its personal preference, I prefer doing it like this as I'm used to a separate backend, but you can absolutely just leverage the SDK
@@bmdavis419 Thanks, just wanted to know if there was certain reason for it. But regarding to the format of the video, I think it's a great way to understand the flow and process. And I think a step by step after this would nail it! So first - What and Why (like this video), second - how (step by step).
Keep it going!
I keep getting type error getSession is not a function from +layout.server.ts. Totally have no idea why it happens.