DEV Community

Cover image for A First Look at SvelteKit
ajcwebdev
ajcwebdev

Posted on • Edited on • Originally published at ajcwebdev.com

A First Look at SvelteKit

#svelte #sveltekit #vite #vercel

Outline

All of this project's code can be found in the First Look monorepo on my GitHub.

Introduction

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 SvelteKit, as detailed in What's the deal with SvelteKit?. It's important to emphasize here that the people building Svelte, Sapper, and SvelteKit 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 as a development dependency and its replacement with Snowpack Vite.

SvelteKit is very new, so new it currently exists mostly in the form of the blog post linked at the beginning of this article a monorepo inside the SvelteJS GitHub organization and a website. But you can download it and start using it, albeit with many, many caveats attached to it.

Initialize Demo App 

npm create svelte@latest ajcwebdev-sveltekit
Enter fullscreen mode Exit fullscreen mode

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

Welcome to SvelteKit!

This is release candidate software; expect bugs and missing features.

You'll then be asked a series of questions to configure your application. Feel free to answer based on your own personal use case.

✔ Which Svelte app template? › SvelteKit demo app
✔ Add type checking with TypeScript? › No
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
Enter fullscreen mode Exit fullscreen mode

For the sake of simplicity in this blog post I answered no to all options.

Install Dependencies and Start Development Server 

cd ajcwebdev-sveltekit
pnpm i
pnpm dev
Enter fullscreen mode Exit fullscreen mode

Open localhost:5173 to see the project.

01 - Hello world localhost 3000

Something might happen if you click the + or - buttons around 0, although what that could be no one can possibly know.

Project Structure

I used to have a Snowpack joke here, unfortunately that joke is now deprecated. Now we'll look at the code.

├── src
│   ├── app.html
│   ├── lib
│   │   └── images
│   │       ├── github.svg
│   │       ├── svelte-logo.svg
│   │       ├── svelte-welcome.png
│   │       └── svelte-welcome.webp
│   └── routes
│       ├── +layout.svelte
│       ├── +page.js
│       ├── +page.svelte
│       ├── Counter.svelte
│       ├── Header.svelte
│       ├── about
│       │   ├── +page.js
│       │   └── +page.svelte
│       ├── styles.css
│       └── sverdle
│           ├── +page.server.js
│           ├── +page.svelte
│           ├── how-to-play
│           │   ├── +page.js
│           │   └── +page.svelte
│           └── words.server.js
├── static
│   ├── favicon.png
│   └── robots.txt
├── README.md
├── package.json
├── svelte.config.js
└── vite.config.js
Enter fullscreen mode Exit fullscreen mode

HTML Entry Point

src/app.html contains our websites entry point and includes dynamic content for the head and body.

<!-- src/app.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width" />

    %sveltekit.head%
  </head>

  <body data-sveltekit-prefetch>
    <div>%sveltekit.body%</div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

App Entry Point

src/routes/+page.svelte contains our JavaScript entry point and includes a single file Svelte component. A .svelte file contains three parts:

  • <script> for JavaScript
  • <style> for CSS
  • Any markup you want to include with HTML 
<!-- src/routes/+page.svelte -->

<script>
  import Counter from './Counter.svelte'
  import welcome from '$lib/images/svelte-welcome.webp'
  import welcome_fallback from '$lib/images/svelte-welcome.png'
</script>
Enter fullscreen mode Exit fullscreen mode

The <svelte:head> element allows you to insert elements inside the <head> of your document such as the title.

<!-- src/routes/+page.svelte -->

<svelte:head>
  <title>Home</title>
  <meta name="description" content="Svelte demo app" />
</svelte:head>

<section>
  <h1>
    <span class="welcome">
      <picture>
        <source srcset={welcome} type="image/webp" />
        <img src={welcome_fallback} alt="Welcome" />
      </picture>
    </span>
    to your new<br />SvelteKit app
  </h1>

  <h2>try editing <strong>src/routes/+page.svelte</strong></h2>

  <Counter />
</section>
Enter fullscreen mode Exit fullscreen mode 
<!-- src/routes/+page.svelte -->

<style>
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0.6;
  }

  h1 {
    width: 100%;
  }

  .welcome {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 calc(100% * 495 / 2048) 0;
  }

  .welcome img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: block;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Pages

Each page of your app is a Svelte component written in a .svelte file. Pages are created by adding files and directories to the src/routes directory of your project. A +page.svelte component defines a page of your app, so src/routes/+page.svelte is the root of the site. By default, pages are rendered both on the server (SSR) for the initial request and in the browser (CSR) for subsequent navigation.

Counter Component

Unlike React, Svelte does not have a virtual DOM. Instead, Svelte includes its own system of reactivity to keep the DOM in sync with your application state. This includes responding to events, such as a mouse click. First we initialize a variable count to a value of 0.

<!-- src/routes/Counter.svelte -->

<script>
  import { spring } from 'svelte/motion'

  let count = 0

  const displayed_count = spring()
  $: displayed_count.set(count)
  $: offset = modulo($displayed_count, 1)

  function modulo(n, m) {
    return ((n % m) + m) % m
  }
