Update 2024 - SvelteKit and Vite

Now the Sapper project was archived and the Svelte team is focusing on Svelte Kit.

The SvelteKit has chosen Vite instead of Snowpack as the default builder. Snowpack team is now focused on developing Astro and Snowpack is not maintained anymore.

Today I finally got some time to watch the video Rich Harris: Futuristic Web Development recorded at Svelte Summit 2020. If you have 20 minutes, just stop reading and watch it.

Tip
 If you have 20 minutes, just stop reading and watch Rich Harris: Futuristic Web Development video.

Sapper 1.0 is not going to happen

As you might know, this blog is powered by Sapper. I am already quite happy with it, so when I hear this announcement, I felt like when they cancel a TV Series that I am enjoying.

Happily, there is a good reason, there is going to be a better Sapper, I think they will call it svelte-kit, it is solving some issues and improving some aspects of Sapper, but the main benefit, in my opinion, is that you won’t have to choose between Sapper or Svelte when you start a new application, everything will be supported by the Svelte ecosystem.

Snowpack

Snowpack will become the default Svelte builder. It is not a regular bundler like Webpack or Rollup. It relies on Javascript modules so your application delegate the modules loading on the web browser; traditionally the chunks are loaded by the bundler (or by source code injected by the bundler).

Example

Note
 This example is just a copy from the Rich Harris: Futuristic Web Development video.
How to create the sample project
mkdir svelte-next-sample
cd svelte-next-sample
npm init svelte@next
npm install
Start development server
npm run dev

[snowpack] > Listening on http://localhost:3000

You will find many similarities with Sapper, like the routes and components folders.

Build

Build the project for production
npm run build

SSR

By default the project is configured with SSR rendering enabled.

SSR with nodejs server and client
npm run build
...

> Optimizing...
  ✔ server
  ✔ client

> Generating app...
  Using @sveltejs/adapter-node (1)
  Prerendering static pages...
  ✔ done

  1. This is the default adapter to generate SSR application with a nodejs server and a client.

Pure static site

This blog is a pure static website, it doesn’t require a server. With Sapper we have the option to execute sapper export and it generates the app with no server required.

With this new approach, to generate a static site, we just have to use a different adapter:

npm i -D @sveltejs/adapter-static
svelte.config.js
module.exports = {
	adapter: '@sveltejs/adapter-static'
};
npm run build

> Generating app...
  Using @sveltejs/adapter-static (1)
  ✔ done

  1. The static adapter is selected

But we are not yet done, because the build step is not generating the html file that we can use as entry point. We have to execute one command more: svelte-kit adapt, thanks Joshua for pointing this out.

We can add it to the package.json scripts section
	"scripts": {
		"dev": "svelte-kit dev",
		"build": "svelte-kit build",
		"start": "svelte-kit start",
+		"adapt": "svelte-kit adapt"
	},
npm run adapt (1)
> svelte-kit adapt


> Using @sveltejs/adapter-static
  ✔ done

ls build (2)
_app  favicon.ico  index.html  robots.txt

  1. It generates the static entry point, index.html in build directory.

  2. Listing the content of build directory