Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

SvelteKit Minimum Viable Build

10 Jan 2022 🔖 architecture jamstack web development minimum viable build
💬 EN

Table of Contents

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.


  1. Get a free account
  2. Set up a site, connected to a GitHub repository, that contains just 4 files:
    • /src/routes/index.svelte * /src/app.html * /svelte.config.js
    • /package.json
    • TEST IT: Make sure you can visit as expected, without “page not found” errors.
  3. To do: Profit

Magic words

SvelteKit has a “magic folder” path of /src/routes/ (documentation).

As I mentioned for Next.js, static site generator 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/ – 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.



(“The filename determines the route. For example, src/routes/index.svelte is the root of your site.“)

<div>Hello world!</div>


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.

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


To develop locally, you can export an empty object, 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.

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

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

export default config;


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.)

    "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"


The resulting page has the following HTML:

<!DOCTYPE html>
<html lang="en">
		<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";
				target: document.body,
				paths: {"base":"","assets":""},
				session: {},
				route: true,
				spa: false,
				trailing_slash: "never",
				hydrate: {
					status: 200,
					error: null,
					nodes: [
					url: new URL(""),
					params: {}

<div>Hello world!</div>


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.

--- ---