What is SvelteKit?
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/routes
directory 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.
Getting started
The easiest way to start building a SvelteKit app is to run npm init
:
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...
{WIP} - This guide will not be using the Cookies, @hapi/iron or session with cookies as show in this Guide.
To read the full guide, please visit https://magic.link/posts/magic-svelte
Top comments (0)