Set Up SvelteKit From Scratch And Understand How It Works

hey friends in the previous video we learned about what swell kit is but this one I'm going to take my time to explain the entire cell kit project structure including every file I don't know about you but when I'm learning something I want at least a high level understanding of what makes it work understanding what makes swellkit work is going to give you more confidence using it as you get more familiar with it like getting to know a friend and there's a lot of people that are newer to development and don't even know about these files and they're going to be the same across most JavaScript projects I'm going to show you how to set up swelkit yourself without the CLI but don't worry we're going to use off the shelf Parts instead of doing swell kit from scratch after that I'm going to walk you through the soil kit CLI and explain every file so you at least understand the purpose of it and if you're one of those weird people that want to understand how silk it works under the hood well I'm that weird type of person that made learn how swelk it works that you can read or watch so you can go here you can get the popcorn or you can read it or watch it alright so let's get started I'm just going to create a new tab so you don't get distracted and I'm going to open a new terminal and to be honest with you it's been a while since I actually created a project from scratch because I'm so used to using some CLI but basically in the post I use npm but honestly if you want to save your hard drive please get set up pnpm because it's going to reuse packages for your project so it doesn't destroy your hard drive and I really love it so I'm going to use pnpm here but the commands almost map one to one with npm but it's up to you so I can say pnpm in it and basically is going to create the Json file so let me just close the terminal and here in the sidebar here is a package Json and I just like to remove most of this junk we're going to add scripts ourself basically we could have created this file by hand but basically that's how you do it save this so let me just open the terminal and we're going to need some packages so what is the minimum required amount of packages for soil kit and it's surprisingly a low amount so there's four packages we need to install I think so let's go we can say pnpmi we need to install them as a development dependencies so you can already see here is Veet then we need swellkit itself circuit is just a vid plugin so that's why we need veed and then we also optionally going to install the adapter and swelt for the component framework so I'm just going to install it like this initially populate our package.json give it a second and you can already see the blazingly fast speed of pnpm and this is just because I save this file but if I autoform it I'm just going to predify everything so let me just close the terminal so you don't get distracted and at the top I'm going to declare that we're going to use a type module and you might see this in circuit projects we're definitely going to see it because silk it uses native JavaScript or ecmascript modules and what it basically means if I go here so that's basically this syntax so you can say import package from package and in the past this wasn't supported by the browser so you needed a bundler to transpile this so it understands it using the old common JS or require syntax so if you're familiar maybe something like this require and then you do this and basically this is using the native JavaScript modules that's part of the spec and that's something that browsers understand okay I'm just going to close this and basically I'm just going to add a type here and I'm going to say module here you can see it offers us common jsr module another thing worth mentioning is if you're using native JavaScript modules and you want to use something that's common.js you can just suffix it with the dot CJs type in your project and it's going to work so that's great but we're going to need some scripts to run the development mode to be able to build a project in pre-read and basically scripts are just a way to run some script from your file system usually from the node modules folder so I can go here I can just say Scripts and then we're going to add one for development and then we can just say wheat Dev we can add one for building the project create build and then let's add one for preview so we can say wheat preview now let me just save and this is going to Auto format by the way if you want Auto formatting in narrator you can go to your vs code settings and enable format on save so if you're using prettier it's going to do everything for you basically or you can look it up how to do it for the editor you're using and basically that's it we just need to do a couple of more things so swellkit requires a Veet config at the root of the project in the previous part I talked about how cell kit is a wheat plugin and I'm going to show you that so let me just close this file I'm going to open the sidebar I'm going to create a new file is going to be named wheat config.js let's just keep it simple I'm going to close the sidebar so let me just import the cell kit plugin that's exposed from swell Js kit wheat so here we can also include some JS Dock types we can say type import and we can just say here user config so we just get Auto completion because you're not using typescript for this file so here's the magic sauce so we can just say const config now we specify wheat plugins and right with plugin we want to use swelkit of course and that's basically it this is the Beating Heart of swellkit and we just need to export the config export default config let's just save it and that's basically it you can also optionally include a swell config file so you can get pre-processing and adapter to Output your project and I'm going to explain what it means in a second so let's do that because we can so we can say sweld config.js and now I'm going to import the adapter reinstall so you can save from so JS adapter Auto and now we're going to import the preprocessor so you can say wheat pre-process and it's already also completed this for me which is awesome so let me just include the JS Dock here you can say type import is going to come from swill.js kit and from here we just want the config and now we can also give it a config like we did for read so we can say cons config so we're going to declare a preprocessor so you already see how we get great autocompletion and then we're going to save it preprocess which we imported and Now options for cell kit we can say kit we can specify an adapter and we can just use the adapter and also don't forget to export your config export default config save it and that's it so let me explain what these things are a preprocessor transfers your dot swell file before passing it to the compiler in this case Veet pre-process handles typescript post CSS and scss or SAS as some of the language flavors which you can read more about in the swelki documentation so if you go here to Integrations it tells you the same thing I did right now for preprocessors as you can see here in David pre-process section V plugin soiled offers a wheat pre-process feature which utilizes Veet for pre-processing and you also have some other fun preprocessor you can use or whatever and basically this is a really fascinating thing you can for example make preprocessors that maybe turn your dotswelt files into slidex or whatever that's actually a fun little project I worked on previously and I might make a video on it in the future I talked about it previously but an adapter is used to adapt your cell Kit app to the deployment Target you can write your own adapter but it's supported adapters include Cloud Fair pages so you can go here you can host your cell Kit app no problem with your configuration netlify awesome host versus Cell awesome host you can also do node.js you can use a static adapter if your entire app is a static site you can even use Community adapters to deploy to Target platforms like Dino for example but alright we're not done yet so let me just go to the new tab so it's not distracting I'm going to close this so now swelkit expects a HTML page template with placeholders that swellkit uses and replaces for your pages so inside of here I'm going to create a new file which is a Nifty trick so I'm going to say Source in vs code and then I'm going to say app HTML that's going to create a folder source with a file app.html inside let me just close the sidebar briefly and I'm going to commit a crime and write awful markup but thanks to browsers understanding being able to build proper HTML Pages this is going to work fine so you can just say head and now we can use swellkit dot head so I can close it like this and then we're also going to need a body so we're also going to say swellkit dot body and let me complete this I'm going to save this and this is almost it but we need to do one more thing and that's adding our route that's going to be the first page someone sees when they visit the site so I'm going to open the sidebar again inside of source I'm going to again do new file I'm going to create a folder routes and I'm going to create a special file plus page sweld so you can see here is the route folders and the file we created so I'm just going to use a H1 tag and I'm going to say hello I'm going to open the terminal now clear everything so now we can run development mode and everything should work so we can say peer PM run Dev and awesome our Port started on localhost 5173 and if you're curious why is it using this weird number and apparently the V developers are comedians because you might have noticed it but 5173 is lead speak for wheat or it can even spell outside so that's really hilarious in my opinion but it basically that explains it that it's really interesting but okay enough talking let's just go to that Port so you can say localhost 5173 and everything should work and it does awesome but we also get some one error which is the favicon so you can also include a static folder here you can include the favicon but I'm not going to do that so let me just close the terminal and one thing worth talking about is also that swellkit creates a special dot swelt dash kit folder that has all your generated files as you work on your project so you can ignore or delete this folder because it's going to regenerate each time you run Dev or build and this is how for example the magic Source works for generating types for your pages which you can find in this folder and this is usually going to be the output of your project and you're going to see a types folder here you can see the type generated right here so basically that's it for swelki from scratch and in the next section I'm going to show you how to use the cell kit CLI where I'm going to explain every file and folder alright so I deleted everything so you can start fresh and here we're going to use the recommended way of scaffolding as well keep project which is using the swellkit CR I so I'm going to open the terminal and if you're following these steps along and if you're new to this you're going to need node.js at least so you can run this type of commands you can also get pnpm or you can use npm if you prefer so how do we scaffold a swell project where it's very simple so I can just say pmpm create in my case and I can just say pnpm create swelt and this is going to start an installation wizard so it's going to ask you where should we create your project I just want to create it in the same folder so I'm just going to press dot or leave it blank which I'm going to do and now it asks you what you want to do so you can get the demo app which has a lot of examples you can create a skeleton project that's empty barely has anything and then you can create a project if you're working on a library but I'm going to pick the skeleton project I'm going to pick typescript but if you want you can use JavaScript so I'm going to pick the tiger syntax we really want eslint we really want prettier and also going to say yes to everything basically so I can explain it we want yes for playwright v test let's just say yes and then when this is all done you have to install the packages so you can say pnpmi and that should take a second great so I'm going to clear the terminal and now we can run your develop user and you should see that everything works fine so we can go here same as before we can say localhost 5173 and this is basically it I like how the Bare Bones project doesn't have a lot of things so you have to delete a bunch of files and Etc but in this case I'm just going to close the terminal and let me just talk about first about the things we selected so first one was eslint right and if you're not familiar eslint is like a spell checker for your code that gives you useful warnings in your editor from checking your code for problems like accessibility so let me just see if I can quickly show this if I go to routes page and for example I'm just going to delete everything let me just do something that it doesn't like so we can say whatever and you can see here we get some warning and we can hover over it so islint is saying accessibility pound is not a valid ref attribute and this is how svelte really leads you to the right way with accessibility and other useful warnings but in this case I can just delete this and close it so whatever if you're going to discover that eslint and typescript make a great Duo ensuring you don't do something goofy next let's talk about prettier so prettier is an opinionated code formatter you might find it does some things you don't like but it's a great trade-off considering you don't have to think about formatting your code and it's going to be consistent for everyone else working on the project I also recommend you enable format and Save which you can look up how to do for your editor but again let me just open this file so you can say heytron for example hello world and I can just press save and this is going to get Auto formatted and now you don't have to ever think about how to format your code and Etc because prettier just does it for you let me close this file and let's talk about playwright which is interesting so playword is used for end-to-end testing and end-to-end testing might be way what is that so basically you can test how your user might use the site using a real browser and you can check for example if some content is showing or test your registration or checkout process say for example on Joy of code they have posts and I just want to test if those posts are visible on the page so I can basically just click around and see if it works and next let's talk about another testing tool which is v-test which is a blazing fast unit testing framework so we test as it says is used for unit testing and what does that mean that means you're testing one unit of your code so for example you can use playwright to test your site using a real browser and see if your content works like I gave you in that example but you would use v test to test the input and output of the function responsible for sorting the content in some order right so that's basically what a unit test is and I also want to show you that in the examples so for example here is the test we talked about playwright so basically this is just going to open a browser in the background which is going to run headless but you can also specify so you can see the browser and what's going on on the page and this just checks if index page has accepted H1 so that's basically awesome and here is an example I believe in Source index test yes here is an example using v-test so this is a unit test you can see it checks if Sound Works so if the function sums up 1 and 2 to equal three but alright let's look at the beautiful tree we inherited from scaffolding the soil kit project just close this and I'm just going to close all these steps so they're not distracting and let me just close these two so the first folder is the one created by swelke which is dot 12 kit we already talked about this but it's a folder generated by swellkit and it's safe to remove so we can can just ignore this for now and if you're not familiar with the node modules folder here's basically where all your packages go so here leaves Soul kit vid and Etc your binaries if you run something like pnpx this is going to get stored here in your binaries so you can run it without having to install the package globally if you ever done that we close the null module let's look at something more interesting which is the source folder so this is the heart of your project so here we have routes which swell kid knows to map to a page so whatever you create here you're going to see in the browser there's also going to be another folder here which you're going to use to store shared components which is going to be lib so you can create that if you want and this is also aliased in spell kit as a special Imports you don't have to do that convoluted trailing where you do dot dot and then slash Etc you can just say dollar sign lip and it's going to know the path to it you can also specify your own aliases so for example you can have an alias to your Styles Alias your components and Etc okay let me just cancel that out here are some files that are specific more to typescript so if you don't use typescript you can just ignore this but if I open app.ts this is used to add some type information for some special swell kit objects which we're going to talk about in later Parts you don't really have to think about this and I can just close this we already talked about app.html it's a template used by cellkit for your pages and here let me just show you so here it uses the favicon some meta tags and this is really interesting so it also has for you data preloading which is on Hover so it starts fetching the data on your page in advance it's well kit knows thanks to code splitting what the CSS in JavaScript is required for the next page and here you might see something interesting why is this swelkit body inside of this deck and this is basically to avoid some problems with extensions that inject themselves into the body this is just how swelkid avoids that problem alright so we can close this file and I already showed you the v-test one so we can skip that so here is the static folder and here you would place your images or whatever you have like favicon so basically it's nothing special here are your tests so I already showed you this for playwright you can place or test whatever it is because Vitas is going to scan your entire project so you can put your test besides your component or in one folder that's really up to you so elk it really has no strict opinions on this so we talked about eslint and here is the eslint config file and it looks intimidating and you really don't have to care about anything inside here what you do might want to know is that you can extend this so you can add your rules you can disable rules and Etc let me just close this so I have a git ignore file if you're not familiar with this this is basically going to ignore files and folders you specify when you push your project to GitHub for example you might not want to leak your environment variables and Etc but yeah here is another interesting file dot npmrc so this is a config file for npm and it has this option here engine strict true and basically what this means is that it's going to refuse to install packages that aren't compatible with the version of node.js you're using but yeah that's basically it so you also have a prettier file here so you can choose your preferences you can say use steps for example I prefer not using semicolons so you can go here you can say semi false and then you can also pick some other options here are some good defaults in my opinion another interesting thing is if you go to package Json let me just go here so it would be really annoying if you change this to not use semicolons and we have to open every file and press save and format but instead of doing that you can go here you can just run the command to format your entire project which is right here so we just run format and this will run prettier for you same for linking so you can check your projects for errors you can also run unit test and Etc here are some really useful scripts for you to use but yeah let me just close these files and you already might know about package Json but basically this is where order package information is being kept scripts and Etc and even if you wanted all of these ignarly dot files here which is unavoidable in doing modern JavaScript development where you can have all of this inside your package Json if you want which would be kinda unmaintainable but that also obviously depends on you and then we have our player config which you will learn from reading the documentation because this really has nothing to do with circuit they just really make this setup easy for you to configure playwright and that is really fascinating so I can close this so you have your log file here if you don't know what this is you can lock your package versions to a specific file so when someone else downloads the project they're going to get the same version as you have so that avoids issues and of course what we never do when we start the new project or whatever is actually read readme which explains almost everything so this shows you creating the project how to install the packages how to start it and how to build it but yeah I basically read your readmies right so here we already looked at it but here is the swell config that we did by hand previously and it's exactly the same nothing special so we can also see the vidconfig here which is the same as before it also has some extra things for tests to include some files nothing special so you can just close this and here is the tsconfig file so basically this extends the swell kit typescript configuration file you can also change this however you want you can enable path aliases here it shows you some useful information but that's basically it if you're newer to development you might be hearing some of these things for the first time but you can ignore most of them to be honest and there's really a lot of junk in these files and it really can be avoided because that's how mostly modern web development is done and this is like nothing compared to a real project we're going to have even more files so for deployment you might have a Docker config and Etc so that really gets out of hand quick so there's really not a fault or spell kit but just the general JavaScript ecosystem so I hope this gave you a better understanding of these configuration files in general because you're going to see them in every JavaScript project but now you're a certified swelkit connoisseur alright so don't forget to like And subscribe and you can find my patreon in the description thank you for watching and catch you in the next one peace [Music]

Channel: Joy of Code

Views: 17,267

Keywords: svelte, sveltekit, project structure

Id: 5VBdyfGhs7A

Length: 22min 48sec (1368 seconds)

Published: Thu Dec 22 2022