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

hey friends in the previous part we talked about what is swelkit and explained the swellkit project structure from scratch but things are about to get real in this one you're going to learn everything about swell kit routing if you're just starting learning swellkit and want to follow along you're going to need node.js and I recommend using vs code as the editor and using the swelled vs code extension so we're going to go to the node.js downloaded this is going to get npm for you if you're new to this or going to be able to install packages and I also highly encourage you despite me in the post using npm because it's standard I personally going to use pnpm please get pnpm save your hard drive because pnpm lets you reuse packages so for example when you start a new project you're not going to install the same packages all over again which is really going to destroy your hard drive and pnpm is way faster because of this so it just uses links to packages for every project so it's really super fast and it's really easy to set up so I highly encourage you to look into that so you're going to need vs code for the editor but you can use whatever you want of course you're going to need to set up the swelled syntax highlighting yourself so you're going to need this extension swell for vs code just grab this and you're going to be fine so for example if I press Ctrl shift X I'm going to get to my extensions and now I can type in swelt and I should get the extension so here it is well for vs code you should install this and you should be good so let me just close this and here I just have a regular silky project you already know how to do this you can scaffold this really it's not important what you select because you're going to be mostly talking about routing but I'm going to use typescript but typescript is really optional and if you're afraid of typescript you can just ignore it so for example people really think that typescript is spooky thing but for example if you just see something like let's say variable and you see something with a colon number if you're not only with typescript you can just basically just ignore the type remove it right and that's going to be value JavaScript so let me just close this another thing I'm going to set up is some styling so I don't ruin my eye so I'm going to use Pico CSS this is going to give us some nice default Styles I'm going to go to get started I really going to use a CTN because I don't want to install anything right now I'm just going to copy this over Ctrl p inurator is called open app HTML and here before the head ends we're just going to paste this in and I've already started the development server with pmpm run Dev so if I go to localhost here if I refresh it it's already updated so you can see Pico is in action here which has some really nice default styles for us another thing you can do is use stack Blitz if you want to follow along and using something like a tablet or whatever we really don't have access to all of this you can just go to sweltkit dot Q This is just going to open a new staggers project and this honestly blows my mind because this uses node.js in the browser and it feels even faster than your local development but they are just going to set this up you might have to enable cookies because stack Blitz is some special secret sauce behind the scenes that uses web containers which is really fascinating but yeah you can do that as you see in Brave it tells me to enable web container so basically I just have to go here and I can put down the Shield or I can enable the cookies so let me just go here and I'm going to sell our cookies sorry size and it should not work you're just going to restart but yeah this is a common problem with staggers when it's embedded for code example in some other size because it really needs you to access cookies but basically this is it you get a swell Kit app super fast and that's it so let's talk about pages in cell kit silk it uses file based routing where routes of your app are defined by the directors in your project so for example here is this URL and all of these parts are URL segments so example com this slash is going to map to routes which has a page.12 file so this is going to be your home and then if you want to go for example to post you have a post directory which has another plus page or swell file as you can see these routes are defined inside the source slash routes folder each directory inside the routes folder can have one or more files using the plus prefix to define a page in swell could use a plus page.swell file which becomes a routed maps to a URL so let's create a default route I'm going to open the sidebar here I'm going to go to the source routes folder here we already have a plus page swell file that comes default when you scaffold the project I'm going to close the sidebar so let's just make some navigation so I can say nav autocomplete this is just empty narrator you can press tab to complete it so let me just create a link this is going to be our home so I can just say home and I'm just going to copy it over and we're going to have posts so I'm going to say post here I'm going to save it and I'm going to go here and you can see we already have this navigation that's home it's really important to understand the mental model of what a page is in soil kit because the page component gets rendered twice once on the server for the initial request and once on the client because of hydration which is just a fancy word that means adding JavaScript for interactivity to the page after the server returns their HTML document before I show you what I'm talking about let's just give it a H1 so we can just say home page and I'm just going to add a script here this is just a quick snippet I have so we can just add a script and here we're going to console log out hello so I'm going to say CL which is another snippet I have so we can just say hello all right so now pay attention I'm going to open the terminal so control dot is a shortcut for me but maybe something else for you or you can use the menu in vs code and I'm also going to open the console here and let me just adjust it so now I'm going to save this and first you're going to notice hello in the console here which is on the client and you're like maybe thinking okay but where it is on the server and because the client-side router already kicked in but for example let's say I'm the user I'm visiting the page for the first time so when I refresh this page is going to run on the server and on the client so let's see this in action I'm going to refresh now you see Hello on the server inside the terminal and in your browser I want you to understand what a page is and that it matches your mental model because it's going to save you a lot of trouble in the future a page itself is just a swell component which you can see for yourself if you press Ctrl shift I to open the developer tools and navigate to the network Tab and look at the response for the page so here we're already inside developer tools so you can go to the network Tab and if you scroll up top we can see if we let me just clear everything also make sure you disable cache so you can see here is the document that server side rendered from the server if you go to the preview here is actually the entire HTML document but where is our page component so here is just a lot of junk for development you can ignore but here at the bottom is somewhere our page so we can find it quickly go here here it is somewhere let me just scroll to the bottom so here it is somewhere yeah so this is it so basically this might look weird to you because it doesn't look anything like swelt well at least the one you know about because this is what it means that swelt is a disappearing framework because well kit at the end of the day compiles to JavaScript so it doesn't even have to ship some runtime of course there is some runtime because at the end of the day if you look here swelters are component into a class class page extensive component so this is your component you don't have to understand this I just want to show you how this works and basically here is some magic with hydration and Etc you really don't have to consider yourself about but it's really useful to know about so remember a page is just a component in cell kit so let me just close this and also want to show you that if you look at the response of the page here we can actually go to the page source so here is actually your HTML generated you can see here is the script that's really responsible for hydration and loading the client-side router and enables client-side rendering once the page is loaded alright but enough of this let me just close this and I'm also going to close the terminal for now here just complaining about the favicon which you can ignore but let me just close the terminal and let's create another route and let me just do one quick thing so I'm going to go to print here and I'm going to disable semicolon because I prefer no semicolons so I can just close that and let me just save it and they shoot out the format everything and Awesome everything works so I'm going to open the sidebar in our routes I'm going to press new file which is a neat trick in vs code so we can start creating a folder let's name post we can say slash and then we can say page Plus 12. and now we can just go here we can copy what we already have we don't even need this right now let me just remove this and just copy this entire part we can go here and instead of home page we can just say post page so here is our home and post and it looks weird because of Pico so what I have to do in this navigation is going to create a URL I'm going to say Li I'm going to place it like this let me just select all of this I'm going to create another one let me just do this I'm going to save it and now this should be working so you can see if you go to home and post everything should work great and let me just copy over this to pause yeah so everything should work great awesome so you might be wondering what is the reason behind this weird plus symbol and basically it's just a silky knows that this is a specific file to a route so what this enables you to do is collocate code so for example if you had a post component for example or some utility here you can just create a normal file here instead of having to use some weird names like underscore and Etc because cell kit is going to ignore everything that's not a route as let me just close the sidebar I mentioned how pages are just components and just like regular components they're mounted and destroyed on navigation so let's see if that is true so I'm going to go to the home page and I'm going to add Back The Script I'm going to use the on Mount and on Destroy methods I'm going to say on Mount and this should Auto Import it for me if I press it like this so here I'm going to give it a callback I'm going to say console log I'm going to say mount it home page and then I'm going to say on Destroy I'm going to give it also a callback console log on mounted home page I'm going to save this and let me just copy this over so I can go here to post you're going to copy this and now we can just say mounted posts so I can press Ctrl D to select what's similar mounted and unmounted post page all right so here we're going to go first to the console let me just clear everything here and now I'm the user first time opening the page so let me just do this so we can see it says mounted home page and now when we go to the Post page you should say that it unmounted the home page and mounted the post page awesome so it says unmounted home page mounted post page the same is true when you go back because your pages are just components this also means that page transitions are really simple in circuit which is a topic for another time but I also want to notice how the only thing that loads when navigating between the pages is the data for the page because it's using client signed rendering but if you refresh the page it's going to use server-side rendering so let me just show you what I mean if I go to the network tab I'm going to clear everything again and let me just refresh so this is the first time when you visit the page right so you're going to see that you get the entire document here so you can see here is everything you need but let me just clear everything and I'm going to show you something awesome so the first thing notice the data preloading we're going to hover over posts and it didn't load any HTML document right or did server side rendering at least behind the scenes but for example you can see it just loaded the component that it requires so you can see this looks very familiar and that's basically it but you can see here if we for example again do a hard refresh so revisiting the post page for the first time it's going to load everything let me just clear this I'm going to load everything you can see now you have a document here which has everything again and if I clear this and again going to home it's just going to load what it requires and don't forget to enable disable caching if you're doing this so you're going to get consistent results but yeah basically this is how this works and you might be wondering is the data pre-loading some magic that silky does and the answer is yes it's some magic but because swelkid knows the data required for your route it can load the CSS and JavaScript in advance and this is thanks to if I press Ctrl p and go to app HTML you can see this attribute on the body that's data swellkit pre-load data on Hover so when you hover over a link it's going to start pre-fetching or preloading the data for the next page so I kind of want to show you how this is awesome if I go for example I'll go here and let me just create some styles let me just say H1 color aqua and you won't see this in development but let's stop the developer circle inside pmpm run build and I'm also going to run preview so basically this is emulating like you're in production all right so let's build everything that's going to take one second and now the URL is different it's going to be four one seven three so let's go to the home page so pay attention what happens now how awesome is this when we go to post it's going to load the CSS and the JavaScript required for the page amazing so you can see here is the CSS along which is scoped to this component and here is just the JavaScript which is probably oh it's not even minified interesting oh this is because I have this pretty print but when you remove this it's minified so yeah you get the smallest bundle size but how awesome is this another thing worth mentioning is that you can set preloading for the entire page like it is set in the app.html file but you can also set it for individual links and override it if you want alright so that was a brief and interesting tangent and a back here in development mode so let's talk about layouts our two pages if you notice share the same navigation and we could create a navigation component and then we can reuse it so you might be familiar with this from other Frameworks we can probably make something like navigation and then we can import navigation from whatever right but really in cell kit this is sold using layouts so first I'm going to remove these Styles because we don't need them and let's take the repeating Styles I'm also going to remove the script block and let's just take this we're just going to cut it let's just save this in our post we're going to go to home I'm also going to remove everything here so how do you create a root layout you create a root layout by going to Source routes and then you can say new file and you can create layout plus 12. now we can just copy the navigation over and we should see the navigation is here and everything works but where's the content and you need to do another thing which is past a slot so you can do it like this you can save and now you can see the home page and the post page and this is also a great spot to include your Global style so for example if I go to source and I can just create app CSS which is Us close it quickly so we can create some Global Styles we can say body let's give it some padding and then I'm going to say for the title I want a line High to be one and then I can say text transform capitalize let me just save it I'm going to close this file and now inside our layout let me just move it here we can go to the top we can create a script block and now you can say import so we just have to go one folder above and we can say app CSS and now when you save it you should see that things are going to get updated awesome and just like your pages the layout is going to run on the server and client but first let me explain to you what a slot is and basically if you're familiar this isn't something silky specific but this comes from swelt which is a slot property which lets you pass anything you want so here I have an example of that let me just go here so here you can pretend this is our page so this is the root layout here we have our navigation we can obviously move the slot wherever we want and that's basically how that works so basically everything that you pass here is going to be shown so in remix this is outlets and I don't know what it is in other framers but basically that's how it works so you can include repeating content here like navigation a sidebar or a footer is going to be repeated for every child route so for example if we have a post route here is the root layout so if you create a slash post now we have a sidebar here and post and basically this is going to be the slot it's just going to show the other content so basically how this works behind the scenes in swellkit let's say for example we have our home page remember our page is just a component so when you add something like a layout a new slot it's basically equivalent to something like this right so basically this is what it does and now we can just indent it and basically that's how this works so everything else is going to get passed as I said a slot lets other content through and as you navigate to a route it mounts the component for the page and unmounts the old component so one component is just going to be active for the route you're on so for example if you go to the Post page this is not going to be active you're just going to show the post page right another interesting thing is that if there's an error it's just going to render the error for that page and nothing else so if you really want to see how the secret sauce works let me just exit this component so in your dot cell kit folder this might look intimidating but don't worry about it so let me just see I think it's in the generated we can see here is the root.12 file for the pages so it really has some interesting things here that are foreshadowing but we can see here how it kinda works and you don't really have to understand so basically this is exactly what I've shown you so if you just a single component without a layout then it's just going to render out the component but if it has a layout then you're just going to use the layout and then it's just going to render your component and if there's an error is going to show the error component instead and basically that's how that works so this is really fascinating what you're going to learn even more about layouts so I'm just going to close this and let's talk about the power of nested routes you can Nest layouts as much as you want so let's say for example I want a slash post so if I go here I'm already a slash post but for example I really want this kind of route where I have slash post and slug so how I have it here if I go to slash post this is another beautiful aspect of file based routing because this is going to match the URL where your other content is so you're on post and this is going to be our new layout which you can create a nested layout for which so you're going to have a sidebar post and when I click on a post it's going to load the post on the right side and if I go here this works like this so we're going to go to post and we're going to go to the slug and this is going to show the post here but the true power of nested layouts or routing is we already mentioned how zelki knows what data to load for the page which is awesome but another great aspect is that let's say for example something goes wrong here when we load the post instead of taking our entire app down only this part is going to crash and you're going to get a useful error message and know where to look to fix the problem so let's have a look how that works I'm going to go back here and let me just close all of these files we're going to need this and now just collapse everything and go to Source routes post inside our post so this is the post page and let me just give some text here so you can say you can and let me just give a link so let's say for example that we want the user to create the post so we can say plus create you can create or edit your posts here so basically this is what you want to do and now you need to create a layout so we always have this sidebar here and when we click on a post it's going to load it here and we already have a nested layout so our navigation isn't going anywhere right and how awesome is that so I can create another plus layer.swell file inside source routes posts plus layout.13 so let's do that I'm going to go here so here where our posts are we can say new file Plus layout swelt I'm going to close the sidebar and now let's add quickly some markup so I can say pause using emit really simple but I'm going to create an aside I'm going to give it a H4 I'm going to say post and now I'm going to hard code some posts so I can say nav let's give it a list and say Li let's give it a link so we can say post one do it like that and I'm just going to select this alive Ctrl alt for me and arrow down is going to just copy over the code in vs code so I'm going to say two so right now nothing is dynamic here but we're going to see how that works later so we can just say two and now remember we need to include a slot because if you just save this we can see our post is here say one two and it's not found because we need to do something which we're going to do in a second so this is one two and remember how to include the slot we can just say Main and let's just include a slot so now we can see our post page create and let's add some quick Styles so now you can go here I can say Style pulse let's say display grid you're going to give it a gap of 2 RAM let's say grid template column certainly want the column to be 200 pixels and then the post to be 60 characters wide but you can set it to whatever you want and I just give it some margin top we can say 2 RAM I'm going to save this and now we should move this main so it's part of our grid so we're going to get this layout and how awesome is this also this is hard to see let me just zoom in a bit I'm going to do it like this let me just see yeah let's just zoom in like this so remember how I showed you here this slug so when I go here and I go to pulse one we somehow need to load this post and we can do this using a parameter so this can be dynamic like a variable and this is how we can get the post or whatever we want so we can create our child routes for posts that's going to be named slash post slash create or we can even make something like post edit and it will inherit the root layout and the post layout so first let's create that so we have that because when we go to create there's nothing here right so we're going to go to the sidebar and here we have posts we're going to create another child route we're going to say create and again you just say Plus page as well now we're going to close this let's give it a H1 create new post let's give it a paragraph create a new post we can save this now when we go to this route now it's post create before we talk about Dynamic routes let me show you the real superpower of nested routes and I already told you how swelkit knows what data to fetch for a particular route but I want to show you how when one part of your app fails it's not going to take the entire thing down first I'm going to create a file you don't have to know about what it does right now so I'm going to go to routes false remember to create and I'm going to create a special file so you don't have to be concerned what it does right now but basically I just want to cause an error for the page and when I create this file I'm just going to with the circuit extension make this function and now let's talk about unexpected and expected errors so in swelkit when you encounter an unexpected error it can contain sensitive information so the error message and stack Trace is not exposed to the user so let's really see what this is so basically unexpected error when you get a really bad error like this like yikes and then let me just go here and I'm going to say import type page load just so it doesn't complain at us so let me just save this and you're going to notice something so first our app crash but it basically took everything down right so it's really not great it's not the useful error message for a reason because as I said this is an unexpected error so swelkit hides the error message and the stack Trace but you can see the logs for yourself it doesn't hide that but basically this is just to protect you so what can we do so for every route that you have you can create a plus error.swell file so it's just going to get contained to that area so if we go here to create we can just say new file we can say error and now you already see something interesting so if I say boom like this and go here again I'm going to go to post create and just going to say boom here and it's not going to take your entire app down so for example I can go here let me just say yikes and then maybe I can give it an emoji let's say explosion and then I can give it a description something went horribly wrong but blast radius has been contained to do this route and also going to show you something fun so we can say script here and I can import a page store from App Stores and this is how you use this information in your error Pages anyhow so page store has some information here is some snippet I always use so it's free and you can just use Json stringify so it's really just going to Output an object of everything that's available so we can use a store by selling dollar sign page you can see page has options like error message and Etc let's really see what's inside this page so if I do this let me just zoom out so you can see what's going on so you can see yeah is something horribly wrong as you can see here is the error message you can see it's vague on purpose even though we said here that it's yikes right so we can go here we can see other params routing Etc and if you want to Output this really you have an example in the 120 docs you can go here and then you can say page and then you can say message error message or whatever else you have you can even output the status if you want but let's really talk about our expected errors it is and expected errors are created using the error helper which sets the status and renders the error swell component and Returns the status and error message so this is something that you import from selfie so you can just comment this out that's going to go here and I can say Throw error and it should import this from circuit now we can give it a status and then let's say message we can say yikes and let me just give it an emoji it's a speaker so let's see when we save this ah okay so now that it's expected it's going to show the error message on the page so this goes back to what I showed you on this last diagram which when you're on the slot and if something goes wrong instead of it taking your entire app down this part is going to be down and you know where to look so you know where to start looking for the errors so let's talk about Dynamic routes in swelkit let's say that you had a lot of posts and it would be really tedious to create a route with a slug for every post you would have to create slash posts one plus page 12 and then slash post to slash page failure to get really tedious so instead of doing that you can create a route with Dynamic parameters that use a square brackets around the variable name so instead of being one two and etc for every folder we can basically just create this type of route where it's locked and it's going to catch everything here you can catch one two three four you can catch a banana or whatever else you might have so let's see how we can create such a route so I'm going to go to the sidebar and here in routes posts we're going to create new file but we're creating a folder so we can say slug and let's just say slash of course we need the plus page file so we can do it like this and now this is going to match our slug so inside of here I can just say pause and then let's just log out the params and remember how we have access to this great store from circuit so we can say import page from see app stores and I'm going to use a snippet here and I'm just going to save page here I'm going to save it and now notice when we navigate to our post it's going to catch this param which is one so it says params here slog its name is one and then you have all other useful information so if you go to two for example it says two and of course this data is the same but now I hope some years are turning in your head and you can imagine how if we have access to this lock here we can just pass it to a database or whatever function we have that calls some piece of data so we can dynamically render content on the page so right now if you navigate to any post the content is going to be the same but later when we get to loading data I'm going to show you how to use the dynamic parameter to show a post let's talk about more advanced routing in cell kit first let's talk about multiple route parameters so what are multiple route parameters you can use multiple parameters as long as they are separated by at least one character so for example let's say we have some image API so this is going to be I don't know for example image and then maybe you want 200 by 200 whatever and basically how can we get this as parameters so we can just put them again in square brackets and we can create literally a route like that and we can get the width and height and do whatever we need on the back end so here in our project this is starting to get a readable so I'm just going to collapse everything and I'm going to go back to routes and inside our routes I'm just going to create a new file I'm going to create an image folder and that image folder is going to have a URL segment with X we need a character right width height and inside of it since this is a folder we need to create Plus page sweld so you can see here we created an image folder with height which are going to be the params and now we have access to them so let me just close this and again I'm going to import the page from App Stores I'm going to create a title dimensions and then let's just output it so you can say page so let me just save this so let's really use this how I said so we can go here and of course we don't need these brackets in the URL so I say for example a user wants an image of the dimension 200 by 200 now we can go to that route and we can see dimensions and here are the params so we get the width and height and now you can do whatever you want with this next let's talk about optional parameters let's say you're working on internationalization and you have a lang slash about route with a required length parameter so for example if I'm here let's say I have English about but I also want to match it by default that is just about which isn't going to work so let me just show you that I'm going to go to the sidebar inside a row so let me just close everything here I'm going to say new file so I'm going to create a dynamic parameter length this is going to be about and we're going to have page swelt and let's just say about so now we're going to go here and for example I'm going to say English about is going to work but for example what if you want just this Default about it's going to say not found so in this scenario this is where optional parameters are useful so to make a parameter optional we can wrap the square brackets in another pair of square brackets so if I go to the sidebar here where Lang is I can say rename and let's just add another pair of square brackets I'm going to save this and now when I go here and refresh you can see that this matches I want to know that this is a simplified example because you haven't learned about some things yet to make change in the language work but at least you know about optional parameters in case you need it next I want to talk about rest parameters you might be familiar with rest from JavaScript and that's the same idea for routes in swelkit you might receive an unknown number of path segments in case we should use a rest parameter but be careful you do checks in your code because it could be anything so let me just really show you the idea behind this so here is a contrary example let's say we have some image API or whatever and then we have media and then we need path to file or whatever and then maybe this is some image API so the user can give a width and height but basically this is an unknown number of segments right so we can use a rest path so we can say it like this you can say file and now we can catch what the user entered here and do checks that we need and do whatever we need after that so let's see how we can do something like this if I go here and now in the source again routes I'm going to create new file so I'm going to create a media folder I'm going to say slash and now since we don't know the number of segments in advance we can just say file this can be anything you want this can be banana or whatever right so you can just say file and then let's also say slash and we're going to create another folder of course we're going to say with and we're going to say height because those are just parameters right and of course we also need to say slash page as well so this might really look complicated but just give it a second to think about it but yeah we can just go here so now we have media file which is going to catch everything and now we have width height and our page which is going to be the page itself so same as before I'm going to import page from App Stores and I can see here rest parameters and now let's just output so I can just pre output the page so now for example the user navigates to Media and now they can say path to image and it can also give Dimension so you can say 200 by 200 we should get a result so you can see here it matches the params so we get a file here path to image we get the width and height how awesome is this lastly let's talk about matching parameters so if you go to the Post route for example posts you can say slash one this is going to match it but of course it's going to match everything else like one two three four banana and Etc but let's say we have something invalid like a space this should never be a slug right so how can we make this more strict and make sure the route matches a valid slog we can do this using matching parameters and to do that you just have to create a source slash params folder and you need to create a file that exports a mesh function so let me show you quickly how you can do that we can go here to source and we can just create new file so I'm going to create a params folder slash and I'm going to create a slug DS file and I'm just going to say export const match you can say per Ram matcher which is going to import the type so we're going to say Byram let me just do this and of course you need to spell this properly so we can say export and I'm just going to save this so okay now we need to return a Boolean if this is true and false which is going to involve some regex but don't be afraid because instead of using stack Overflow or whatever we can just ask our friend chat GPT so we can go to chatgpt which is my new best friend so you can just give it a prompt here for example we can say can you write a match function in JavaScript that just checks leave the param is a slug and it's going to say sure and let's see what it's going to come up with so yeah basically almost almost we're there I just want something simpler right and you can even show you how we can use the function which is amusing and just give it a second so it just ends and then we can regenerate it then we're going to see a much simpler answer so let me just go here and it's going to ask a new answer and let's see what it comes up with so it says match param and also that's basically everything we needed and we can just go here we don't even need to copy the function let's just copy the regex so you can go here you can say return we can just use the tragics and then we can use test here we can pass it the param all right so I'll check GPT is doing his thing over here let me just save this actually before I save it let me just go to one all right go here and if I refresh it everything works so now we should give it something invalid it should return a 404 because it doesn't match the route but it's not working and why is that we have to do one more thing so for example if I go here and then here in our routes where we use the slog so this is going to be in post log you have to say rename and then you need to use the measure so we can say equals slug or whatever else measure you have let me just save this and now we get a 404 not found let me just see this is true so we can go one two we can even pass it banana all right whatever one two three four and this should be valid but for example something like a space it's not a valley slot it should just say 404 not found alright sweet that's everything you need to know when it comes to routing in a Cell kit there's more advanced things to go over like group layout but first we need to learn about data loading as well kit which I'm excited about so look out for the next part alright don't forget to like And subscribe and if you want to support me you can find the patreon in the description you can also join the Discord so thank you for watching and catch you in the next one peace foreign [Music]

Channel: Joy of Code

Views: 26,769

Keywords: svelte, sveltekit, routing, layout

Id: 7hXHbGj6iE0

Length: 38min 58sec (2338 seconds)

Published: Wed Dec 28 2022