[SvelteKit] SvelteKit: The fastest way to build Svelte apps

Posted on Edited on In , , , Views: Word count in article: 2.4k Reading time ≈ 2 mins.

SvelteKit

SvelteKit is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

Unlike single-page apps, SvelteKit doesn’t compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.

Features

  • Powered by Svelte

    SvelteKit is an application framework powered by Svelte — build bigger apps with a smaller footprint

  • Best of both worlds

    All the SEO and progressive enhancement of a server-rendered app, with the slick navigation of an SPA

  • Build fast

    Hit the ground running with advanced routing, server-side rendering, code-splitting, offline support and more

Prerequisites

Installation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$ npm init svelte@next cloudolife-sveltekit-demo
Need to install the following packages:
  create-svelte@next
Ok to proceed? (y) y

create-svelte version 2.0.0-next.89

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? … No / Yes
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">
✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: cd cloudolife-sveltekit-demo
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

See Getting started | Docs • SvelteKit - https://kit.svelte.dev/docs#introduction-getting-started to learn more.

References

[1] sveltejs/kit: The fastest way to build Svelte apps - https://github.com/sveltejs/kit

[2] SvelteKit • The fastest way to build Svelte apps - https://kit.svelte.dev/

[3] Getting started | Docs • SvelteKit - https://kit.svelte.dev/docs#introduction-getting-started

[4] Svelte • Cybernetically enhanced web apps - https://svelte.dev/