SvelteKit Minimum Viable Build
Tags: jamstack, webdev, sveltekit
Published: 2022-02-23 15:44:13

---
title: SvelteKit Minimum Viable Build
published: true
date: 2022-01-10 17:00:00 UTC
tags: jamstack,webdev,sveltekit
canonical_url: https://katiekodes.com/sveltekit-minimum-viable-build/
---

I’m wondering if SvelteKit could make it easy for me to build a UI onto an app to help me write “runbooks” for operational processes at work that happen every few weeks. So, first I have to figure out what goes in a SvelteKit, and as usual, I’m starting as bare-bones as the system will let me.

## Process

1. Get a [Netlify.com](https://www.netlify.com/) free account
2. Set up a Netlify.com site, connected to a GitHub [repository](https://github.com/kkgthb/web-site-sveltekit-01-min-viable-build), that contains just 4 files: 
  - `/src/routes/index.svelte` \* `/src/app.html` \* `/svelte.config.js`
  - `/package.json`
  - **TEST IT:** Make sure you can visit `https://your-site.netlify.app/` as expected, without “page not found” errors.
3. To do: Profit

* * *

## Magic words

SvelteKit has a “[magic](https://dev.to/katiekodes/how-to-break-and-rebuild-the-jamstack-2g24) folder” path of `/src/routes/` _([documentation](https://kit.svelte.dev/docs#routing-pages))_.

As I mentioned for Next.js, [static site generator](https://dev.to/katiekodes/what-is-a-static-site-generator-350o) world, “ **routing** ” tends to refer to the ways you can configure the SSG to turn data you’re feeding it into actual URLs. Most of them have some way of automatically doing “routing” based on the way you named data folders or files, or the way you named template folders or files. Some of them will pretty much eat every folder they can get their hands on and try to route it _(11ty)_; [others like SvelteKit seem to favor limiting this behavior, by default, to folders with “magic names” like `/routes/`](https://kit.svelte.dev/docs#routing-pages) – and then there are some more advanced syntaxes for doing fancier “routing” like looping over a bunch of Markdown files in your codebase and turning them into URLs.

* * *

## Files

### `/src/routes/index.svelte`

> _(“[The filename determines the route. For example, `src/routes/index.svelte` is the root of your site.](https://kit.svelte.dev/docs#routing-pages)“)_

```html
<div>Hello world!</div>
```

### `/src/app.html`

Unlike Next.js and Gatsby, SvelteKit won’t implicitly write pages’ outer HTML for you.

By default, that means creating an HTML file at `/src/app.html`.

```html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%svelte.head%
	</head>
	<body>
		%svelte.body%
	</body>
</html>
```

### `/svelte.config.js`

To develop locally, [you can export an empty object](https://kit.svelte.dev/docs#configuration), but you have to have this file, and the moment you want to deploy your site to a host in the cloud like Netlify, you’ll need to start filling it out, so that you can tell Sveltekit to give the cloud builder some extra information that it needs.

```js
import adapter from "@sveltejs/adapter-auto";

const config = {
  kit: {
    adapter: adapter(),
  },
};

export default config;
```

### `/package.json`

Note the `"type": "module"` property. Best I can tell, this makes sure the `import` syntax at the top of the config file works properly.

_(Also, it seems to be a known issue that you’ll get errors if you try to use `devDependencies` instead of `dependencies` on Windows.)_

```json
{
    "name": "sveltekit-mvb",
    "version": "0.0.1",
    "scripts": {
      "dev": "svelte-kit dev",
      "build": "svelte-kit build"
    },
    "type": "module",
    "dependencies": {
      "@sveltejs/adapter-auto": "next",
      "@sveltejs/kit": "next",
      "svelte": "next"
    }
}
```

* * *

## Output

The resulting page has the following HTML:

```html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<link rel="stylesheet" href="/_app/assets/start-aaaaaa1.css">
		<link rel="modulepreload" href="/_app/start-bbbbbb2.js">
		<link rel="modulepreload" href="/_app/chunks/vendor-cccccc3.js">
		<link rel="modulepreload" href="/_app/layout.svelte-dddddd4.js">
		<link rel="modulepreload" href="/_app/pages/index.svelte-eeeeee5.js">

		<script type="module">
			import { start } from "/_app/start-bbbbbb2.js";
			start({
				target: document.body,
				paths: {"base":"","assets":""},
				session: {},
				route: true,
				spa: false,
				trailing_slash: "never",
				hydrate: {
					status: 200,
					error: null,
					nodes: [
						import("/_app/layout.svelte-dddddd4.js"),
						import("/_app/pages/index.svelte-eeeeee5.js")
					],
					url: new URL("https://your-site.netlify.app/"),
					params: {}
				}
			});
		</script>
	</head>
	<body>
			

<div>Hello world!</div>

	</body>
</html>
```

Like with Gatsby and Next.js output, there’s a lot of JavaScript embedded in my page, but the `<div>Hello world!</div>` I expect to see exists deep in the middle.

* * *

## Helpful links

- [This codebase on GitHub](https://github.com/kkgthb/web-site-sveltekit-01-min-viable-build)