SvelteKit 1.0 with SQLite Tutorial

Follow me:

Support me:

In this tutorial we will build a small music app with Svelte Kit 1.0 and SQLite. I go into detail on how to setup the database connection, how we can load the data on the server and consume it in the frontend. We will create custom routes for each album and make it editable via a form. I go into detail about error pages and last show how we can create an API-Endpoint with Svelte Kit that we can consume from the frontend.

Timestamps:
0:00 Intro
01:10 Setup SvelteKit Project
03:34 Setup SQLite DB Conneciton
13:31 Load Data from the Server
17:31 Improve Page Markup and Styles
20:43 Create Route for Albums
28:51 Error Handling
32:35 Update Album / SvelteKit Form Actions
40:07 Server-Side Search with API-Endpoint

[harvanchik]

I recently heard about how people love SveltKit and wanted to learn how to use it with SQLite. Saw that this video came out 5 days ago and was very happy!

[tuckerhoog]

Sir how does this video only have 628 be mandatory watching before setting up any DB connection to a sveltekit app. Also you use Beekeeper studio so that's cool

[evaristegalois]

change event handler from keyup to input and then the X button will return you to initial page tracks:
<input
type="search"
placeholder="Search..."
class="input mb-5"
style="max-width:80ch"
value={searchTerm}
on:input={handleSearch}/>

...great video by the way, thanks!

[ronaldobicca]

Excellent tutorial that demonstrates the fundamentals of Svelte and SvelteKit in a simple and straightforward way. Congratulations.

[bastienjbn]

Thank you so much ! Been searching for hours how to setup a database for my webapp using Tauri + Sveltekit. Very easy tutorial to follow for a total beginner like me 👍

[jauerboo]

Great tutorial, thank you! I'd love to seem more from you 😊

[jonnyd]

at 16:44 you see how it detects the 'type' of data in pagedata automatically? It is not doing that for me. Is this a special plugin for svelte that you are using or what is this? For better detail: When i type data.tracks in the JSON.stringify() method, it gives a red squiggly line under ".tracks" and says "tracks is not a known member of type {}". It runs just fine. Why is this messed up?

[TelefonSquid]

Great content, just subscribed! Quick Question: When deploying to something other than a standalone node.js app, for example to vercel, is there any way to keep a sqlite db-file on their server that persists through multiple commits? Or how would you approach such a problem?

[sampahemmanuel]

Amazing Video. Thanks so much. It works perfectly on build and also on preview but hosted on Vercel and got the error 'SQLITE_CANTOPEN'. Please any help..?

[rnater]

Where would you deploy this? It won't work on serverless providers like vercel and netlify because of sqlite. Their docs state that too, but I tried anyway on vercel because I want to host my hobby project for free. Can confirm it does not work :(

[leongerencir]

Thank you very much for this tutorial, it helped me quite much!
Could you please tell me how could I implement something like a button to load in the next 50 entries from the database?

[youtubeviewer]

Thanks! (btw, copilot is extremely distracting, not sure how you tolerate it)

[JuanPabloVenuto]

Great tutorial. Thanks for sharing!! Although I'm getting an annoying error: I did the same as you, but tried to use the data in a component (in $lib/components) and then use that component in +page.svelte, but get the following in the latter file: "Property 'data' is missing in type '{}' but required in type '{ data: { tracks: track[]; }; }'.". I'm new to svelte, so probably it is a really dumb thing I don't know of, but it is driving me crazy... Any thoughts? Thanks and sorry for bothering!

[codenaugh]

Is there a specific reason why when you create the database functions you use 'function' type functions, but you use es6 arrow functions elsewhere?

[d]

thanks
would be cool if there was a version with running database on a server

[Ihatmyif]

"Quick and small" ITS 50 MINUTES