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
✔ 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
> email@example.com 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.
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/components/Counter.svelte and see the changes live!