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 apps that includes svelte-spa-router for client-side routing, and Rollup as bundler.

This template is based on the official template for Svelte: sveltejs/template.

To create a new project based on this template using degit:

npx degit italypaleale/svelte-spa-router-template svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

About svelte-spa-router

svelte-spa-router is a client-side router for Svelte 3 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 Rollup:

npm run dev

Navigate to localhost:5000. 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.js 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 sirv 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 start. This uses sirv too.

Using TypeScript

This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:

node scripts/setupTypeScript.js

Or remove the script via:

rm scripts/setupTypeScript.js