DEV Community

loading...
Cover image for a first look at svelte-kit

a first look at svelte-kit

ajcwebdev profile image anthonyCampolo Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

After initializing the project you'll be given a disclaimer.

01-svelte-next-disclaimer

You'll then be asked if you want to use TypeScript or not.

02-use-typescript

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
Enter fullscreen mode Exit fullscreen mode

03-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
Enter fullscreen mode Exit fullscreen mode

04-snowpack

Remember, you have to whisper when you say Snowpack.

05-hello-world

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.

06-folder-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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

07-home-page-ajcwebdev

Discussion

pic
Editor guide
Collapse
jwess profile image
Joel

I followed this article but chose "yes" for TypeScript. I saw the error Error: Failed to load /_app/assets/generated/root.js: NOT_FOUND when I tried to launch, but I was able to fix this issue by making this change to snowpack.config.js:

github.com/snowpackjs/snowpack/dis...

Collapse
ajcwebdev profile image
anthonyCampolo Author

Thanks a lot, Joel! I'll make a note in the article.

Collapse
asader profile image
asader

"But to me the most significant change by far is the removal of Rollup and its replacement with Snowpack."
Only in development.

Collapse
ajcwebdev profile image
anthonyCampolo Author

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.

Collapse
clozach profile image
Chris Lozac'h

Remember, you have to whisper when you say Snowpack.

😂

Collapse
erickmarcia profile image
Erick Marcia

It gives me an error when trying to build..

Collapse
ajcwebdev profile image
anthonyCampolo Author

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.

Collapse
erickmarcia profile image