Sveltekit Crash Course - Svelte Typescript - Getting started with Sveltekit Endpoints

what's up i'm going to talk about sveltkit in this video and how you can set it up with typescript and how to use the endpoints sveltkit seems to be a pretty cool framework that i started to try out and svelt is pretty cool in itself so i think this is going to be a useful video there's actually a lot more to it with svelte so i'm not going to show you everything but i'm going to show you how to set sveltkit up to use typescript and i'm going to show you how cool endpoints can be with swelt kit and we're also going to hit an api that's called the cocktail api or something like that so we're gonna grab random drinks and show the ingredients and stuff for them so that's what i'm gonna do in this video so as always just get started [Music] all right so this is the application that we're building and it's a cool little drink application or if we click this button here you get a random drink and it's from the cocktail db api i think it's called something like that yeah the cocktail db.com so it's one endpoint that i'm using and that's the one that's generating this random drink so this is the app that we're going to build so let's get started i'm going to start off in the console first i'm going to break this application here and go back here and start a new project and with swelt kit you start a new project by typing in mpm init and then we have svelte at next we're going to grab the newest version of swelt kit so swelt at next and then we can have the name of the application and we're going to call it the svelt dash cocktail and we click enter not click we press enter and then it gives some choices here for us and we're going to have a skeleton project we're going to use typescript so change that one to yes it's going to adjust this microphone it's in the way add eslint for codeline thing yes we want eslint and we want to add prettier for code formatting so we select yes and then it will set this stuff up up for us so if we list this one you can see that we have the swelt dash cocktail so cd swelt dash cocktail i clear the console and then we run mpm install to install all the dependencies all right so there it is and then we can type npm run there to start up the environment and here we have the welcome message and the application so we don't really have anything now it's just some text here and that's fine and we're also going to have the console open like this and you can see that we have this warning here but this is okay it's actually not in production it's something with swelt kit they have have to adjust some stuff so don't worry about this warning here no worries at all all right so we know that our application is working so i'm going to open up the code editor and also type in mpm run dev again so we have the application running so we can check out the package json and you can see that this it has installed all the dependencies for us here so nothing really more to do here it's installed typescript and we have the ts config here we have the swelt config everything is set up for us the one thing i noticed in visual studio code is that i had to go into preferences and settings and search for svelt so i have this plug-in swelled for vs code that's the newest one that you should use i had another one before i don't really remember the name but this is the one that you should use svelt for vs code so i have this installed it will give us intellisense and everything everything that we need for developing with swelt so i had these settings here i searched for swelt so i had to enable this plug-in here as you can see here otherwise it won't work it won't give us any intellisense and autocomplete and stuff like that so make sure to actually activate this i don't know why it isn't activated by the default but hey who knows activate that and we're good to go so we're going to create some new stuff inside the source and the routes so inside routes we only have the index dot svelt right now and this thing here has got to go so first we have the regulator regular script tag in swelt this is how you do it in swelt swells when you're creating props and state and stuff you have a regular javascript script tag and the lang is going to be set to typescript otherwise this won't work so it's very important to set that up and then i'm gonna pre create a prop and when you create a prop in swelt you export a let and i'm gonna call it drink prop and i don't really have a type for this right now so i'm gonna create the types later and then we want a state also so let drink stayed so creating a state in swelt is really easy just create a variable like this and this one is going to be set to the drink prop initially and i'm gonna explain this later also because the drink prop is gonna get all the data that we fetch server side and send into this component so we populate this state with that data initially then we're also gonna have a handle on click a click handler it's going to be async like this and for now we can just console.log out click do some order formatting and it seems to be working then we gonna have a div with a class of wrapper then we want the button in swelt you have you type in on colon and click equal and then we have our handle on click like this and this button is going to say get new drink all right so that's the button then we have the title h2 and here we're going to put the drink name later when we get that data so drink name then we have an imd tag it's gonna have a class of drink dash thumb and for now the source we just have a forward slash we're gonna fill this out with the correct source later and we have an alt over drink thumb like that and we can close it so that's the image then we're going to have a p tag with the kind of instructions if i type in instructions for now and then we're going to loop through all the all the ingredients in the drink so for now i just create a p tag with ingredients like that and then we create some small styling for this also so we have our style tag dot wrapper this is regular css so display as a flex flex direction is going to be column we align the items to center and we set the font family to there this one should of course have a colon so that's the wrapper class then we have the drink dash thumb i'm going to set the width on this one to uh 300 pixels and the border radius it's going to be one rm and then we have the p tag it's going to be a max width of 500 pixels i don't want this to be too long in width and text align is going to be center not the very pretty app this one but hey it's not about styling in this tutorial and then we have the ingredients that we're going to create later ingredient and we set the margin to two pixels and zero on that one and you can see here that the intellisense is working it's telling us that we're not using this class now so we're gonna fix that later so say this file go back to the application and you can see that we have something scaffold out here at least and that's great so go back to the code and we're going to talk about swelt endpoints swelt endpoints is yeah you can say that you have your server side code inside of these ones you can for example make api calls and stuff like that and instead of doing it in the client as in this script tag here for example if we call an endpoint here and we have an api key that api key will get exposed in the client as we this is client code but if we do that in an endpoint instead we will hide that cli that api key so it won't be visible in the browser so that's one benefit of doing that and also our component will have the data when it mounts and that's why we're going to send in that data to this prop and populate our state so we're already going to have that data when we initialize our state so that's why we can do it like this here we set this one to the drink prop so i'm going to show you that when we created these routes and stuff so what we're going to do here is that we're also going to create a script tag that we're going to use later so we have a script tag and we're going to mark this script tag with context module and this will make sure that this one will get run on the server and on the client also so yeah we could do some server-side stuff here but it will also expose for example api keys and stuff to the client if we do it here but we could actually do it here also i'm going to set the language to typescript so we have this script tag saved here now for later and now we're going to create what's called a swelt kit endpoint so we have this index.swelt file we're going to create a new file in the routes folder and we're going to call it index.json.com very important this one will create an endpoint you can fetch it like a regular endpoint when we create it like this dot json if we just name it dot ts it will kind of override this component here and it will show this like an api endpoint route instead but if we call it index.json.ts we can hit this endpoint from our application here in this component so we can fetch it with the fetch that as we're gonna do the built-in fetch but you could use uh axios or anything that you use when you fetch data from a rest endpoint all right so we have the index.json file so inside of this one we're gonna fetch some data from the cocktail db we're going to create our own types we don't have the types for this endpoint and i'm actually going to use this endpoint also to transform the data because as you're going to see here this data actually kind of sucks it's not that good to work with to be honest so i'm going to start by exporting async function that is called get so if you want to post something you can create an async function and export it that's called post in our case we're only going to use get because we're only fetching data and this one is going to have the type of a promise because it is a promise it is a generic and we're going to return an object with a body and for now we set it to annie we're going to create this type later but this is how you type your promise and now it complains because we don't really return a promise right now so i'm first going to create a const that's called result and this const i'm going to wait i have parentheses and then i'm going to wait again because i wait first the fetch itself and then i'm going to wait it when i convert it to json so first i await the fetch and this endpoint is going to be http s forward slash forward slash ww uh the cocktail db dot com forward slash api forward slash json forward slash v1 forward slash one forward slash random.php that's the whole endpoint for this random drink that we're gonna get and then i have.json so that's why i have two awaits when converting to json that's also async all right so we're going to return an object we have the body and for now we just put the result in the body like that and now it won't complain anymore and we're gonna console.log out the result i'm gonna show you how this data structure looks like so this is everything we do for now in this endpoint so if we go back to the index dot svelt inside the script that's marked with context module we can fetch from this endpoint and in this one we export also an async function that's called load it has to be called load and this one will provide us with the fetch function that's actually the regular fetch function that we have provided in javascript and i'm going to create a const drink the type is going to be annie for now because i haven't created that type i'm soon going to create it so just hang on and then we wait and we wait again from fetch and we use the fetch and the fetch is going to grab this data from the index.json that we just created and then we convert it just like before to json and for now we can console log out to drink like this so what i'm doing here is i'm doing the exact same thing i'm fetching data but i do it from my own created endpoint here so this is back-end stuff and i'm grabbing it here from my front and stuff and this one will be run both on the server before the component mounts and it will also be run in the client so go back to the application it actually works on the server you can see that his console logs out here in the terminal and you can see this is what i wanted to show you also they have this ingredients here for example and a measure they are all in their own properties and this is not really good to work with so there's 15 of them there's always going to be 15 of them so i'm going to transform this data into something that's more easy for us to handle so that's what i'm going to do next i'm just going to see what this error is it's something in it says it can't find this one i guess it is because maybe yeah i have to return something here also probably return so we're going to return the props this is how you pass in stuff to the props from this function and we have the drink prop and it's going to be the drink so do that and save it go back yeah and now it works so i had to return something inside of that otherwise it will throw an error you can see here also in the client console that we have the drinks here and this is yet again that stuff that i told you that we're going to transform to something else now um because it's not good to work with when we're going to loop over these ingredients so i don't want to return the data is this here so now we're going to create the types and we do that inside the src outside of the routes i create a new file that's called types.ts and now we're going to specify our own data structure here so export type ingredient type is going to equal we're going to have the name as a string and we're also going to have the amount as a string so we're gonna fix this and put that put them in their own object instead and then we're gonna export a type of drink type like this we have the name as a string we have instructions as a string and the ingredients is going to be that type that we created up above ingredient type and it's going to be an array and we have the thumb url and it's going to be a string this is the only data that we need from the api so that's the types for that data so if we go back inside of the endpoint the index.json.ts file we can restructure this data a little bit i remove this console.log i can also say that you can also return a status for this one if it succeeded or you can handle your errors and stuff and return some arrow code i won't do that in this tutorial i don't want this to be too long because i want to focus on how you use endpoints and how you use basic typescript and how you set it up with swelt that's why so i'm going to create a new const here now that's called ingredients with an s and this one is going to be on the ingredient type okay so we imported ourselves up here that's the types that we created import type in swelt and in these modules you have to specify that it's the type that you import otherwise it won't recognize it as a type so we have the drink type and we have the ingredient type from dot dot forward slash types so that's the types that we're going to use so the ingredients is going to be of the ingredient type and i'm going to do a little special trick here now i've got to create an empty array so i have an array dot dot i spread out the array with a capital a and it's got to be 15 elements because we know that it always return 15 properties with the ingredients so that's why i can do it like this and from this one i'm going to run a map we have the value we're not really going to use the value we just need an index you could use a for loop instead if you want to do that so i marked this one with an underscore as we're not using the value we're going to use the index value that's the one that we use and this one will return an object and now we can restructure our data we need the name and from the result.drinks it's in a property that's called drinks even that it's only is one drink so we can grab the first one that's also very strange in the api so we have the first elements it's always going to contain the drink and then we grab the property that's called str in gradient and this is a template literal here i use that in a computed property because i want to to kind of use this index here now and i have a template literal for that so i can use javascript expressions inside of here so i have the i but we have to add plus one because it starts at one and not zero as this one is gonna do this one is gonna do so i plus one this will get us the string ingredient and then we also want the amount of that ingredient so from the result.drinks the first element we do the same we have a template literal and this one is called str measure and we have a dollar sign curly brackets i plus one and this should hopefully transform the ingredients but there can also be empty ones i noticed so we're gonna filter this one also filter we have the ingredient and we're going to grab those that has a name so ingredient dot name like this and hopefully this will work so we can console.log ingredients like this and now it actually complains type name any amount annie is missing the following properties from type ingredient type okay what did i do wrong here yeah this one should be an array like this and this will give the correct type so say the file go back we rerun it and see if we have something this one is going to be in the console oh it's very far down somewhere yeah and here we have it we have the drinks here so we restructure the data so now we have an object for each ingredient and we have the name and the amount and this will be much easier to handle as this is an array so we can loop over the array and print out the name and the amount much much easier so this is also why it's cool to use the endpoints in swelt because we can transform the data and create our own data structure here and this one is not going to be any it's going to be the drink type that we created so it's going to return the drink type and here instead of returning the result on the body we're gonna actually return an object and structure this data as we want it we have the name it's gonna be from the result dot drinks we grab the first element again and we have the ester or drink that's the name then we have the instructions and that one is from the result drinks first element str instructions like this and then we have the ingredients it has the same name as the const i created up here so we don't need to specify more than this the thumb url is going to be the result.drinks 0 dot str drink thumb and this will make sure that it won't complain because now we're providing it with the correct data structure from the type that we created so our endpoint is fully working and we can utilize this in our index component we're first going to import our types again import we actually only need a drink type from dot dot forward slash types so instead of any this drink is going to be of the type print type we can remove this console log why is it complaining import yeah you can see i forget the type in type and it will complain if we don't do that so we have to import it as a type import type and the type name otherwise it won't work and everything else here is fine it's just working as it is we've already created this and we have our drink prop here in the other script tag that's for the client this drink state is also going to be of the type ring type and the drink prop is also going to be of the type green type so we can use this data now hopefully we'll have it in this state that we call green state so instead of the drinks name here from the drink state dot and you can see that we have this beautiful auto completion here the intellisense so that's pretty sweet we want the name here in this one and for the source to the image we're going to have the drink state dot thumb url all right then we have the instructions we have the ring state dot instructions i really love typescript it's so great to have these ones already displayed for you to use and then instead of this p tag here for the ingredients we're going to loop through our ingredients and in swelt we can loop with a hash sign and each and from the drink state as ingredient like that so we have curly brackets and then we end this each loop like this also a little bit weird maybe if you haven't been using swelt now we have a p tag with a class of ingredient and then we have the ingredient itself ingredient dot amount first and then we have the ingredient dot name do some formatting yeah drink stayed wasn't it called drink state why is it complaining yeah it's not the drink state it's the ingredients we're going to look through so dot ingredients and hopefully this will work so i save it go back to the application and here you can see we have everything in order here it works but this button don't work so we have to fix that one also so go back to the code and we have our handle on click we can remove this console.log and instead of the console we're going to do an api call and this one is client based so we do the api call here in the client construct equal we await and we await again if you want to be more explicit you can do this on its own row and then you have a row where you convert it to java json so you don't have double weights here it's completely up to you we're going to fetch from the index.json or endpoint and we convert it with json like this and then we set the drink state to the result and this will update the state hopefully so this is all client based now we're not on the server as we were here go back click the button you can see that it works i love when stuff works and every time we click we get a random drink cool so that's the basic stuff of using endpoints with smelt and also how you set up typescript and get that to work uh of course there's a lot more to it with swelt but i wanted to show this one because it's pretty cool to get started with typescript and svelt and also these endpoints seems to be pretty cool and it's actually not svelte only it's this veldt kit it's called so it's svelte kit that has those endpoints not svelte itself it's felt kit very important and swelt kit is this framework that's based on swelt that makes everything much easier for you to work with svelte so that's pretty cool all right so that's it for this video see you in another one and also yeah i've almost forgot if you like this stuff please subscribe and hit that notification button and spread the word i want this channel to grow big as i want to do this stuff more because i love to teach this stuff for you guys all right see you in another one

Channel: Weibenfalk

Views: 4,197

Keywords: development, coding, sveltekit, svelte, sveltekit typescript, svelte typescript, programming, typescript, svelte ts, sveltekit enpoints, sveltekit crash course, how to make a sveltekit app, sveltekit tutorial, how to code sveltekit, svelte tutorial, sveltejs, javascript, sveltekit endpoints, using sveltekit endpoints, sveltekit endpoints tutorial, svelte 3

Id: 6oDSwcZPbxA

Length: 28min 11sec (1691 seconds)

Published: Tue Jul 06 2021