Learn How SvelteKit Works

[@JoyofCodeDev]

SvelteKit had some routing changes but it works the same.

[@luna_skye_22]

Criminally underrated content, this is beautifully done and just what I needed!

[@JoyofCodeDev]

I'm glad you enjoy it! 😄

[@webmaster246]

It's always like that, cause developers are people and most of people are raiders in terms of source consumption : the will use it and will say no thanks, not mentioning 1 dollar donations . I personally try to say thanks, if I have a spared dollar I will donate it. When it comes about documenting your own stuff, I always give a credits to developers, teachers, when citing their work or knowledge not only for being academic, but showing appreciation in any possible way . Agree with @Sepshun . All playlist about Svelte is a hidden gem, appreciated sharing your knowledge with us @Joy of Code ♥

[@simonnice9030]

I work with Svelte and Sveltekit daily and I can say that this is one of the best videos of the subject. A must see for Svelte developers.

[@JoyofCodeDev]

Thank you! 😄

[@christinefredricksen8743]

That was great, just what I was looking for. I have a better understanding of SvelteKit and a better understanding of web development in general. Many thanks!

[@JoyofCodeDev]

I'm so glad to hear that! 😄

[@lihautan]

this is very detailed walkthrough! oh man..how i wish i've created content like this....

[@JoyofCodeDev]

Thank you! 🙏

[@webmaster246]

@lihautan never too late, but being honest some are better engineers, other are better teachers . I'd say stick to be a good co-engineer of Svelte, Li !

[@Shaparder]

That was really what I needed to understand everything abouts SvelteKit, it should be featured on the official Svelte documentation !!

[@JoyofCodeDev]

I'm glad you liked it! 😄

[@_the_one_1]

Your content is amazing man! Keep it up!

[@JoyofCodeDev]

Thank you! 😄

[@bobbradleybell]

So beautiful content, so well explained. Big thanks for making the svelte community grow.

[@bobbradleybell]

Btw, i saw you making a lot of svelte-sveltekit videos lately, What are your thoughts about the future of svelte?, Enough to beat react?, better than vue?. I'm a UI Engineer focused on Data Viz, for me svelte is the clear winner since i need to make really performant apps, so choosing a compiler like svelte is clearly the best option (in my case).

[@JoyofCodeDev]

I know a lot of people would love to see Svelte at the top but I doubt it's going to reach React but it doesn't have to because Svelte isn't focused on that. I love Svelte because I think it has the best developer experience and I trust the vision Rich Harris has for it since he's wicked smart. These base frameworks aren't important as their meta-frameworks because Next.js is more popular than React and I'm also excited about web frameworks like Remix and SvelteKit. I'm glad you enjoy it!

[@Ryan-ms8bi]

In the Self Setup part， you can set up +page. svelte instead of setting up the index. svelte.

[@andantebass6113]

This is beautiful! I was just wanting to learn more about Sveltekit. You got another sub from me!

[@JoyofCodeDev]

Thank you! 😄

[@wearesherlocked]

I don't usually leave comment but thanks for all of your Svelte coverage, kisses!

[@JoyofCodeDev]

As someone who does the same I appreciate you.

[@AlexanderSuraphel]

Great video as usual 🚀! What is special about your videos is the companion blog posts you make that we can read for reference. If I can ask one unrelated question... Is it possible to create robust APIs with SvelteKit endpoints? What important capability would one forgo instead of using Express or Koa for instance?

[@JoyofCodeDev]

A huge benefit is that your forms have endpoints which is awesome for progressive enhancement - It's great for most situations where you would use a REST API but not if you want to build something real-time using WebSockets because it's not easily supported.

[@AlexanderSuraphel]

@@JoyofCodeDev BTW I looked at the concept of adapters and that all you need to get best of both world. I'm creating adapter for fastify so my sveltekit APIs will have the functionality of fastify. Same type of adapter exists for Express!

[@karolus__]

Maaan, I was waiting for something new from your side, here we go, 1 hour of great content!

[@JoyofCodeDev]

I hope it's worth it 😄

[@FREESTEP_DANCE]

@@JoyofCodeDev Definietely! It was awesome. I also would love to see more in depth view on topics like: error handling (how to pass data to page on redirects, displaying toasts messages if something went well or wrong, etc.) and list/table filtering (text base search, sorting, etc.) Thanks & keep up the good work!

[@BrentMalice]

ur the real hero of kvatch

[@SaidElnaffar]

Another masterpiece from Joy of Code -- Guys, don't forget to visit his blogs in the description above.

[@sharia.design]

Nicely done! Congratulations! 🤩🤩🤩 I wish to know your approach for localizations in SveleteKit :)

[@JoyofCodeDev]

It's something I want to explore!

[@Adi-fw6ou]

helo i have question i am learning javascript what should i learn next? TS or any framework? and if framework then which one? Svelte? btw react is also very famous around but what should i go for? 1 morw question MERN = full stack then is Svelte + Svelte kit = full stack? sorry if i said smth weird bbut i very wrong in english. thank you

[@JoyofCodeDev]

1. Don't "learn" TypeScript but start using it and use my TypeScript videos as reference 2. I would recommend you pick up SvelteKit unless you have a specific reason to learn another framework 3. SvelteKit is a full stack framework because you have your frontend and backend code in one place 4. If you understand what problems frameworks solve you're going to have an easier time learning any framework

[@SRG-Learn-Code]

What a great video idea to explore and expand on a blog post. The post it's awesome (although you've lost me many times, not your fault, I'm noobing around) and it's likenot many people takes time to comprehend the "magic" of svelte.

[@JoyofCodeDev]

Let me know what confuses you!

[@SRG-Learn-Code]

