@sveltejs/kit

What is @sveltejs/kit?

@sveltejs/kit is a framework for building web applications using Svelte. It provides a comprehensive set of tools and features for creating highly performant, modern web applications with ease. SvelteKit handles routing, server-side rendering, static site generation, and more.

What are @sveltejs/kit's main functionalities?

Routing

SvelteKit provides a file-based routing system. You can create routes by adding files to the `src/routes` directory. Dynamic routes can be created using square brackets.

```javascript
// src/routes/index.svelte
<script>
  export let name = 'world';
</script>

<h1>Hello {name}!</h1>

// src/routes/[slug].svelte
<script>
  export let params;
</script>

<h1>Post: {params.slug}</h1>
```

Server-side Rendering (SSR)

SvelteKit supports server-side rendering out of the box. You can fetch data on the server and pass it to your components using the `load` function.

```javascript
// src/routes/index.svelte
<script context="module">
  export async function load({ page, fetch, session, context }) {
    const res = await fetch('/api/data');
    const data = await res.json();
    return { props: { data } };
  }
</script>

<script>
  export let data;
</script>

<h1>Data: {data}</h1>
```

Static Site Generation (SSG)

SvelteKit can generate static sites. By using the `@sveltejs/adapter-static` adapter, you can build your site as a collection of static files.

```javascript
// svelte.config.js
import adapterStatic from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapterStatic()
  }
};
```

API Routes

SvelteKit allows you to create API routes by adding JavaScript files to the `src/routes` directory. These routes can handle HTTP requests and return responses.

```javascript
// src/routes/api/data.js
export async function get() {
  return {
    status: 200,
    body: { message: 'Hello from the API' }
  };
}
```

Other packages similar to @sveltejs/kit

next

Next.js is a React framework for building server-side rendered and statically generated web applications. It offers similar features to SvelteKit, such as file-based routing, SSR, and SSG. However, it uses React instead of Svelte.

nuxt

Nuxt.js is a framework for building Vue.js applications with server-side rendering, static site generation, and more. It provides a similar set of features to SvelteKit but is built on top of Vue.js.

gatsby

Gatsby is a React-based framework for building static sites. It focuses on performance and uses GraphQL for data fetching. While it offers static site generation like SvelteKit, it does not provide server-side rendering out of the box.

README

@sveltejs/kit

Here be dragons, etc etc.

This project aims to replicate Sapper's functionality in its entirety, minus building for deployment (which can be handled by 'adapters' that do various opinionated things with the output of snowpack build).

It's currently missing a ton of stuff but I figured I'd throw it up on GitHub anyway partly for the sake of 'working in the open' but mostly because I need an issue tracker to organise my thoughts.

There are no tests yet or anything like that. Some of the code has just been straight copied over from the existing Sapper repo, but a pleasing amount of it can safely be left behind.

Trying it out

Clone this repo, npm install, and npm link. That will create a global link to the svelte bin. You can then either npm run build or npm run dev, if you intend to make changes and see them immediately reflected.

Then, clone the corresponding svelte-app-demo repo and follow the instructions therein.