Awesome
<table> <tr> <td> <a href="https://www.amazon.com/dp/B08D6T6BKS/"><img src="https://static.packt-cdn.com/products/9781839213625/cover/smaller" width="120" /></a> </td> <td> <h3>Svelte 3 Up and Running</h3> <p>Want to learn Svelte 3 and how to build a Single-Page App (SPA) with it (and with this router)? Check out my book <a href="https://www.amazon.com/dp/B08D6T6BKS/">Svelte 3 Up and Running</a> on Amazon.</p> </td> </table>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.