What is Sveltekit?
Sveltekit is built on Svelte, a UI framework that allows developers to write frontend code in the languages they already know - HTML, CSS, JavaScript.
Why Sveltekit?
Sveltekit leverages the Svelte compiler to produce highly optimized minimal JavaScript, resulting in faster load times, and better user experience. Along with this Sveltekit offers file-based routing, SSR, and SSG making SevelteKit a powerful yet simple tool for making modern web applications.
Unlike other frontend libraries like React that rely on the virtual DOM to manage UI changes, Sveltekit works directly with the actual DOM to manage UI changes which makes Sveltekit faster.
Getting Started: Creating Your First SvelteKit Project
Here, I will show how to get started with Sveltekit by creating a simple skeleton project and then explaining the project structure of Sveltekit.
Having Nodejs installed is a must.
Head over to the directory where you wish to create the project
Once you are in the directory, enter the following command to create a Sveltekit project:
npm create svelte@latest <name_of_project>
After this, you will see a list consisting of the following options:
From the above options we choose 'Skeleton Project', this will create the basic introductory files for creating a Sveltekit project.
Next, we get a list of options to choose from, I am using JavaScript and I chose 'No' for the options below
Next, the prompt asks if we want linting for the project, for that we can choose to add ESLinting for our project. After executing the above steps we will get something like this, as shown in the image below:
After executing the above commands and starting the dev server, the welcome page should look something like this:
Project Structure of a Sveltekit App:
src: The src directory is the core part of the application, this is where all of the code goes.
src/lib: The src/lib directory in SvelteKit contains reusable components, utility functions, and shared modules. For example, header.svelte here can be reused across multiple pages, promoting consistency and reducing code duplication.
src/routes: SvelteKit uses file-based routing, where directories represent routes. For example, in the src/routes directory in the flowchart above, +page.svelte contains the content for the home route and +layout.svelte defines the layout for that route and its subdirectories. If you define a layout in /home, it will also apply to any subdirectories like /home/contact and /home/about (if you create one).
static: The static directory has static assets such as fonts, images, etc. that you may use in the web application.
tests: If you are using a testing framework to test your application then all the test files are included in the 'tests' directory.
svelte.config.js: The svelte.config.js file consists of the configuration file for the sveltekit application.
package.json: The package.json consists of all the dependencies being used in the project.
vite.config.js: Internally sveltekit uses vite as a build tool, this file contains the configuration for vite.
SvelteKit is a powerful framework built on Svelte, emphasizing optimized, minimal JavaScript for fast performance. It offers features like file-based routing, SSR, and SSG, making it ideal for modern web applications. Unlike other frontend libraries, SvelteKit directly manipulates the DOM for faster UI updates. The blog discussed an overview of the project structure and key directories such as src, static, and tests. It also discusses configuration files like svelte.config.js, package.json, and vite.config.js.
We will see Sveltekit in action in the upcoming blogs, stay tuned!
