stable 1.0 version out. I've already seen a few API changes over the last few weeks and months, so if you're watching this after 1.0 is out, some of the APIs might have changed by then. I'll make sure to add a comment if anything does change. So with that being said, let's go ahead and jump right in. Again, if you've used Next or Nuxt before, this should feel very familiar. Let's create a new SvelteKit app with this npm init command. Let's run that in my command line. Actually, let me change the name here. So let's name it lc-sveltekit-example.

Actually, let me change the name here. So let's name it lc-sveltekit-example. And we have to install this. And there is a demo app you can play with, but I'll stick to a skeleton project here. And we'll stick to no type checking for now. No eslint. I will add prettier. No browser testing. Okay, let's go into that folder. Let's npm install everything.

Okay, let's go into that folder. Let's npm install everything. Okay, let me open this up in VS Code. Let's go ahead and start our dev server here with npm run dev. And it is making use of Vite as a build tool. So we have access to all of the benefits that Vite offers, like fast server starts and fast hot module replacement. So let's take a look at the default app in the browser. Pretty bare bones here. And let's take a look at the folder structure here.

Pretty bare bones here. And let's take a look at the folder structure here. So we have this .sveltekit folder, which is what you would use to deploy your application. We have node_modules and a src folder here. static is where you would put your static assets like images and fonts. In our src folder, we have our app.html. So again, this is where the app attaches itself to. And we have this routes folder here. So if you go into that, we should see our one page here. And we do, it's our index.svelte.

So if you go into that, we should see our one page here. And we do, it's our index.svelte. So just like in Next or Nuxt, if you add a new file here, SvelteKit will automatically make a route for you. So let's create a new page component here. Let's say about.svelte. And let's make one for contact as well. Okay. And as you expect, there should be routes for these pages as you visit them in the browser. So let's say contact form, and let's add something for our about page.

And that will be an option to create a route as well. So let's make a new folder called posts. Let's put an index.svelte in there. And we should have a posts route available to us. So let's say h2 posts. And for now, let's just say, posts go here. And there should be a posts route here available to us. Cool. And just like in Next, you can have dynamic routes as well. The syntax is the same for them.

And just like in Next, you can have dynamic routes as well. The syntax is the same for them. So if we wanted a posts/[id] route here, [id] or [slug], we'll stick with an id for now, we can define a file name with square brackets. So [id].svelte. And we can say, post.title of id. So if you save that, this route should work as well. So now we can go to posts/1. And to get the actual post showing in here, we have to add a new <script> tag here, which we'll take a look at when we do data fetching.

And to get the actual post showing in here, we have to add a new script tag here, which we'll take a look at when we do data fetching. But let's add it for now quickly. Let's use my snippets here. So script context. And we have to export an async function named load. So let's say export async function load. So if you've used Next before, this is similar to getServerSideProps. So initially, this will run on the server. And then you can return props in here, which will be available on the client.

So initially, this will run on the server. And then you can return props in here, which will be available on the client. So let's return some props here. We want to return the ID and to grab the ID, we can grab it from the context. So context.params.ID. And we have to accept the context in this parameter here. We'll take a look at this again when we look at data fetching. But for now, let's see if this works. So we'll change this to ID. And let's see if this works in the browser.

So we'll change this to ID. And let's see if this works in the browser. Let's refresh here. ID is not defined. Oh, yeah. So now we also have to define our normal script and accept the prop. So export let ID, save that, refresh. And there it is. Okay, now let's take a look at layouts. So for most apps, there are certain elements that should be visible on every page, for

Okay, now let's take a look at layouts. So for most apps, there are certain elements that should be visible on every page, for example, a navbar and a footer. So for that, we can make use of layouts, which makes use of slots, which we took a look at a few videos ago. And to define a master layout, all you have to do is make a new __layout.svelte file. So let's go ahead and do that. So within routes, let's create that new file. And let's grab the example they have here.

Cool. And again, the anchor tags will take care of the client-side routing. Oh yeah, let's also add the posts page here. Okay. You can also make use of nested layouts, which allow you to define another layout for a certain group of pages. So for example, if you wanted a nested layout within our posts pages, we can define another file, name the same thing, and we'll still have the master layout. But now we'll have this nested layout within the posts folder. So let's add this file within posts.

But now we'll have this nested layout within the posts folder. So let's add this file within posts. And you can have whatever you want in here. The example they say here is a nested nav or a submenu. But I'll just put nested layout for now. And since it's in the posts folder, only those pages should use it. So let's save that. Let's go back to our app. You can see the nested layout here, and also for the single post page. And you can see the content is not showing here because I forgot to add the slot.

You can see the nested layout here, and also for the single post page. And you can see the content is not showing here because I forgot to add the slot. Let's make sure to add that. Save that. And there's the nested layout only showing for the posts page. And if you go back to the other ones, there should be no nested layout. Cool. Now if we wanted certain pages to have a totally different layout, we can do that with named layouts. So you define a new layout in the top level in the routes folder.

layouts. So you define a new layout in the top level in the routes folder. And to make use of this named layout for a certain page, you can rename the file like this using the @ symbol and the name of the layout. So let's try that. Let's create a new layout here. Actually, I'll just duplicate this one here. And then we'll rename it. So layout, let's name it another. Sorry, that's the wrong layout.

So layout, let's name it another. Sorry, that's the wrong layout. I meant to do this one here. So let's remove this. And let's duplicate this one here. So layout another. And I'll just put an extra div in here that says another layout. Okay. And let's make use of this in the about page. So we have to rename our file.

And let's make use of this in the about page. So we have to rename our file. So it should be about at another. And now we should make use of that layout. So let's try that out. Home is the same. Contact is the same. But if we go to about, you can see it's making use of that another layout. Let's take a look at how we can change the title here and modify the contents of the head.

