KatieI’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
- Get a Netlify.com free account
- Set up a Netlify.com 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
https://your-site.netlify.app/as expected, without “page not found” errors.
-
- 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.
Files
/src/routes/index.svelte
(“The filename determines the route. For example,
src/routes/index.svelteis the root of your site.“)
<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.
<!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, 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;
/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.)
{
"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:
<!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.
