@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 is a more fleshed-out version of https://github.com/Rich-Harris/snowpack-svelte-ssr that 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.

Snowpack impressions

This thing is really neat. It has some bugs and missing features, but identifying those is the whole purpose of this experiment, and so far I've been able to MacGyver my way around them:

• the server app and the client app trip over each other because Snowpack has a global caching mechanism. I'm currently working around it by symlinking various folders for one of the instances
• it rewrites imports but seems to do so incorrectly at times? e.g. if you import foo.svelte it will rewrite it to foo.svelte.js, but that import will fail unless you modify the request to foo.js
• it'd be really nice if it exposed a JavaScript API so that it wasn't necessary to invoke the CLI in a child process and communicate with it over HTTP — ideally there'd be a way to 'import' a file from a Snowpack instance, and a way to run Snowpack as middleware that you can use with a regular HTTP server

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.