Get Started with Svelte and SvelteKit

hey everyone my name is brittany postma and i'm the front-end designer and developer over at codingcat.dev i'm also the co-host of thepodcastperfect.dev and today i hope you're here to learn about svelt because this is let's learn spelt what in the world is spelt and what does that word even mean well google tells me synonyms for the words felt are graceful and lean and that's exactly what the svelte framework is spell is a component framework that allows you to break up your application into reusable chunks and provide some sugary syntax making your code easy to understand and very graceful svelte is similar to react and view with one key difference there's no virtual dom instead of letting the browser do the work for us spelt compiles itself away during a build step into vanilla html css and javascript making it one of the leanest frameworks out there it also provides a global state management solution with felt stores if you've been around the javascript framework ecosystem for a while you may have heard some noise about spelt kit so what is felt kit why did rich harris the founder of svelt decide to stop production on sapper completely and move all new development to spell kit while before it could be quite confusing for users that were new to svelt to decide which path they should take when starting a new project svelt or sapper the goal with spell kit is to have a single recommended path for building everything from high performing web apps to static blog pages with spelt kit we get file system based routing optional rendering code splitting css scoping by default the ability to completely disable javascript on pages and more i should note that at the time of recording speltkit is still in public beta and things could change or have updates between now and then if all of this doesn't convince you to give speltkit a try though maybe checking out some code will before getting started with spelt kit you're going to want to have the latest version of node running on your system i'm running the 16.2 current version but the 14.17 lts version should be good enough to start with now we've navigated over to the beautiful new homepage of sveltkit at kit.spelt.dev if you've got the latest version of node installed now we can scroll down to see what commands we need to run in a terminal to get started with a new spelt app so here i've just opened up a new instance of vs code into the folder that i want to put my project into and i'm going to be using the integrated terminal and vs code with git bash so i'll go ahead and run this command npm and it's felt at next and the next will actually be able to be dropped so it will just be npm and nets felt after the it's out of public beta and the my app is just the name of the folder that we want to create so i'm going to call mine spelt kit starter once we hit enter on that we get a message that pops up that asks us if we want to start with a demo app or if we want to do a skeleton project here i want to do the skeleton project just so we can build up and see what's felt kit can actually do we're not going to use typescript eslant or prettier today so we'll do that and it gives us the next steps that we can do so we need to change directory or cd into that folder that it just created for us we'll do that and i'm going to open that up in a new vs code window so we have our folders here on the left now just place that over here and open a new terminal up and we can then run the next steps which were npmi to install all the dependencies that we have and if we look at the package.json we can actually see that we only have two dev dependencies this felt js kit and then the spelt compiler itself look at that it only took two seconds for that to complete installing so now we can run this npm run dev command and pass it a couple of arguments to go ahead and open that in the browser for us and that's going to open our local host 3000 in the browser and we can see this markup on the page so let's take a look through the application and see what's felt kit gives us so we've got this felt.config file and we can see this target of idsfelt this is the target that where's felt hydrates the app in the browser for us so let's go to src and find this app.html here we can see our container with the id of svelt and this felt body is just injected into that and this felt head is injected into the head section at the top this is not the actual root of the application though if we go and we find the index.spelt file under routes we can see all of the markup that we see on the page in the browser and if we edit this and then save it we can see those changes almost instantaneously with that white hot module reloading it's really awesome so there's not a lot in the skeleton project by default but if we check out this js config file we can see that we have this thing called an alias set up here for us this is dollar sign lib for the lib folder in src lib what this is is this allows us instead of typing out the full path for each component or anything that we want to put in the lib folder we can actually just put this dollar sign lib and that is the base path that it's going to use for that other paths can be set up or other aliases can be set up in the svelt config and the js config file by editing the veep config we don't actually have this folder yet at src lib so we can go ahead and create that create a new folder and do lib and now we will be able to use this dollar sign lib instead of having to type out the actual path to the folder when we make things like components or other things in that folder so let's go ahead and do that let's create a new file we're going to make a header dot spell file and this will be the first component that we're going to create so i'm going to just start by writing some regular html here and create us a header component so we're going to have a nav inside of that with a list and inside of each of these list items we're going to have a link that's going to go to a page so for now we're just going to put the href for this one as home which is the backslash we're going to name that home and i'm actually going to just copy this right here and paste that three times so now we have an about page about link and a blog link and now we can change these hrefs to be the route that they're going to go to so about and blog but just setting those there doesn't actually give us those routes we need to create new routes for each of those in this routes container so let's do that now let's create a new file in routes folder for about dot spelt and you name it whatever you name your file and header so your path here is about we named it about.spell and that is the new route that we've created so now we have this basic header component but we're not using it anywhere yet so we don't want to just have to copy and paste it onto each page that we have we can create this new file called underscore underscore layout.spelt and that will actually wrap our entire application and if you saw on the left it actually disappeared because what we have to do to get the content to appear back is to put a slot in and a slot component allows us to nest children inside of it so as soon as we save this we can now see our index route appear again so there's that but we were talking about the header component so let's add a script tag to the top just like we were writing javascript we can write import header and then from and we can use that dollar sign lib syntax that we talked about earlier and say slash header dot spelt and then we can use that down here in the markup like this and when we save that we should see our unordered list now these aren't very pretty right now so we have two options for styling in svelt we can do scoped styling and we can also add a global css file that we can import into this layout component and we can come back over to layout.spell and we can import that here make sure we get the path right we need to go out of the routes folder and then grab the global.css file and once we save that we should see some much nicer looking code here so let's close out some of these extra tabs that we have going on and go back to the index.felt file and here i want to talk to you a little bit about the things that's felt kit can do so first i'm just going to erase all of this markup that we have because we don't need it anymore and i'm going to use the script tag again but this time we're going to use this context equals module and this is for the esn modules that veet and speltkit provide for us so inside of this we're going to type export const pre-render equals true and what this does is this is going to allow this page to be statically generated once it is built so the server is going to pre-generate all the html that it's needed and it's not going to need any javascript in the browser at all next we're going to use just our regular html markup and just make some a welcome message welcome h2 and say let's learn spelt save that and then i have this counter component from the demo app that i actually want to pull in and show you how it works so i'm going to pull that over here into the lib folder and we're going to look through this this is the spring animation that you get from svelte by default that's another thing that's felt just provides for you out of the box is animations and they are really awesome so this top code is just some javascript that is handling the negative numbers and in instantiating the spring animation down here below we have some funky looking syntax so we have this on colon click so on inspect with a colon after it is a way to handle events that fire in javascript so when this is clicked it's going to decrease the counter by one and when this down here is clicked we're going to increase the counter by one so let's go back to index.felt and actually use this so we have our module up here but we need an actual regular javascript script tag to import our counter so we're going to import the counter from and again we're going to use that dollar sign lib to path it and give it the counter spelt file and then we can just use that right down below now we have a pretty looking counter there that's got some nice animations to it so let's make this look a little better so we're going to use our scope styling here and we're going to just use the section tag because this is not going to affect a section tag on the about page or any other page that we create it's only going to affect this index.felt file so here we're just going to give it a minimum height and we're going to do a calc function of 100 vh and subtract i have a variable set up for the header height here so we get 100 vh without the header height on it and we've got display grid and then we're going to place items center and place content center so we can get that in the middle of our screen save that and now we have that all set up let's actually go back to our header and give that some styles as well now so in the header what we are going to do is i am going to add an image to this left side over here so i'm going to do a div with a class of left and in that we are going to do an image and for the src we don't really have any images in our folders right now so i'm going to grab the images from the demo app and drop them in this is in a static folder and i'm going to drop that at the root of the application it's going to ask me if i want to copy it or add it to my workplace and i want to copy the folder over so now we can open that static folder and see that we have this felt logo so spelt does the pathing for us to that static folder automatically so we can actually not do any path at all and just type spelt logo.svg every image tag needs an alt unless it is not important so we're just going to type spelt logo in that and then close that image tag and save that and we've got that file there or that image there now immediately but it's kind of big and ugly so let's go down here and let's add some styles so we can target that image by saying class left and then image and we're going to give it a width of two rim and a height of two room just so it stays in give it an object fit and contain now it looks much better so the other things that we can do is give this header some styles by giving it the height of our header height display flex justify content space between and align items center and i'm not going to make you watch the rest of this so i'm just going to drop of the styles in here so i dropped the styles in there and we now see that i have this active and it tells us this is an unused css selector so this is a something that's else that spelt does if we're not using a selector it's actually going to purge that out of our files for us but let me tell you how we can use this active class so let's go up to the top and add a script tag and we're going to pull in a store so we need to import the page from the app store so we need to say dollar sign app and then slash stores and this page is going to be able to tell us what route we are on in the spell application so we're going to go down here to these a tags i'm sorry to the li tags and i'm going to hold alt on my keyboard and click inside of each one so that i have all three selected and type class colon this is another special spelt syntax active and this will be active when whatever is inside these brackets is true so we can use the dollar sign in spelt for reactivity so anything that is on that dollar sign anytime it changes it is going to update immediately for us so if this route updates from that page we want to know about it so it's page.path and we say if that is equal to whatever each of these routes is we want that active class to go on to it so this first route i clicked off of that so now we just have the one is going to be the forward slash the second route is going to be forward slash about and this last route that we still haven't created yet is going to be forward slash blog and then i'm going to save that and now the home screen or i'm sorry the home link actually has an underline on it when we're on that page and although we don't have anything on the about page we can navigate to that and it says the blog page now if we navigate to the blog page right now it's not going to it's going to give us a 404 because we don't have anything in there we don't even have the route created so let's go back to the home screen and we have i'm going to create one more class over here i just noticed that it wasn't centered so we can do a div with class right on it just so we don't even have to put anything in it but now it will be centered and that way we could add a link or something later if we wanted to add something to this side and i want to give this some margin left of one room and now it's away from that side a little bit okay so now we can close out that header component and look back at our about page and in our about page i want to talk some more about the things that spelt kit gives us in that context module so in our context module we have three different things that we can provide to svelte to tell it how we want it to render so we need to import a couple of them so we need to import browser and dev from the store dollar sign app slash end env and we can use those with that export const syntax again so we've got in export const hydrate equals dev so this happens when the client takes over from the server rendered javascript so if we don't need any javascript on this page we'll throw this on there so that we will only get it in the dev environment so we get the hot module replacement otherwise we don't need it and then we can use export const router equal to browser if we save that here and then we navigate off of the about page we can watch and we can see the browser actually do a reload on it but once we go back to that route it will be a client rendered navigation and the last thing that we can use is this export const pre-render equals true which is what we already use that gives us the statically generated page and on this page we're just going to write some markup but i want to talk about another thing that we didn't do on the index route yet which is our spelt head so spelt colon head is the component that gets injected if you remember from the app.html file into our head section so we can put any of our metadata there or the title of our page so we can go here and we can say about save that and that gets injected into the browser for the title you could also throw your metadata in there like open graph images and descriptions for twitter and discord and things like that and then on this page we're just going to throw a regular section and just say title about this is the about page now we're going to talk about the dynamic routes that we can do in spell so to do a dynamic route we need to create a folder instead of a file so in routes i'm going to create a new folder called blog and whatever we name that folder is going to be the name of our route and inside of blog we provided an index dot spell file and that is going to direct to the slash blog route whatever we put in here so inside here we can use that script with the module again the context equals module and every dynamic route actually every route in a spell kit file is provided a load function that gives us page fetch context and session so a load function runs when the server rendered javascript is hydrated into the client so we're going to export async function load and we're going to give it the parameters that we need to grab so for this case we're just going to use fetch like i said there's page fetch context and session and inside of this function we are going to call an api we are going to provide it some kind of fetch function to go get it so if you were doing local files you would need to have some sort of file like an index.json that you would be able to fetch and get and post things out of that but in this case we are going to fetch my dev.2 post so i'm going to do a const response here and we are going to await the dev.2 api so we're going to fetch that from https colon backslash slash dev dot 2 slash api articles and then we give it this query parameter and say user name equals to mine is be designed but you could throw in yours if you wanted to and we're going to fetch that data i forgot my backtick there to close that so now we've got this response that we are awaiting the fetch of from that url and we're going to say const host is the await of that response so response and this is a json response so we need dot json on that and what we're going to get back from that we want to return out so we need to return and we can return this object that's going to give us props for our component so we're going to return the post to the props to use a prop and spell we need a regular script tag and then we can say export let post and this gives us access to any props that we need in our components so now down here we need our spelt head to give our title a blog and now we can just write a regular markup we can write a section tag we can give it an h1 with a blog and then we need a ul that's going to list out all of our articles but how are we going to do that well spelt provides us with this each block that allows us to loop over an array and say each post because it comes back as an array as post we can close our each block like this with a backslash and now whatever we put in here is going to be repeated over the entire array so we've got our ul but now we need an li for each one and i'm going to wrap it i don't want to do an h2 an a tag with an href equal to and this is something that you have to get off of your api whatever your api returns so you want to do it at slash blog because that's the route that we provided and then slash dollar sign to get our template literally javascript in there and it's going to be post.id is how we're going to get the specific article back from dev.2. we can close that out and then give our a tag a name and we can use post.title here and save that navigate over to our blog page and we see we have a list of all of my blog postings but right now if we click on it uh oh we have four or four so what do we do here each of these listings is going to be a dynamic route you're going to get a different id if we inspect these we see that each one of them has a different id number associated with it so in spelt we do this by giving it a slug so we're going to create another new file inside a blog with these brackets around it move that so you can see and it's got the open bracket and then slug close bracket dot spelt and this is a completely dynamic route so whatever that slug is is what is going to be provided to it so again we need to provide it that context module and say to load the correct things so let's do script context equals sorry module and we're going to export async function load and this time instead of just the effect we need the page too because we need to be able to get the parameters off of the page that we're on so we're going to grab page and we're going to grab fetch and here we can say const response again because we're doing a similar thing where we're awaiting fetch we're going to fetch this url and go ahead and close both backticks this time and this time we're going to say https slash dev dot 2 api slash articles and now we need to give it the id for each one of the articles so to do that we grab the page dot params dot slug and that will give us the id to each one of the articles when it's clicked on and now from that we can return our post equals a weight response.json and then we need to return our props again return props and post and again we need our regular javascript script tag and export let post to give us access to that prop and then down here in the markup we're going to do spell head and do a title and use post.title in this felt head and then down at the bottom we're going to do article and give it an h1 of post.title and to insert javascript we put these curly braces around it and spelt provides us with this at html so this will inject the html into our markup for us so at html and we need to grab that off of the post.body underscore html and again i found that by looking at the dev.2 api and figuring out what it was called so once we save that we should be able to navigate into any of these posts and see our article there we go we can go back to blog look at a different one we get all the images and everything provided to us in that html right there and our app is complete i've added all the work that we've done here today to a github repo at github.com slash britney postmas felt kit starter if you want to go check that out i hope you learned a little bit about svelt today and learn to love it as much as i do i'm at brittany postmo most places so if you have questions or just want to talk about spelt i would love to hear from you thank you so much for joining see you next time

Channel: Auth0

Views: 11,126

Keywords: svelte, sveltekit, svelte tutorial, svelte crash course, sveltekit api endpoints, svelte global styling, sveltekit static site, ssg, jamstack, how to code svelte, svelte basics, how to make a sveltekit app, javascript, svelte click handlers, sveltekit dynamic routes, sveltekit server side rendering, get started with svelte, javascript frameworks, web development

Id: fOD_3iSiwTQ

Length: 30min 4sec (1804 seconds)

Published: Wed Jul 07 2021