Svelte, a bright future with Snowpack

Echoing Richard Harris announcements in Svelte Summit 2020: Sapper 1.0 never gonna happen, the new Svelte Kit, Snowpack as build tool, Javascript Module System.

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