SvelteKit is a framework for building extremely high-performance web apps.
There are two basic concepts in SvelteKit:
- Each page of your app is a Svelte component
- You create pages by adding files to the
src/routesdirectory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over
Building an app with all the modern best practices — code-splitting, offline support, server-rendered views with client-side hydration — is fiendishly complicated. SvelteKit does all the boring stuff for you so that you can get on with the creative part.
The easiest way to start building a SvelteKit app is to run
npm init svelte@next sveltekit-magic
The above command will ask you some questions about how you'd like to set the template. Choose the 'SvelteKit demo app'. This comes with a Todo list application built-in. We'll make changes to the app, so the user needs to log in using Magic to access the todos.
cd sveltekit-magic npm install npm run dev
This will scaffold a new project in the
sveltekit-magic directory, install its dependencies, and start a server on http://localhost:3000.
Open up http://localhost:3000 on a browser, and you should see something that looks like this...
To read the full guide, please visit https://magic.link/posts/magic-svelte