Let's take a look at how we can change the title here and modify the contents of the head. So again, it's similar to Next.js. Let's go to our index.svelte file here. Not this one, this one here. So we can make use of a special svelte:head component. So svelte:head. And within here, you can add any tags that usually go within the head. So for example, the title, let's say title svelte kit page or site. And that should change our title here for the main page.

So how about we extract this nav to its own component so we can see how to do that. So let's grab this. Let's cut it out. Let's make a lib folder within our src folder here. So new file, lib. And again, you can put it in a components folder if you like, but I'll just put it at the top level. So we'll name it navbar.svelte. Let's paste that in. Let's save this.

Let's paste that in. Let's save this. Let's go back to our layout. And now we can just specify the navbar here. So navbar. And we have to make sure to import it. So let's add our script here. So let's say import navbar from. And SvelteKit allows you to use an alias for that lib folder. So you don't have to worry about traversing your folders using ...

And it does still work. And one thing I forgot to show you is how to navigate your routes programmatically. So you can make use of this goTo, which you can grab from app navigation. And then you can just say goTo whatever route you want to go to. So let's grab this import. Let's use it on the main page here. So index. We need a script tag, so let's add that. Let's import that. We only need goTo here.

Let's import that. We only need to go to here. Get rid of all this. OK, and let's add a button down here so we can programmatically navigate to another route. So let's say button. Let's go to about page. And we can say onClick equals. We'll just do it in line here. Let's say goTo /about. And that should work, hopefully.

Now if you do it this way, everything is run on the client, which is totally fine. But now that we're using spellkit and have access to a server, you have the option to load your data on the server as well. So again, if you've used next before, it's very similar to the getServerSideProps method. So let's go back to our app and let's go back to the posts page. And let's see if we can get a list of posts here. So we'll make use of the JSONPlaceholder API, which you can find here. There should be an endpoint for posts here. There it is.

There should be an endpoint for posts here. There it is. It returns 100 posts. But I'm going to limit it to 10 posts. So you can say ?_limit=10. OK, so let's grab this, go back to the docs here. And you can see we can define this load function, which we already did earlier. And it says it runs before the component is created. It also says it runs both server side and client side, depending on the request. So let's go back to our posts page here.

It also says it runs both server side and client side, depending on the request. So let's go back to our posts page here. So posts.index, let me just paste in the endpoint here for now. Let's grab the script context equals module. So we did this on the other page, actually, the dynamic route, but we'll do it in here as well, since we have to grab data from a external API. So let's paste that in. Let's grab the method signature. So let's grab this. Let's paste that in as well.

So let's grab this. Let's paste that in as well. Let's close out the method. And let's go ahead and make a fetch call here. And you can see we are destructuring fetch here, and this will work both client side and server side. And it's the same API as fetch in the browser. So let me just save that to reformat. And let's make a new variable for our response. So const response equals, and we have to await fetch here.

And let's make a new variable for our response. So const response equals, and we have to await fetch here. And the endpoint is down here. So let me just paste that in. And we'll start with the happy path here. So let's just return an object. And if we return props here, whatever is returned in here will be available client side. So in this case, if everything goes well, we want a post variable as a prop client side. And we can say await response.json(). And that should be our list of posts.

And we can say await response.json(). And that should be our list of posts. Okay, so now we can define our normal script here, accept that prop, and then use it in our template. So export let posts. And within our template, we should be able to loop over them. So let's put it in here. Let's put it within a <ul>. And we are looping over our list items here. And I also wanted to link to the single post page, so <li>.

And we are looping over our list items here. And I also wanted to link to the single post page, so LI. And let's go ahead and loop over these. So we'll make use of our snippets again, foreach to loop over them. So it's $posts as $post, they should go in there, let's say $post->title. And the link should go to posts slash $post->id. So let's say slash posts slash $post->id. Okay, sorry, $post->id. And I think I put the title in the wrong place. So let me just put it inside the <a> tag.

And I think I put the title in the wrong place. So let me just put it inside the <a> tag. Okay. Let's save that. And hopefully that works. So back to our app, go back to our posts page. Sorry, this should be postTitle. So let's try that one more time. And you can see it does work now. So we also have to make sure that we handle the error case.

And you can see it does work now. So we also have to make sure that we handle the error case. So back here, we can also return the status here. So status is response.status. And it's handled the error case here. So we can say if the response is not okay, okay, again, we can return an object, which has the status, which is response.status. And also in the error here. And for now, I'll just throw an error that says something went wrong. Okay, save that.

And for now, I'll just throw an error that says something went wrong. Okay, save that. This should still work because there is no error. But let's also make sure to handle the single post page. So back here, we can do pretty much the same thing here. Let's get rid of these variables that we don't need. So we only need fetch here. Let's grab this entire script. Let's use it in our dynamic route here for the post. Let's get rid of this here, space that in.

Let's use it in our dynamic route here for the Post. Let's get rid of this here, space that in. And we do need access to the params here. Let's grab the params as well. So that's how we got the ID earlier. So the endpoint is now posts/{postId}. So we can say params.id. This is all the same. This is now a single Post. We can accept this Post as a prop in our client.

This is now a single Post. We can accept this post as a prop in our client. So this should be post now. And within the <h2>, let's just add the title here. So post.title. And let's put the body within a <div>. The field should be body. OK, hopefully I did that right. Let me just refresh here. And it does work.

you can just fetch data within a mounted hook like we did in a previous video. But if you want the option to load data from the server as well, then make use of this load function here. You can make use of fetch in here. Whenever you return the props in here, you can accept them in the client here and then use them in the template here. So yeah, just an overview of some of the features that FeltKit has to offer.