@@JoyofCodeDev Puff, where to start? Everything you explain is correct and interesting, but it's too much to grasp. I use mainly static-adapter, which I guess is SSR were the endpoints are processed during build and then disappears? Sometimes I don't follow when some things happens in the 'server" (with static adapter I guess the server is the machine during build) and when they are visible or accesible in the client. For example, I built a demo using an endpoint that fetched a graphql database, and during build, it took everything I needed from that database, created a json file with that data, rendered all the pages with that data and... the json file remain there, also the query was still in client code. Are shadow endpoints made for that? How do you hide "backend" code to the final user? Those things I still don't understand, I'm trying to get into the adapters but they are bigger than me, like, how would you host firebase but have logic with deno-deploy or vice versa? Too abstract to grasp for me now, thankfully videos like yours helps a lot to learn a bit every day.

[@JoyofCodeDev]

​@@SRG-Learn-Code Thank you for your response! 1. SSR (server-side rendering) builds a page on demand and SSG (static site generation) builds the pages in advance so the main difference is when the work is done and knowing when to use each. 2. You're always using the server if you're using SSR because you need to return the component as HTML and talk to the database from an endpoint. 3. Page endpoints are a way to get data for your page and pass it as props before it's initialized because pages are components. 4. Your backend code isn't visible on the client which makes using secrets secure and you can confirm it if you fetch some data for the page and if you look at the network tab you won't see a fetch request.

[@alexvass]

So, the 'adapters' are there to adapt the svelte-kit to the underlying supporting server (backend) technology? eg. nodejs is supporting the sveltekit app and you need an adapter for nodejs to make this happen?

[@JoyofCodeDev]

Yeah, exactly! There are more JavaScript runtimes and a SvelteKit app is a machine for turning a `Request` into a `Response`.

[@GIOVANNYGARCIAHOLGUIN]

really beautiful channel

[@JoyofCodeDev]

Thank you! 😊

[@HugoDuprez449]

Amazing content ! I’m currently learning express and I see what executing code on a server mean (at least, I think). If I want to deploy my express app, rent a cloud machine. But what does « this is executed on the server » mean in this server side rendering part of the video. Does it mean the Vercel server where my website files are hosted run the function before sending a response ? If it’s the case, why service providers like Vercel don’t charge for this load? Since it seem to be the same as renting a cloud machine to run code on a server ? Thanks a lot for your work !😊

[@JoyofCodeDev]

Take the newsletter example where you have to run a Node.js server constantly because you don't know when someone is going to subscribe - serverless functions only run when you need to meaning it's cheap and Vercel has a generous free tier but there's a limit if you look at vercel.com/pricing.

[@phoneywheeze]

what if I'm using a npm package that I'm only going to use on the backend(endpoints) but it's not necessary for the client. Do I need to add it as dev dependency? if not, how does sveltekit figure to include the package in client or server or both

[@JoyofCodeDev]

That's a good question! You don't have to think about it because it knows what should run on the server based on the imports I would assume. You should declare what needs to be a dependency as such so hosts like Vercel know what packages to install.

[@aestheticallyamazing2003]

Can I ask what mic are you using for the videos, they look so crisp

[@JoyofCodeDev]

I use genesis-zone.com/product/radium-400 that's a cheap USB microphone but it sounds great because I process the audio after which I want to make a video on in the future.

[@DanielRios549]

43:00 OMG, I was getting an error with fetch inside load function and I didn't figure out how to fix, I simply miss the fetch param, I did not know about SvelteKit provided fetch...

[@JoyofCodeDev]

You can learn more about it in the docs kit.svelte.dev/docs/load#input-methods-fetch.

[@ianengelbrecht4773]

Great video, helped me understand a lot more

[@JoyofCodeDev]

I'm glad to hear that! 😄

[@reimdl]

Hi, which theme are you using with Brave?

[@JoyofCodeDev]

I used chrometheme.studio/ to create a custom theme if you want to make your own.

[@reimdl]

@@JoyofCodeDev thank you, I will try it

[@MsShadX]

New to svelte, i should rewatch this a couple times, i just wanna ask i already built a fastapi backend and i wanna learn something new to consume it as a desktop app, i used vuejs/electron in the past, is svelte/electron a good option? And i still don't understand if sveltekit is suitable for my purpose or not.

[@JoyofCodeDev]

You would use Svelte with Electron because SvelteKit is an entire thing and I would look into tauri.app/! 😄

[@MsShadX]

@@JoyofCodeDev thanks. I heard about tauri very briefly, i'll look into it

[@avi12]

Can you make an explainer for the Qwik framework?

[@JoyofCodeDev]

Would you be interested in a series where I explore other frameworks?

[@forno_nicolas]

@@JoyofCodeDev No actually is great have some deeply specialized content

[@EfosaMichael]

You know the drill... like, then watch... you're welcome!

[@JoyofCodeDev]

Thank you! 😄

[@MIMRamees]

but having backend seperated is good right?

[@JoyofCodeDev]

Depends what you're doing! 😄

[@lucklessman3472]

its off topic question but music u mentioned in ur comment section is paid? isnt that free? or u always pay for diff diff music in ur videos

[@JoyofCodeDev]

I wanted people to support the artist but it doesn't seem to exist anymore.

[@mirzapubg5417]

Remix > 😎

[@JoyofCodeDev]

You know I love Remix! 💿

[@AlexanderSuraphel]

Remix is greater than what? :)

[@DanielRios549]

48:23 This is one of the biggest problems of SvelteKit til now, it does not have partial hydration, it gets the HTML from the server and runs everything again in the client, this is too much work, even on production, if you use adapter-static, with all the data in a loop already in the response served from a CDN, SvelteKit will delete that content and run the loop again on the client. I'm holping partial hydration will be added after 1.0