The Svelte template has long been the official way to bootstrap a Svelte project. But the Svelte template is now archived and no longer maintained. What should you choose instead to bootstrap a Svelte project?
With SvelteKit close to version 1.0, it seems a natural choice to choose SvelteKit. SvelteKit shines when you need advanced features. E.g. SEO, progressive enhancement, fast initial page load or a filesystem-based router. For smaller projects, SvelteKit comes with a lot of unnecessary overhead. For data visualization, a quick experiment or teaching Svelte, all you need is Svelte.
Let’s look at three different ways to bootstrap a Svelte project. And then answer the question of what you should choose instead of the legacy Svelte template.
If you have dipped your toes into Svelte already, you are familiar with the Svelte REPL. Within the Svelte community, it’s the most popular way to share code examples. The Svelte REPL runs client-side and does not need a local setup. You can start coding instantly.
An often overlooked feature of the Svelte REPL is the download button. You can download the source code of every example:
You can start experimenting with the Svelte REPL. And once you decide that you want to continue your experiment on GitHub, download its source code and run it in your local VS Code:
The Svelte REPL would be the perfect way to start a new Svelte project, except that you should not use the legacy Svelte template anymore. But, the Svelte team is working on a replacement for the Svelte Tutorial, which is currently built with the Svelte REPL. The new tutorial https://learn.svelte.dev/ supports Svelte and SvelteKit. It runs on StackBlitz’s WebContainers, a technology that will replace the current Svelte REPL. You can find out more in Rich Harris’s recent talk Full Stack Documentation at JSNation 2022.
As you can see in the following screenshot, CodeSandbox’s Svelte template is a variation of the legacy Svelte template. Unfortunately, its dependencies are outdated. Thanks to semantic versioning, you still get the latest version of Svelte, but most Rollup dependencies need an update:
So, I do not recommend bootstrapping a new Svelte project with CodeSandbox. This is a pity because CodeSandbox has nailed the user experience to create new projects.
The team at StackBlitz has taken a different approach. They managed to get Node.js running in-browser. This is a big deal because they can run pretty much anything that runs with Node.js in a browser, without relying on a back-end server.
npm create vite@latest my-svelte-app -- --template svelte
Click https://vite.new/svelte-ts to bootstrap a Svelte project with TypeScript. This is equal to running
npm create vite@latest my-svelte-ts-app -- --template svelte-ts
on your computer. Here is the Vite Svelte TypeScript template running in your browser (if supported):
Why Vite and not Rollup?
Because Vite has been consistently delivering a fast developer experience for web development. It
also powers SvelteKit and has been outperforming competitors like Webpack
and Rollup. @sveltejs/vite-plugin-svelte provides
everything you need for Svelte development with Vite. The plugin is already configured in
vite.config.js in both templates.
The Svelte REPL and the CodeSandbox Svelte template make bootstrapping a new Svelte project easy. They have both nailed the user experience to create new projects. But they both use the legacy Svelte template, which runs with Rollup and is not maintained anymore.
StackBlitz runs Vite natively in-browser. The two Vite Svelte templates deliver a super-fast developer experience. Thus, when you bootstrap a new Svelte project, use the official Vite Svelte templates. Either through StackBlitz or by bootstrapping them on your computer.