</script>
Enter fullscreen mode Exit fullscreen mode

We can listen to any event on an element with the on: directive.

<!-- src/routes/Counter.svelte -->

<div class="counter">
  <button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
    <svg aria-hidden="true" viewBox="0 0 1 1">
      <path d="M0,0.5 L1,0.5" />
    </svg>
  </button>

  <div class="counter-viewport">
    <div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
      <strong class="hidden" aria-hidden="true">
        {Math.floor($displayed_count + 1)}
      </strong>
      <strong>{Math.floor($displayed_count)}</strong>
    </div>
  </div>

  <button on:click={() => (count += 1)} aria-label="Increase the counter by one">
    <svg aria-hidden="true" viewBox="0 0 1 1">
      <path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
    </svg>
  </button>
</div>
Enter fullscreen mode Exit fullscreen mode

To test that everything is working, make a change to +page.svelte.

<!-- src/routes/+page.svelte -->

<script>
  import Counter from './Counter.svelte'
</script>

<svelte:head>
  <title>Home</title>
  <meta name="description" content="Svelte demo app" />
</svelte:head>

<section>
  <h1>ajcwebdev-sveltekit</h1>

  <Counter />
  <p><a href="https://ajcwebdev.com">Blog</a></p>
  <p><a href="https://github.com/ajcwebdev">GitHub</a></p>
  <p><a href="https://twitter.com/ajcwebdev">Twitter</a></p>
</section>

<style>
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  h1 {
    width: 100%;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

02 - Homepage with ajcwebdev title

Modules

The $app/environment module provides variables for checking the app's current environment. browser is true when the app is running in the browser and false when running on the server, in development mode, or in production. dev is true in development mode and false in production.

// src/routes/about/+page.js

import { dev } from '$app/environment'

// we don't need any JS on this page, though we'll load
// it in dev so that we get hot module replacement
export const csr = dev

// since there's no dynamic data here, we can prerender
// it so that it gets served as a static asset in production
export const prerender = true
Enter fullscreen mode Exit fullscreen mode

If the client-side router is already loaded because we came here from elsewhere in the app then it is used automatically. Since there's no dynamic data on this page, we can prerender and serve it as a static asset in production.

<!-- src/routes/about.svelte -->

<svelte:head>
  <title>About</title>
  <meta name="description" content="About this app" />
</svelte:head>

<div class="content">
  <h1>About this app</h1>

  <p>
    This is a <a href="https://kit.svelte.dev">SvelteKit</a>
    app. You can make your own by typing the following
    into your command line and following the prompts:
  </p>

  <pre>npm create svelte@next</pre>

  <p>
    The page you're looking at is purely static HTML,
    with no client-side interactivity needed.
    Because of that, we don't need to load any
    JavaScript. Try viewing the page's source,
    or opening the devtools network panel and reloading.
  </p>

  <p>
    The <a href="/sverdle">Sverdle</a> page illustrates
    SvelteKit's data loading and form handling.
    Try using it with JavaScript disabled!
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

Open localhost:5173/about to see this page.

03 - About page

Layouts

Inside src/routes is a layout component that applies to every page. Links between pages are contained in the <Header> component.

<!-- src/routes/+layout.svelte -->

<script>
  import Header from './Header.svelte'
  import './styles.css'
</script>

<div class="app">
  <Header />

  <main>
    <slot />
  </main>

  <footer>
    <p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
  </footer>
</div>

<script>
  import Header from './Header.svelte'
  import './styles.css'
</script>

<div class="app">
  <Header />

  <main>
    <slot />
  </main>

  <footer>
    <p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
  </footer>
</div>

<style>
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    box-sizing: border-box;
  }

  footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
  }

  footer a {
    font-weight: bold;
  }

  @media (min-width: 480px) {
    footer {
      padding: 12px 0;
    }
  }
</style>
Enter fullscreen mode Exit fullscreen mode

A <slot /> tag indicates where a component places its children, so our layout component is the parent of our pages.

Stores

Inside src/routes is a Header.svelte file which imports page from $app/stores. Stores are added to the context of your root component. They are unique to each request on the server rather than shared between multiple requests handled by the same server simultaneously.

This makes it is safe to include user-specific data in page, but it also means the stores are not free-floating objects. They must be accessed during component initialization.

<!-- src/routes/Header.svelte -->

<script>
  import { page } from '$app/stores'
  import logo from '$lib/images/svelte-logo.svg'
  import github from '$lib/images/github.svg'
</script>
Enter fullscreen mode Exit fullscreen mode

page is a readable store whose value reflects the object passed to load functions. It contains:

  • host
  • path
  • params
  • query

The stores themselves attach to the correct context at the point of subscription so you can import and use them directly in components without boilerplate.

<!-- src/routes/Header.svelte -->

