Learn SvelteKit by Building a Reddit Clone Application

 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. 

, a now deprecated Svelte-based framework. With the Svelte team abandoning 

, 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:

 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.

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:

$ npm create svelte@latest <project-name>

 command. This command gets transformed to the command 

npm exec create-svelte@latest <project-name>

 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.

 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 

Currently, there is not much on the page, but that will change as you progress further in this tutorial.

Overview of a SvelteKit Project's Directory and File Structure

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:

<project-name>
│   .gitignore
│   .npmrc
│   .prettierignore
│   .prettierrc
│   package.json
│   playwright.config.ts
│   README.md
│   svelte.config.js
│   tsconfig.json
│   vite.config.js    
│
└───src
│   │   app.d.ts
│   │   app.html
│   │
│   └───routes
│       │   index.svelte
│   
└───static
│   │   favicon.png
│
└───tests
│   │   test.ts

Within the root of the project directory, you will find the following files:

 directory, you find the following files and directories:

 directory can also have the following optional files and directories:

 directory contains all of the application's static assets, such as 

 (the SvelteKit project already comes with a default 

 directory contains any E2E tests that should be ran by Playwright.

Continue on to the second part of this tutorial.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Sveltekit

Learn SvelteKit by Building a Reddit Clone Application

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript