Tutorials on Sveltekit

SvelteKit is a serverless-first framework for building high-performance, web applications with Svelte. Newcomers to Svelte can think of SvelteKit as Next.js or Nuxt.js, but for Svelte. First announced in October 2020 , SvelteKit entered public beta in March 2021 and is the successor of Sapper , a now deprecated Svelte-based framework. With the Svelte team abandoning sveltejs/template and sveltejs/sapper-template , SvelteKit became the de-facto framework for building any type of web application (of any size) with Svelte. SvelteKit inherits many of Sapper's functionality and features: However, the Svelte team designed SvelteKit to address Sapper's shortcomings: Although the road to v1.0 remains in progress, you can still build production-grade, SEO-friendly applications with the SvelteKit beta. The best part of SvelteKit is the ability to build Next.js-like applications with an amazing developer experience and with Svelte, which exceeds React in terms of performance and size. Svelte's compiler turns Svelte components (written with an intuitive, declarative API) into efficient JavaScript. Below, I'm going to show you: By the end of this tutorial series, you will have built a full-functional Reddit clone application with SvelteKit and TailwindCSS: To get started, run the following command to create a new SvelteKit project: The npm create command is an alias for the npm init command. This command gets transformed to the command npm exec create-svelte@latest <project-name> , which remotely fetches the create-svelte CLI executable and runs it to create a new SvelteKit project. The CLI tool will present a series of prompts that determine how you want to set up the project: After the project has been created, change your current directory to the project's directory and install the dependencies. When you open the package.json file, you will notice SvelteKit already provides several npm scripts: Other npm scripts get added based on the additional tooling that you told the SvelteKit CLI to add to the project: To verify that the application runs properly, start up the development server and visit the application at http://localhost:5173 : Currently, there is not much on the page, but that will change as you progress further in this tutorial. Now that you know how to locally run a SvelteKit application, let's take a look at the remaining files and directories that make up a SvelteKit project. The following is the directory and file structure of a barebones SvelteKit project: Within the root of the project directory, you will find the following files: When you look inside the src directory, you find the following files and directories: The src directory can also have the following optional files and directories: The static directory contains all of the application's static assets, such as favicon.png (the SvelteKit project already comes with a default favicon.png file) and sitemap.xml . The tests directory contains any E2E tests that should be ran by Playwright. Continue on to the second part of this tutorial.