<header>
  <div class="corner">
    <a href="https://kit.svelte.dev">
      <img src={logo} alt="SvelteKit" />
    </a>
  </div>

  <nav>
    <svg viewBox="0 0 2 3" aria-hidden="true">
      <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
    </svg>

    <ul>
      <li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
        <a href="/">Home</a>
      </li>
      <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
        <a href="/about">About</a>
      </li>
      <li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
        <a href="/sverdle">Sverdle</a>
      </li>
    </ul>
    <svg viewBox="0 0 2 3" aria-hidden="true">
      <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
    </svg>
  </nav>

  <div class="corner">
    <a href="https://github.com/sveltejs/kit">
      <img src={github} alt="GitHub" />
    </a>
  </div>
</header>
Enter fullscreen mode Exit fullscreen mode

SvelteKit will run the page's load function as soon as the user hovers over the link (on desktop) or touches it (on mobile). This makes the app feel snappier since you aren't waiting for the click event to trigger navigation.

Config

You may have heard in the past that SvelteKit was using Snowpack. While SvelteKit was heavily developed in tandem with Snowpack, it migrated to Vite in February 2021 about a month before its beta launch. You can read Rich Harris's reasoning for the switch here:

While we had misgivings about Vite 1 (which gave Vue apps preferential treatment, and didn't really support SSR), Vite 2 does a really great job of solving some tricky problems that were previously in SvelteKit's domain, like CSS code-splitting or fixing stack traces during SSR. Since it's Rollup-based, it also means that SvelteKit apps can benefit from the very large ecosystem of Rollup plugins.

The project's configuration can be found in svelte.config.js.

// svelte.config.js

import adapter from '@sveltejs/adapter-auto'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
}

export default config
Enter fullscreen mode Exit fullscreen mode

Official Adapters for Deployment

Svelte apps are built with adapters for optimizing your project to deploy with different environments.

There are also adapters for running your app on a Node server or deploying on a static hosting provider.

  • adapter-node for creating self-contained Node apps.
  • adapter-static for prerendering your entire site as a collection of static files.
  • adapter-auto for automatically choosing the adapter for your current environment if it is a supported environment.

By default, vite build will generate a Node app that you can run with pnpm preview. To use a different adapter, install it and update svelte.config.js accordingly. We do not need to install the Vercel adapter unless we want to use Vercel specific features. Otherwise adapter-auto will have everything needed for deployment.

pnpx vercel
Enter fullscreen mode Exit fullscreen mode

Go to ajcwebdev-sveltekit.vercel.app to see the deployed app.

Top comments (15)

Collapse
 
mweissen profile image
mweissen •

Yes, this is a great concept. I have tried sveltekit and Snowpack is a dream. But the project is turning into a never-ending-story. When should there be a beta version? In December 2020? In January 2021? February 2021? I'm afraid by now that it will never be finished. Just like Sapper.

Collapse
 
ajcwebdev profile image
ajcwebdev •

I think it's reasonable to expect a broad picture of where a project is going and when it will be stable, but I think it's unreasonable to expect open sources projects of this nature to have specific "release dates" in the way we think of releasing traditional software.

And to your point about Sapper, I know many people with Sapper apps who are perfectly happy with them, so the idea that Sapper was "never finished" doesn't make any sense because there are projects built with Sapper that exist in the world.

The question of when the team feels like svelte-kit is polished enough to be called "1.0" or "General Availability" or whatever is going to be up to them. Only they will know when the project is in a stable state.

To me this comes with the territory of using software I'm not paying for, I'm not in a position to dictate the timeline. Asking them to put a date on it is counterproductive. Others are welcome to disagree but that's my philosophy.

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
ajcwebdev •

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
ajcwebdev • • Edited

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
 
borsemayur2 profile image
Mayur Borse •

I used adapter-vercel for deploying on vercel.

Collapse
 
ajcwebdev profile image
ajcwebdev •

Very cool! Do you have a repo or link to the site you could share?

Collapse
 
borsemayur2 profile image
Mayur Borse •

github.com/borsemayur2/sveltekit-d...

It supports deployment to Netlify, Vercel or Node (default).
Set ADAPTER env variable as per deployment service.
ADAPTER=vercel // Vercel
ADAPTER=netlify // Netlify

Thread Thread
 
ajcwebdev profile image
ajcwebdev •

Awesome, thanks for sharing!

Collapse
 
borsemayur2 profile image
Mayur Borse •

sveltekit-demo-hglaxwq6i-borsemayu...

Collapse
 
erickmarcia profile image
Erick Marcia •

It gives me an error when trying to build..

Collapse
 
ajcwebdev profile image
ajcwebdev • • Edited

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
Erick Marcia •

dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
clozach profile image
Chris Lozac'h •

Remember, you have to whisper when you say Snowpack.

😂

View full discussion (15 comments)

Read next

datboimayank profile image

Day 2: Decoding 'Hello, World!' – A Closer Look at C++ Fundamentals

Mayank Roy -

mfm347 profile image

GitHub Repository Card

MFM-347 -

neural-minds profile image

Real-World Success Stories of AI-Powered Upskilling

Neural Minds -

sharanappa_m profile image

Understanding React Router: A Step-by-Step Guide for Beginners

Sharanappa -