Back in July I was considering building a project with Sapper, which thankfully I never actually started. I say thankfully because, as Rich Harris announced at the recent Svelte Summit, Sapper 1.0 will be released... never.
Instead the Svelte core team is shifting its efforts to a project known as svelte-kit. It's important to emphasize here that the people building Svelte, Sapper, and svelte-kit are all basically the same people. So really nothing drastic is changing here, it's more of a rebrand and namespace migration. Or is it?
There is also going to be a larger focus on serverless technology, with Svelte now being referred to as a "serverless-first" framework. But to me the most significant change by far is the removal of Rollup and its replacement with Snowpack.
Svelte-kit is very new, so new it currently exists mostly in the form of the blog post linked at the beginning of this article. But you can download it and start using it, albeit with many, many caveats attached to it.
Initialize project
mkdir ajcwebdev-sveltekit
cd ajcwebdev-sveltekit
npm init svelte@next
After initializing the project you'll be given a disclaimer.
You'll then be asked if you want to use TypeScript or not.
Don't judge me.
If you choose "yes" for TypeScript you may see the following error when you try to launch: Error: Failed to load /_app/assets/generated/root.js: NOT_FOUND. You can fix this issue by making a change to snowpack.config.js detailed at this link.
Install dependencies
npm install
0 vulnerabilities? Seems like a suspiciously low number. I don't know if I feel safe using a project with no vulnerabilities.
Start development server
npm run dev -- --open
Remember, you have to whisper when you say Snowpack.
Something might happen if you click the button that says Clicks: 0, although what that could be no one can possibly know.
Code
Now we'll look at the code. Here's our project structure.
app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
%svelte.head%
</head>
<body>
%svelte.body%
</body>
</html>
index.svelte
<script>
import Counter from '$components/Counter.svelte';
</script>
<main>
<h1>Hello world!</h1>
<Counter/>
<p>Visit the <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
</main>
<style>
:root {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
main {
text-align: center;
padding: 1em;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4rem;
font-weight: 100;
line-height: 1.1;
margin: 4rem auto;
max-width: 14rem;
}
p {
max-width: 14rem;
margin: 2rem auto;
line-height: 1.35;
}
@media (min-width: 480px) {
h1 {
max-width: none;
}
p {
max-width: none;
}
}
</style>
Counter.svelte
<script>
let count = 0;
const increment = () => {
count += 1;
};
</script>
<button on:click={increment}>
Clicks: {count}
</button>
<style>
button {
font-family: inherit;
font-size: inherit;
padding: 1em 2em;
color: #ff3e00;
background-color: rgba(255, 62, 0, 0.1);
border-radius: 2em;
border: 2px solid rgba(255, 62, 0, 0);
outline: none;
width: 200px;
font-variant-numeric: tabular-nums;
}
button:focus {
border: 2px solid #ff3e00;
}
button:active {
background-color: rgba(255, 62, 0, 0.2);
}
</style>
To make sure everything is working we'll make a change to our index.svelte file.
<script>
import Counter from '$components/Counter.svelte';
</script>
<main>
<h1>ajcwebdev</h1>
<Counter/>
<p><a href="https://github.com/ajcwebdev">GitHub</a></p>
<p><a href="https://twitter.com/ajcwebdev">Twitter</a></p>
<p><a href="https://dev.to/ajcwebdev">Dev.to</a></p>
</main>
Discussion
I followed this article but chose "yes" for TypeScript. I saw the error
Error: Failed to load /_app/assets/generated/root.js: NOT_FOUNDwhen I tried to launch, but I was able to fix this issue by making this change tosnowpack.config.js:github.com/snowpackjs/snowpack/dis...
Thanks a lot, Joel! I'll make a note in the article.
"But to me the most significant change by far is the removal of Rollup and its replacement with Snowpack."
Only in development.
Very true since you're always just shipping vanilla JS with Svelte. But these tools have become so ingrained in our development workflow this still seems significant to me.
😂
It gives me an error when trying to build..
This project is currently in flux and it's been over a month since I updated this blog post, so it's entirely possible somebody broke something since then. Feel free to post your error in your comment and maybe we can help figure it out.
dev-to-uploads.s3.amazonaws.com/i/...