Getting Started

And Rich Harris said, “Let there be SvelteKit,” and there was SvelteKit.

Make sure you’ve got Node 12 LTS or Node 14 LTS installed!

Let’s create a new SvelteKit project in a new svelte-kit-app directory, which immediately greets us with a big red warning sign:

npm init svelte@next svelte-kit-app
npx: installed 1 in 1.793s

create-svelte version 2.0.0-next.27

█████████  ███████████    ███████    ███████████  ███
███░░░░░███░█░░░███░░░█  ███░░░░░███ ░░███░░░░░███░███
░███    ░░░ ░   ░███  ░  ███     ░░███ ░███    ░███░███
░░█████████     ░███    ░███      ░███ ░██████████ ░███
░░░░░░░░███    ░███    ░███      ░███ ░███░░░░░░  ░███
███    ░███    ░███    ░░███     ███  ░███        ░░░
░░█████████     █████    ░░░███████░   █████        ███
░░░░░░░░░     ░░░░░       ░░░░░░░    ░░░░░        ░░░

Pump the brakes! A little disclaimer...

svelte@next is not ready for use yet. It definitely can't
run your apps, and it might not run at all.

We haven't yet started accepting community contributions,
and we don't need people to start raising issues yet.

Given these warnings, please feel free to experiment, but
you're on your own for now. We'll have something to show
soon.

✔ Copied project files

As it might suggest - this is not recommended.

  • Some stuff is broken.
  • No official docs.
  • No support.

With that in mind, let’s proceed.

? Use TypeScript in components? » (y/N)

Our first branch asks if we want TypeScript support. This is totally optional, even if you say yes. Let’s install it with TypeScript for now. Your <script> tags are still JavaScript by default.

✔ Added TypeScript support.
To use it inside Svelte components, add lang="ts" to the attributes of a script tag.

? What do you want to use for writing Styles in Svelte components?
» - Use arrow-keys. Return to submit.
>   CSS
    Less
    SCSS

We can add Less or SCSS support later. Let’s go with good ol’ CSS for now.

You can add support for CSS preprocessors like SCSS/Less/PostCSS later.

Next steps:
  1: cd svelte-kit-app
  2: npm install (or pnpm install, or yarn)
  3: npm run dev -- --open

To close the dev server, hit Ctrl-C

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

Follow the suggested Next steps.

npm run dev
> svelte-kit-app@0.0.1 dev C:\svelte-kit-app
> svelte-kit dev

As a temporary workaround, make sure to have src/routes/$layout.svelte with at least some barebones “dynamic” content, e.g.

<slot />{''}

Hot Module Reloading

Now that you’ve got the dev server running, head over to http://localhost:3000 to check out the page. The default SvelteKit page with a Counter element will greet you:

You can play around with src/routes/index.svelte or src/components/Counter.svelte and see the changes live!