Introduction to Project Structure
In the last video, we saw how simple it is to create and run a basic SvelteKit application. Now, it's also equally important we understand the files and folders present in the generated project. Let's take a look at that in this video.
Dissecting package.json
I have opened the hello world project in VS Code, and you can see that at the root level, we have four folders and 11 files to begin with, that is of course excluding the .vscode folder. Let's start with the important bits in package.json.
This file contains dependencies and scripts required for the project. We have SvelteKit and Svelte, which are the main packages for the series. As of this recording, SvelteKit version is 1.0.0. Depending on when you're watching this video, the version might be slightly different, but the Core Concepts will remain the same, so you can continue watching the series without any hesitation.
We also have Vite as the build tool along with ESLint and Prettier for linting and code formatting. In simple words, ESLint will highlight warnings and errors in your code, and Prettier will ensure your code is well formatted and easy to read.
Apart from dependencies, the other important bit is the list of scripts provided to us. We have five in total. The first one is the dev script. The script runs our SvelteKit application in a development mode with instant reloading. The second script is the build script, which compiles our SvelteKit application and prepares it for production deployment. Third, we have the preview script, which starts the compiled application in production mode. You have to keep in mind, though, that the build script needs to be run prior to running the preview script. Finally, we have a lint script, which basically lints all the files in your application, and a format script to format all files in your application.
You'll also notice that package.json includes type set to module, which means that .js files are interpreted as native JavaScript modules supporting import and export keywords. All in all, it is a pretty straightforward package.json file with few dependencies and few scripts.
Root Configuration Files
Next, we have the package-lock.json file. This file simply ensures consistent installation of your dependencies, and we don't really have to worry about it. Three other files which we don't have to worry about also are .gitignore, .npmrc, and README.
.gitignore is for version control with Git. .npmrc ensures strict will help enforce Node.js and npm versions. And the README file contains a few instructions related to running, building, and deploying the application, which we will of course learn as part of the series.
We then have svelte.config.js, which is the SvelteKit configuration file. This file exports a config object and is used by other tools that integrate with Svelte. At the moment, there is one configuration for adapter. Adapters are small plugins that take the built application as input and generate output for deployment. Now, if that is confusing, don't worry about it as it is something we don't have to tackle as a beginner.
Next we have vite.config.js, which is the Vite configuration file. A SvelteKit project is really just a Vite project that uses the @sveltejs/kit/vite plugin. Along with additional Vite plugins we can specify in the config object.
Next, we have .eslintrc.js, which is the configuration file for ESLint. We extend the recommended ESLint rules and add Svelte as a plugin. We also have an .eslintignore file to list the files that should be ignored for linting.
Finally, we have .prettierrc, which is Prettier's configuration file, and .prettierignore, which contains a list of files that should be ignored for formatting.
Project Directories Overview
All right, next let's talk about the different folders. The first one is the .svelte-kit folder. This is a folder that is generated when we run either the dev or the build scripts. It is from this folder that our SvelteKit application is served. You can see that the folder is git-ignored, which means that we don't have to worry about this folder during development.
The second folder is node_modules. This is a folder in which all the dependencies are installed. It is generated when you run npm install. This again is a git-ignored folder which we don't have to worry about.
For the third folder, I'm going to jump to the static folder. Any static assets that should be served as is, like favicon.png or robots.txt, go in here.
The src Directory Explained
The final folder in our project, which is also the most important folder to begin our SvelteKit journey, is the src folder. The src folder contains the most important parts of our project. At the moment though, we just have two items. First, we have the routes folder. This folder, and this folder alone, is responsible for the entire routing feature in our application. Now, I don't want to dive deep into how routing works in this video, as that is what we're going to be learning in detail in the next section. But I will tell you that +page.svelte is the file that gets served when we visit localhost on port 5173 in the browser. This is also the same file which we modified in the last video.
Finally, there is app.html, which is the page template. This template currently has three placeholders: sveltekit.assets, which point to the static assets; sveltekit.head for handling link and script elements needed by the app; and finally, sveltekit.body, which is the markup for a rendered page. When you visit localhost port 5173, the contents from the +page.svelte file replace the sveltekit.body placeholder. This results in the final HTML document you see in the browser. If I inspect element in the HTML, we have the body tag with a data-sveltekit-preload-data attribute, and a div tag with style display set to contents. If we head back to app.html, you can see we have the same markup. The placeholder sveltekit.body has been replaced by the markup from page.svelte. So app.html is nothing but a page template.
Conclusion and Next Steps
At this point, I'm guessing you're curious as to how this routes folder is responsible for the routing feature in our application. So in the next section, let's discuss in detail the routing feature in SvelteKit.
Thank you for watching. Please do consider subscribing to the channel and I'll see you in the next video.
