A most feeble Svelte 5 app

Svelte is on the verge of a momentous release, a brand new version growing the library to a major number five.

This version comes with several features, but also breaking changes and warning messages. And while it is presumptuous, you can try the version, with online playgrounds and locally, setting up full-blown applications or a most brittle folder structure.

Let’s review the options at your disposal. The most clear workflow is offered on Svelte own website, with an instruction you run in the terminal and with the package manager of your choice.

pnpm create svelte@latest app

As you go through the prompts you can tailor the app to fit your coding preferences, and an option notifies you of the upcoming version.

Select additional options:
- [x] ...
- [ ] Try the Svelte 5 preview (unstable!)

Taking stock of the dangers — you certainly saw the exclamation mark after the already stressing directive — you can toggle the option with the space bar. And by the end of the sequence, you can try Svelte 5 in the newfound environment.

The process is most clear and the preferred way to develop Svelte applications. But if your intent is to just toy with the latest release, you can trim down the structure considerably.

Let’s start from scratch, with a new folder and a solitary package.json. In this file add one instruction, describing the type of module.

{
	"type": "module"
}

The line is essential to work with JavaScript import statements, and JavaScript modules in general.

At this juncture you need to install three packages:

vite, to run the application with a local server
@sveltejs/vite-plugin-svelte, so that Vite is able to process the code written in Svelte syntax and .svelte components
svelte, but not any version of Svelte. The upcoming, fifth version, accessible through the @next suffix

pnpm i -D svelte@next vite @sveltejs/vite-plugin-svelte

You might get a warning with peer dependencies, but again, this is the risk with unreleased tech — you need to support the weight of a few warnings.

You are ready to scaffold the project, and at least, need a handful of files. Immediately, index.html. The document works as the entry point of the application, so that you have a place to add the structure, style and scripts of the components.

Editors might populate the document with shortcuts, but to be as minimal as possible, you can get away with a div container.

<div id="root"></div>

Past the markup, add a script of type module. Here we are going to target the node and initialize the application.

<script type="module">
	const root = document.getElementById('root');
	// ...
</script>

Say that you write your components in a source folder, src.

|- package.json
|- index.html
|- src
  |- App.svelte

In the script import the component pointing to the file, and inject the code in the page with the createRoot function.

import { createRoot } from 'svelte';
import App from './src/App.svelte';

In the past, you might have instantiated the app with the new keyword, relying on class syntax.

// Svelte 4
const app = new App({
	target: root
});

export default app;

But this is formula is long gone as components have evolved, and become functions instead.

const app = createRoot(App, {
	target: root
});

export default app;

You’re close to the finish line, and need one more step. One contribution from a package that is still waiting on the sidelines, the svelte plugin.

In a vite.config.js file, add the following.

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
	plugins: [svelte()]
});

There’s not much to explain, this is just what you need to have Vite process the syntax, through the plugin.

You can finally launch the application right from the terminal.

pnpm vite dev

But, to save a few keystrokes, you can also add the instruction as one of the scripts, in package.json.

{
	// ...,
	"scripts": {
		"dev": "vite dev"
	}
}

Either way, you can then open up your favorite browser, reach the appropriate port number and enjoy the app.

“All” that is left is to write the application itself, and enjoy Svelte 5 features.

let count = $state(0);

Too long, don’t want to bother? You might be in luck. I don’t want to go through the process myself, or at least not more than once. I’ve created a repository on GitHub, so that you can clone the project and be ready at once.

Set up.

npx degit borntofrappe/vite-svelte-5 app
cd app
pnpm i

And, run.

pnpm dev