Svelte 3 Up and RunningWant 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. |
This is a project template for Svelte 4 apps that includes svelte-spa-router for client-side routing, TypeScript, and Vite as bundler.
This project integrates Flowbite UI with the svelte spa router. There are 3 pages in total as example. Front page, login page and app page.
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.
Install the dependencies…
cd svelte-app
npm install
…then start a dev server:
make run
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.