Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes)

Learn how routes work in SvelteKit and how to create pages, layouts and dynamic routes and why nested routes are awesome.
👉️ Support
▶️ KZread Membership
youtube.com/@joyofcodedev/join
🔴 Patreon
/ joyofcode
👉️ Links:
SvelteKit Routing
🔗 joyofcode.xyz/sveltekit-routing
👉️ Uses:
🔗 joyofcode.xyz/uses
👉️ Socials:
🐦️ / joyofcodedev
💬 / discord
🔖 Timestamps
0:00 Intro
0:11 Requirements
1:59 Project Setup
3:31 Pages
14:04 Layout
18:31 The Power of Nested Routes
27:38 Dynamic Routes
29:42 Advanced Routing
29:45 Multiple Route Parameters
31:30 Optional Parameters
32:51 Rest Parameters
35:05 Matching Parameters
38:27 Outro
#sveltekit #joyofcode

Пікірлер: 103

  • @jrhager84
    @jrhager84 Жыл бұрын

    You are literally THE resource that I point everybody curious about Svelte/SvelteKit to. They should literally hire you (and pay you handsomely) to spiff up their technical documentation and add a knowledge base. Literally - You are a treasure to the SK community.

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Thank you! 😊

  • @christopherhornle4513

    @christopherhornle4513

    Жыл бұрын

    @@JoyofCodeDev I agree with jrhager84. I am looking for the tool that you were using in one video that makes a border about svelte components. There was some red button to click... Can't find the video anymore. Mind to give me hint?

  • @ikkentonda
    @ikkentonda Жыл бұрын

    Outstanding! I sincerely appreciate all the “little” tips you share, as well as your taking the time to clear up some conceptual hurdles. Great stuff!

  • @AB-gx5zj
    @AB-gx5zj Жыл бұрын

    This is really good, please keep doing svelte(kit) videos. They make understanding the framework so much simpler! :)

  • @bmehder
    @bmehder Жыл бұрын

    These videos are the perfect supplement to the SvelteKit docs.

  • @mertcancam
    @mertcancam Жыл бұрын

    Great series! Keep it coming!

  • @brav3hearthalo189
    @brav3hearthalo189 Жыл бұрын

    Amazing tutorials! Thank you for all your work 🙏

  • @pickavana8056
    @pickavana8056 Жыл бұрын

    Thanks for all the work in putting these tutorials together. Much appreciated and subscribed.

  • @local9
    @local9 Жыл бұрын

    I've not long completed the tutorial on this, this is so valuable!

  • @joreilly
    @joreilly11 ай бұрын

    Great tutorial, this helped clarify a lot of stuff for me.

  • @lgsyt
    @lgsyt Жыл бұрын

    This is amazing, probably the best Sveltekit route explanation out there with a big plus: tricks to dissect & track down the inner Sveltekit behaviours. That's invaluable @JoyofCodeDev, it would be very appreciated if you could explore almost any SvelteKit topics in the same fascion like this. Please keep up the amazing work 🙂

  • @LemonSix
    @LemonSix Жыл бұрын

    The image on the right explaining that inside routes exist the views and that each view has its own +page is the best thing that happened me on this week. Subscribed

  • @kyouma7067
    @kyouma7067 Жыл бұрын

    thank you for videos i actually learn better visually then reading docs currently following series even started simple movie app project in sveltekit and needed to get firm grasp about routing and video with examples like you show is handy indeed arl then ima keep watching cheers! keep up the quality content

  • @justingolden21
    @justingolden21 Жыл бұрын

    Just found your channel and I'm already addicted! You cover the exact topics I need (and didn't know I needed) and in a digestible and well explained manner. Video suggestion / request: increasing performance in a svelte kit project: stuff like using less reactivity, less dom elements, and even generic stuff like images, videos, fonts, blocking vs non blocking, etc.

  • @MrRe-sj2iv
    @MrRe-sj2iv Жыл бұрын

    Thanks for a great content

  • @francopascual6958
    @francopascual6958 Жыл бұрын

    Thank you so much. This series has been a life saver

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    You're welcome! 😄

  • @annismonadjem6901
    @annismonadjem6901 Жыл бұрын

    Just simply excellent quality.

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Thank you! 😄

  • @prashlovessamosa
    @prashlovessamosa5 ай бұрын

    Again you bruh you created 😅 everything about Svelte what ever I search around Svelte your videos popup very helpful thanks 🙏

  • @hrefamid9563
    @hrefamid9563 Жыл бұрын

    Top quality as usual 💥

  • @WyzrdCat
    @WyzrdCat Жыл бұрын

    I watched many dozens of videos introducing Svelte but yours is by far the best mix of explaining things, showing them in a meaningful example, and not assuming I have used other frameworks before.

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Thank you! 😄

  • @yohanlopes1847
    @yohanlopes1847 Жыл бұрын

    great videos, learning a lot from them. Hope you keep posting about svelte kit

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    The next part is already out! 😄

  • @luchinazo
    @luchinazo Жыл бұрын

    amazing the way things are explained

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Thank you! 😄

  • @fmgono
    @fmgono Жыл бұрын

    Super useful videos!

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Thank you! 😄

  • @justmrmendez
    @justmrmendez Жыл бұрын

    Dam this is good

  • @danielk.9321
    @danielk.9321 Жыл бұрын

    This is the most useful video I found on the internet about SvelteKit

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Thank you! 😄

  • @nicholasobrien5914
    @nicholasobrien5914 Жыл бұрын

    love it!!!

  • @lukasvozda
    @lukasvozda Жыл бұрын

    Thanks you! Your videos about Sveltekit are very helpful. Would be cool if you could make another one about stores.

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I would love to after I'm done with the series! 😄

  • @lechiffrebeats
    @lechiffrebeats10 ай бұрын

    thx alot for you content man

  • @JoyofCodeDev

    @JoyofCodeDev

    10 ай бұрын

    You're welcome! 😄

  • @theIbraDev
    @theIbraDev Жыл бұрын

    Hey thanks so much for the tutorials you make. I'm a pretty new web developer and, Svelte Kit is my first proper framework. Having actual guides like this to follow makes it so much easier for me to learn and adapt to it! Also Thank you for the fantastic tips along the way like the ones about PNPM! You have most likely saved my harddrive 😅

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I'm glad to hear that! 😄

  • @theIbraDev

    @theIbraDev

    Жыл бұрын

    @@JoyofCodeDev Hey, i tried making a footer in the +layout.svelte file, but how do i make the content of any page i load, appear at the bottom? Tried putting the footer under the file but that doesn't work hehe

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    @@theIbraDev That should work! 😄 You can join the Discord from the description and I would love to help you.

  • @KiLVaiDeN
    @KiLVaiDeN Жыл бұрын

    Very good tutos and explanations, thank you sir ! :)

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    You're welcome! 😄

  • @HuynhLuong227
    @HuynhLuong227 Жыл бұрын

    Many thank

  • @supernovaw39
    @supernovaw39 Жыл бұрын

    Lovely!

  • @fazex4185
    @fazex4185 Жыл бұрын

    I have discovered an awesome channel today, keep it going!

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Thank you! 😄

  • @UndeadSasuke34
    @UndeadSasuke34 Жыл бұрын

    This channel is so good I feel like a thief for watching these vidoes for free Edit: i just realized you use Brave browser, my respect for you skyrocketed even though it was massive even before

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    That's alright! 😄 I want the base content to be available to everyone because I think it's important for SvelteKit adoption. You can decide how to support my work by becoming a patreon or you can get a course in the future.

  • @lukasvozda
    @lukasvozda Жыл бұрын

    Thanks

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Thank you! 🙏

  • @AlexvanderValk
    @AlexvanderValk10 ай бұрын

    If I'm on an route with an optional parameter like /en/about, I want the nav links to include the optional param. Otherwise a user may change the language and get redirected back to the default language when they navigate to another page. I basically need a way to generate an href by passing in a new optional param value, and keeping the rest of the URL as is.

  • @everdrone97
    @everdrone9710 ай бұрын

    Just found your channel and I wish I discovered it yesterday omg there’s so much useful info! Btw what and icon themes are you using for vscode?

  • @JoyofCodeDev

    @JoyofCodeDev

    10 ай бұрын

    I have a link in the description.

  • @jasonc6241992
    @jasonc6241992 Жыл бұрын

    Coming from Angular, I'm having a tough time, looking forward to new vids!

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    Hope it clears things up for you! 😄

  • @isaacdruin
    @isaacdruin Жыл бұрын

    Drinking game level: suicidal. Take a shot whenever JoC says "how awesome is this?". Just teasing. SvelteKit is awesome all the way down :D

  • @adamtak3128
    @adamtak3128 Жыл бұрын

    Been a long week. Thanks for the release. Are you filming these as you go or have you already finished some of the other episodes?

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I do them as I go! 😄

  • @marcello_s
    @marcello_s Жыл бұрын

    Thank you again for your videos. A video with the most common errors to avoid in Sveltekit would be amazing. Im using sveltekit for it simplify and straight to the point philosophy but I’m not sure if I use the tools provided correctly. One little example : I have a store variable which is a Boolean called isAuthenticated. To make it simple, I use that store to give access to some features only to users who are authenticated. I import that store variable into every pages I need to use it. Then, I create a variable that subscribe to that value and display some features in my app depending if this value is True or False. I don’t know if it’s a good practice, if I should import it in my layer instead, or whatever. Or using another type of store options that would be more appropriate for that. That’s a simple example but a video showing good practices for things like that would be amazing.

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I never make mistakes! 🤭 It's going to take time for good patterns and practices to emerge but SvelteKit also makes doing the right thing easy and the wrong thing hard. It sounds like you're making it more complicated than it has to be because SvelteKit already helps you with that. I have a video on SvelteKit authentication: kzread.info/dash/bejne/d2eKqY-dfKa4hc4.html. I would also look at some auth libraries examples because they give you a good idea how these things are used.

  • @marcello_s

    @marcello_s

    Жыл бұрын

    @@JoyofCodeDev Yeah, I'm pretty sure there are other ways of doing this in a simpler way. I just set that challenge as I wanted to implement jwt access and refresh tokens using http only and secure true with django and make it work with sveltekit. Also, I chose to do it because I learned django and python way before JS and frontend frameworks like sveltekit. I managed to make it work perfectly, but as I'm still new to sveltekit, I was wondering if my way of managing my auth variable store was right. I'm definitely going to check your video on this subject and see how you implemented things :)

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    You got this! 💪

  • @haythamaldamen3578
    @haythamaldamen3578 Жыл бұрын

    Thanks for your tutorials. Do you consider making tutorial about using pocketbase with sveltekit as a backend?

  • @senseicodes

    @senseicodes

    Жыл бұрын

    Check out @huntabyte videos

  • @roynilsson1382
    @roynilsson1382 Жыл бұрын

    What I don't like about routing is that you can't reset the root layout, instead you have to use dynamic folders. Thanks for your work, your videos are awesome

  • @Sunshine-Alpha
    @Sunshine-Alpha Жыл бұрын

    Really helpful, but why is the slot called with at one point, and later with etc ?

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I think they named it `` because it's what the web platform uses if you look at Web Components. You can put it inside any element. It's like a hole where everything else goes.

  • @matthewchunk3689
    @matthewchunk3689 Жыл бұрын

    Thank you!! What's a good service provider for a plain ol' static site made with sveltekit?

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I would use Vercel because it has a generous free tier but so do GitHub Pages and Netlify.

  • @zivro
    @zivro Жыл бұрын

    Good one, what icon theme are you using in VSC?

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    You can find what I use in the description! 😄

  • @ryan_roga
    @ryan_roga Жыл бұрын

    I'm wondering if you've ever tried mult-tenant with SvelteKit. I've been trying to figure it out on my own, but I'm only a beginner. It's a bit over my head at this point.

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    What is that? 😄

  • @V3LOXy
    @V3LOXy Жыл бұрын

    Maybe I missed it but, what if you have many places where you use the slug in the same way, is there a general location to put the script that checks the regex? Same with the error files, is there a general 404 error file? I wouldn't want to make a 404 page file for every subfolder. (I haven't even opened the docs yet myself, I'm learning purely from your videos)

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    1. You can reuse the matcher anywhere 2. There's a default `error.html` template SvelteKit uses but you can customize it by creating `src/error.html` or you can add `+error.svelte` to any route and SvelteKit just walks up the tree and renders the closest one

  • @MrJohnnyDestiny
    @MrJohnnyDestiny Жыл бұрын

    Just a quick question, what extension do you use for inserting emojis into your code?

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    It's an emoji picker for Linux! 😄

  • @MrJohnnyDestiny

    @MrJohnnyDestiny

    Жыл бұрын

    @@JoyofCodeDev Oh thank you very much. Will check it out.

  • @darshanv1748
    @darshanv1748 Жыл бұрын

    As we navigate between pages under a layout data for that page is loaded according to that page but how do we do we communicate a interaction that makes changes to layout Example a navigation bar that should change log in and logout label (login and logout are pages )

  • @senseicodes

    @senseicodes

    Жыл бұрын

    Something like user cookie or session can be stored in a store called "locals" when you get to doing auth in Sveltekit, you can now do a simple if check like "if (locals.user)" in your navbar component to dynamically render a login or logout link or button. Again this goes into when you start doing auth in sveltekit.

  • @darshanv1748

    @darshanv1748

    Жыл бұрын

    @@senseicodes implemented it the same way but layout doesn't fetch locals on page navigation under that layout and hence when i click on logout anchor tag the logout label doesn't change until u do a hard refresh (SSR)

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I have an entire video on SvelteKit authentication that shows what you're asking for: kzread.info/dash/bejne/d2eKqY-dfKa4hc4.html.

  • @darshanv1748

    @darshanv1748

    Жыл бұрын

    ​​@@JoyofCodeDev ya i have seen that , but layout doesn't rerender on client side navigation

  • @alecortiz307
    @alecortiz307 Жыл бұрын

    what is "slug" i see it everywhere in the sveltekit docs

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    The term "slug" comes from publishing and it's a short name given to an article.

  • @functnal3187
    @functnal3187 Жыл бұрын

    what plugin does he get emojis with?

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    It's an emoji picker for Linux.

  • @forno_nicolas
    @forno_nicolas Жыл бұрын

    Npm modules are installed globally on PC each time?

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    npm modules are downloaded inside the `node_modules` folder of every project but you can also have global packages.

  • @forno_nicolas

    @forno_nicolas

    Жыл бұрын

    @@JoyofCodeDev man thanks for this tutorials 💯

  • @hikaru-hokkyokusei
    @hikaru-hokkyokusei Жыл бұрын

    You forgot to talk about FormActions.

  • @konrad2431
    @konrad2431 Жыл бұрын

    What's this operating system?

  • @senseicodes

    @senseicodes

    Жыл бұрын

    Windows 11

  • @konrad2431

    @konrad2431

    Жыл бұрын

    @@senseicodes No. Looks like some Linux distro to me judging by the cursor.

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I use Manjaro/GNOME. 🐧

  • @pickavana8056
    @pickavana8056 Жыл бұрын

    Regarding chatgpt, this has been more a waste of time than useful when it comes to coding. At first it looks very impressive, turning your text request into what looks like great code, but isnt. It makes mistakes - perhaps its human? No it repeats mistakes? Childish, human. No, worse. It cant "remember" what was asked already and you ask for a small change and it rewrites everything and includes mistakes it made earlier. It even put react code into svelte code! Then the bombshell, I asked for another change and it asked me what language I wanted that in. I asked what language did I ask in the first place. It said "Python". (I didnt). I asked what was my first request, what were the first 6 things I asked for. It reeled off a list mostly of someone elses request for a python code to calculate the distance between two longitudinal and latitude points. Interesting, but absolutely not mine! Not my new best friend, though useful at times. More NOTJoyOfCode!

  • @abhishekbohora9691
    @abhishekbohora9691 Жыл бұрын

    man obsessed with banana...😅

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    I don't even like bananas.

  • @mathef
    @mathef Жыл бұрын

    Thank you for another great one! And I am very glad I am not the only one whos best friend is ChatGPT :D

  • @JoyofCodeDev

    @JoyofCodeDev

    Жыл бұрын

    You're not! 😄

  • @pickavana8056

    @pickavana8056

    Жыл бұрын

    Soon we will all have a best "friend" that dishes up more than code!