Svelte 3 Up and Running Want to learn Svelte 3 and how to build a Single-Page App (SPA) with it (and with this router)? Check out my book Svelte 3 Up and Running on Amazon.

Svelte app with svelte-spa-router

This is a project template for Svelte 4 apps that includes svelte-spa-router for client-side routing, TypeScript, and Vite as bundler.

About svelte-spa-router

svelte-spa-router is a client-side router for Svelte 4 apps that leverages hash-based routing (i.e. stores the current view in the URL after the # symbol).

You can read more about the router, and the reasons why you might want to use hash-based routing (or not), in the documentation.

Get started

Install the dependencies…

cd svelte-app
npm install

…then start a dev server using Vite:

npm run dev

Navigate to http://localhost:5050. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

You can add more routes by defining them in the src/routes.ts file. More information can be found on the documentation for svelte-spa-router.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the vite commands in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.

Building and running in production mode

To create an optimized version of the app:

npm run build

You can run the newly-built app with npm run preview.